我是Angular2的新手。用Cli建造。虽然我能够在没有任何Angular2指令的情况下将Leaflet导入到这个Angular2项目中。我想对Leaflet Draw扩展做同样的事情。我无法让Draw工作。基本上,我想导入一个扩展另一个模块的模块。在这种情况下的传单。没有人知道怎么做吗?
这是我的package.json
{
"name": "amscm-web",
"version": "2.0.31c",
"license": "",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "^4.2.3",
"@angular/compiler": "^4.2.3",
"@angular/core": "^4.2.3",
"@angular/forms": "^4.2.3",
"@angular/http": "^4.2.3",
"@angular/platform-browser": "^4.2.3",
"@angular/platform-browser-dynamic": "^4.2.3",
"@angular/router": "^4.2.3",
"@asymmetrik/angular2-leaflet": "^2.1.5",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26",
"@qontu/ngx-inline-editor": "^0.2.0-alpha.4",
"@types/leaflet-draw": "^0.4.5",
"angular-oauth2-oidc": "^1.0.20",
"angular-sortablejs": "^2.0.6",
"angular2-uuid": "^1.1.1",
"core-js": "^2.4.1",
"karma-chrome-launcher": "^2.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"leaflet": "^1.0.3",
"leaflet-draw": "^0.4.9",
"ng-select": "^1.0.0-beta.5",
"ng2-dnd": "^4.2.0",
"rxjs": "^5.4.1",
"sortablejs": "^1.6.0",
"ts-helpers": "^1.1.1",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.4.5",
"zone.js": "^0.8.12"
},
"devDependencies": {
"@angular/cli": "^1.1.2",
"@angular/compiler-cli": "^4.2.3",
"@types/gapi": "0.0.33",
"@types/gapi.auth2": "0.0.39",
"@types/jasmine": "2.5.53",
"@types/leaflet": "^1.0.63",
"@types/node": "^8.0.3",
"codelyzer": "~3.1.1",
"jasmine-core": "2.6.4",
"jasmine-spec-reporter": "4.1.1",
"karma": "1.7.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-coverage-istanbul-reporter": "^1.3.0",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.6.0",
"protractor": "~5.1.2",
"ts-node": "3.1.0",
"tslint": "^5.4.3",
"typescript": "latest",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
}
}
这里也是我的map.model.ts
import * as L from 'leaflet';
import 'leaflet.draw'
export class LeafletMapModel {
constructor(
public baseLayers: {
id: string,
name: string,
enabled: boolean,
layer: L.Layer
}[],
public baseLayer: string,
public overlayLayers: {
id: string,
name: string,
enabled: boolean,
layer: L.Layer
}[] = []
) { }
}
答案 0 :(得分:1)
以下方法对我很有用:
npm install leaflet@latest --save
并在Angular组件中:
import * as L from 'leaflet';
...
@ViewChild('map') mapElement;
ngOnInit() {
const myMap = this.mapElement.nativeElement;
const map = L.map(myMap).setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
}
答案 1 :(得分:0)
这对我有用:
import { Component } from '@angular/core';
import { Leaflet } from 'leaflet';
import { Draw } from 'leaflet-draw';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
_layer = Leaflet.layer;
_draw = Draw.drawLocal;
}