将 BeautifyMarker 插件添加到 ngx-leaflet 项目

Question

我目前无法将 BeautifyMarker 插件与ngx-leafletAngular 2 包集成。

我按照BeautifyMarker 的安装说明以及ngx-leaflet 插件说明进行操作，但没有成功。

我曾经npm install使用 BeautifyMarker、Font Awesome，并且已经安装了 Bootstrap。Leaflet 也已经按照ngx-leaflet官方教程添加并正确配置。

我编辑了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。

有小费吗？

Answer 1

我花了一些时间来调查你的问题。

我所做的是：

1. 安装传单，@asymmetrik/ngx-leaflet 和 @types/leaflet
2. 安装了 bootstrap、font-awesome、beautifymarker 并将它们添加到 angular.json
3. 重新启动服务器，因为观察者仅针对 src 文件夹，并且未观察到 angular-cli.json 的更改以呈现 font-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()
],

应用程序组件.ts

// 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>

演示