角度2のリーフレット - マーマークラスター

Question

角度2を使用したリーフレット - マーマークラスタープラグインでリーフレットを実装するのが難しいです。以前はangularJSで動作するようになっていました。何が間違っているのか理解する助けとなります。私はjavascriptの名前空間のLとの競合が大きな役割を果たすと仮定していますが、修正する方法がわかりません。

したがって、マップは単一のマーカーを表示します。ただし、クラスタ化されたマーカーはまったく表示されません。

すべては、angular-cliとnpmを使用して設定されています。私はL.MarkerClusterGroup()を得るためにlet L = require('leaflet');行を追加しなければなりません。ここで

は、私が働いているものです：

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

Answer 1

それはnpm install leaflet leaflet-markercluster --saveがないことが判明します機能コードセットを提供しない。ダッシュ（[ `リーフレット-markercluster`]実際

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