我在使用 angular 2 使用leaflet-markercluster 插件实现传单时遇到困难。我之前已经让它在 angularJS 中工作。我对 angular 还是很陌生，希望有人能帮助我理解出了什么问题。我假设与 L 的 javascript 命名空间冲突起主要作用，但我只是不知道如何纠正....
因此地图会显示，单个标记也会显示。但是，聚集标记根本没有出现。
一切都是使用 angular-cli 和 npm 设置的。我必须添加该let L = require('leaflet');行才能L.MarkerClusterGroup()在编译时不产生错误。
这是我正在使用的内容：
/// app.component.ts
import { Component, OnInit } from '@angular/core';
require('leaflet');
let L = require('leaflet');
require('leaflet-markercluster');
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
getRandomLatLng(map) {
const bounds = map.getBounds(),
southWest = bounds.getSouthWest(),
northEast = bounds.getNorthEast(),
lngSpan = northEast.lng - southWest.lng,
latSpan = northEast.lat - southWest.lat;
return new L.LatLng(
southWest.lat + latSpan * Math.random(),
southWest.lng + lngSpan * Math.random());
}
ngOnInit() {
const myIcon = L.icon({
iconUrl: 'assets/images/marker-icon.png',
shadowUrl: 'assets/images/marker-shadow.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
const mapid = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer (
'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
{ attribution: 'Test', maxZoom: 18}
).addTo(mapid);
let marker = L.marker([51.5, -0.09], {icon: myIcon}).addTo(mapid);
let markers: any;
markers = new L.MarkerClusterGroup();
markers.addLayer(L.marker(this.getRandomLatLng(mapid)), {icon: myIcon});
markers.addLayer(L.marker(this.getRandomLatLng(mapid), {icon: myIcon}));
markers.addLayer(L.marker([52.5, -0.09]), {icon: myIcon});
console.log(markers);
console.log(marker);
mapid.addLayerGroup(markers);
console.log(mapid);
mapid.setView([52.5, -0.09], 18);
}
}
包.json：
{
"name": "mc-test",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "^3.3.1",
"@types/leaflet": "^1.0.54",
"@types/leaflet-markercluster": "^1.0.0",
"core-js": "^2.4.1",
"geojson": "^0.4.1",
"leaflet": "^1.0.2",
"leaflet-markercluster": "^0.2.0",
"prunecluster": "^2.0.0-beta.3",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/compiler-cli": "^2.3.1",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.28.3",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "~2.0.3"
}
}
角-cli.json：
{
"project": {
"version": "1.0.0-beta.28.3",
"name": "mc-test"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
"styles.css",
"../node_modules/leaflet/dist/leaflet.css",
"../node_modules/leaflet-markercluster/MarkerCluster.css",
"../node_modules/leaflet-markercluster/MarkerCluster.Default.css"
],
"scripts": [
"../node_modules/leaflet/dist/leaflet.js",
"../node_modules/leaflet-markercluster/leaflet.markercluster-src.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"files": "src/**/*.ts",
"project": "src/tsconfig.json"
},
{
"files": "e2e/**/*.ts",
"project": "e2e/tsconfig.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}