Question

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

我一直跟随install instructions for BeautifyMarker和ngx-leaflet plugin instructions并没有走运。

我使用npm install来获取BeautifyMarker，Font Awesome，并且已经安装了Bootstrap。根据{{1}}官方教程，传单也已经添加并正确配置。

我编辑了ngx-leaflet文件，以包含BeautyMarker .css和.js文件，如下所示：

angular-cli.json

随着软件包"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", ], ...的扩展，我也完全导入了该软件包，如下所示：

那没有用，所以我也尝试了：

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

也尝试完全忽略导入，例如import * as L from 'leaflet'; import '../../node_modules/beautifymarker/leaflet-beautify-marker-icon.js';插件。这些都不允许我访问heatmap.js。

有什么提示吗？

Answer 1

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

我所做的是：

已安装的传单@ asymmetrik / ngx-leaflet和@ types / leaflet
已安装引导程序，超棒的字体，beautifymarker，并将其添加到angular.json
重新启动服务器，因为观察者仅用于src文件夹，并且未观察到angular-cli.json来更改呈现真棒字体的更改

angular.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"
]

app.module.ts

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

app.component.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>

Demo

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

1 个答案: