我很难用带有角度2的传单标记集插件来实现传单。我之前已经让它在angularJS中工作了。我对角度很新,希望有人能帮助我理解出了什么问题。我假设javascript名称空间冲突与L扮演重要角色,但我只是不确定如何纠正....
因此地图会显示,单个标记也会显示。但是,聚集标记根本没有显示出来。
使用angular-cli和npm设置所有内容。我必须添加let L = require('leaflet');
行才能使L.MarkerClusterGroup()
不会在transile上产生错误。
以下是我正在使用的内容:
/// 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);
}
}
的package.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
}
}
}
答案 0 :(得分:1)
事实证明npm install leaflet leaflet-markercluster --save
没有提供功能代码集。从git安装每个v1.0.3:
npm install https://github.com/Leaflet/Leaflet.git#v1.0.3 --save
npm install https://github.com/Leaflet/Leaflet.markercluster.git#v1.0.3 --save
答案 1 :(得分:1)
我正在使用
"leaflet": "^1.3.1", "leaflet.markercluster": "^1.3.0"
和
"@types/leaflet": "^1.2.6", "@types/leaflet-markercluster": "^1.0.3"
以下对我有用:
import 'leaflet';
import 'leaflet.markercluster';
const L = window['L'];