代码之家 › 专栏 › 技术社区 › Lauren

在ngx传单项目中添加BeautifyMarker插件

ngx-leaflet leaflet plugins typescript angular

4

Lauren · 技术社区 · 8 年前

我目前无法将BeautifyMarker插件与 ngx-leaflet 角度2包装。

我已经跟踪了 install instructions for BeautifyMarker 沿着 ngx-leaflet plugin instructions 没有运气。

我用过 npm install 为了抓住漂亮的市场,字体太棒了,而且已经安装了引导程序。传单也已根据 ngx传单 官方教程。

我编辑了我的 angular-cli.json 包含BeautyMarker.css和.js文件的文件,如下所示:

"styles": [
    "styles.css",
    "../node_modules/leaflet/dist/leaflet.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/beautifymarker/leaflet-beautify-marker-icon.css"
],
"scripts": [
    "../node_modules/leaflet/dist/leaflet.js",
    "../node_modules/beautifymarker/leaflet-beautify-marker-icon.js",
], ...

我还完全导入了包,因为它扩展了 L ,就像这样:

import * as L from 'leaflet';
import 'beautifymarker';

那不管用,所以我也试着:

import * as L from 'leaflet';
import '../../node_modules/beautifymarker/leaflet-beautify-marker-icon.js';

也试着完全忽略进口 heatmap.js 插件。这些都不允许我进入 L.BeautifyIcon .

有什么建议吗?

1 回复 | 直到 7 年前

1

4

kboul 7 年前

我花了点时间调查你的问题。

我所做的是:

已安装传单,@asymmetrik/ngx传单&@types/传单
安装了bootstrap,字体很棒,漂亮的marker&将它们添加到angular.json
重新启动服务器,因为监视程序仅用于src文件夹,而不观察angular-cli.json是否有更改,以使字体显示为awesome

角度.json

"styles": [
   "node_modules/leaflet/dist/leaflet.css",
   "node_modules/bootstrap/dist/css/bootstrap.css",
   "node_modules/font-awesome/css/font-awesome.css",
   "node_modules/beautifymarker/leaflet-beautify-marker-icon.css",
   "src/styles.css"
],
"scripts": [
    "node_modules/leaflet/dist/leaflet.js",
    "node_modules/beautifymarker/leaflet-beautify-marker-icon.js"
]

应用模块.ts

import { LeafletModule } from '@asymmetrik/ngx-leaflet';
..
imports: [
   ..,
   LeafletModule.forRoot()
],

应用组件

// import * as L from 'leaflet';
// import 'beautifymarker';

// instead of the above try
import 'leaflet';
import 'beautifymarker';
declare let L;

options = {
    layers: [
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18, attribution: '...' }
        )
    ],
    zoom: 12,
    center: L.latLng(46.879966, -121.726909)
};

beautifyOptions = {
    icon: 'plane',
    borderColor: '#8D208B',
    textColor: '#8D208B',
    backgroundColor: 'transparent'
};

layers = [
    L.marker([ 46.879966, -121.726909 ], {
        icon: L.BeautifyIcon.icon(this.beautifyOptions)
    })
];

模板

<div style="height: 500px;"
    leaflet 
    [leafletOptions]="options"
    [leafletLayers]="layers">
</div>

Demo