问题
I used this seed to get started with Angular 2 Typescript and Webpack: https://github.com/haoliangyu/angular2-leaflet-starter.
I'm new to most of the used tools and technologies (Angular 2, Typescript, Webpack). While I understand more and more about these it seems that I still haven't grasped how third-party non-typed JS-libraries are included:
I would like to include the leaflet-routing-machine.js into my project. To my knowledge, while there do exist typings for leaflet, there do not exist typings for leaflet-routing-machine.
I installed the package via npm install
and added the required quick-start code snipped to display a route.
map.service.ts
/// <reference path="../../typings/leaflet/leaflet.d.ts"/>
import {Injectable} from 'angular2/core';
import {Map} from 'leaflet';
Injectable()
export class MapService {
map: Map; // holds reference to the normal leaflet map object
showRoute(){
L.Routing.control({
waypoints: [
L.latLng(47.569198, 7.5874886),
L.latLng(47.5685418, 7.5886755)
]
}).addTo(this.map);
}
}
The error I get on npm start
is:
ERROR in ./app/services/map.service.ts
(56,11): error TS2339: Property 'Routing' does not exist on type 'typeof L'.
As I understand it I shouldn't include the JS file in the index.html as this should be automatically done by webpack. Next to the fact that I'm generally unsure how to include third-party libraries without typings (answers like this did not help) it seems my case is a bit different because the L
Object is standard leaflet and does not know the Routing
property. Which I somehow understand, since I don't see how the routing machine library extends the leaflet library.
Any suggestions?
回答1:
I haven't worked with either Angular 2, nor TypeScript, but I suspect that TypeScript doesn't like that LRM attaches itself to the L
object/namespace.
Note that LRM also exports itself as a normal CommonJS module, so you can do something like this instead of using L.Routing.Control
:
var L = require('leaflet');
var Routing = require('leaflet-routing-machine');
var map = L.map(...);
var routingControl = Routing.control({ ... });
回答2:
This has been something that I struggled with for a while but finally got it working. This is how you import it:
import * as L from 'leaflet';
import 'leaflet-routing-machine';
And in your systemjs.config
map: {
'leaflet': 'npm:leaflet/dist/leaflet.js',
}
packages: {
leaflet: {
defaultExtension: 'js'
}
}
To set up the routing in the component, make sure you are adding the routing to the map instead of the tile layer.
ngAfterViewInit() {
var map = new L.Map("map")
let openmap = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> ',
}).addTo(map);
let route = L.Routing.control({
waypoints: [
L.latLng(40.5663651,-75.6032277),
L.latLng(40.00195, -76.073299),
L.latLng(42.3673945,-83.0750408)
]
}).addTo(map);}
I got a lot of the information for this on this question: How to import a module that extends another on the same namespace
来源:https://stackoverflow.com/questions/37614323/how-to-include-leaflet-routing-machine-into-angular-2-typescript-webpack-applica