Hur man inkluderar leaflet-routing-machine i en Angular 2 TypeScript Webpack-applikation

Jag använde detta startpaket för att komma igång med Angular 2 Typescript och Webpack: https://github.com/haoliangyu/angular2-leaflet-starter.

Jag är ny på de flesta av de använda verktygen och teknologierna (Angular 2, Typescript, Webpack). Medan jag förstår mer och mer om dessa verkar det som att jag fortfarande inte har förstått hur tredjepartsbibliotek i JS utan typning inkluderas:

Jag skulle vilja inkludera leaflet-routing-machine.js i mitt projekt. Såvitt jag vet, även om det finns typdefinitioner för leaflet, finns det inga typdefinitioner för leaflet-routing-machine.

Jag installerade paketet via npm install och lade till den nödvändiga snabbstartskoden för att visa en rutt.

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);

  }

}

Felet jag får på npm start är:

ERROR in ./app/services/map.service.ts
(56,11): error TS2339: Property 'Routing' does not exist on type 'typeof L'.

Såvitt jag förstår borde jag inte inkludera JS-filen i index.html eftersom detta ska göras automatiskt av webpack. Förutom det faktum att jag generellt sett är osäker på hur man inkluderar tredjepartsbibliotek utan typdefinitioner (svar som detta hjälpte inte) verkar mitt fall vara lite annorlunda eftersom L-objektet är standard i Leaflet och inte känner till Routing-egenskapen. Vilket jag på något sätt förstår, eftersom jag inte ser hur routing machine-biblioteket utökar Leaflet-biblioteket.

Några förslag?

Svar #1

Jag har varken arbetat med Angular 2 eller TypeScript, men jag misstänker att TypeScript inte gillar att LRM fäster sig vid L-objektet/namnrymden.

Observera att LRM också exporterar sig själv som en vanlig CommonJS-modul, så du kan göra något liknande istället för att använda L.Routing.Control:

var L = require('leaflet');
var Routing = require('leaflet-routing-machine');

var map = L.map(...);
var routingControl = Routing.control({ ... });

Svar #2

Detta har varit något som jag har kämpat med ett tag men äntligen fick det att fungera. Så här importerar du det:

importera * som L från 'leaflet'; importera 'leaflet-routing-machine';

Och i din systemjs.config

   map: {
    'leaflet': 'npm:leaflet/dist/leaflet.js',
}
     packages: {
           leaflet: {
              defaultExtension: 'js'
              }
            }

För att ställa in rutten i komponenten, se till att du lägger till rutten på kartan istället för på kakel-lagret.

    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);}

Jag fick mycket av informationen för detta från denna fråga: Hur man importerar ett modul som utökar ett annat i samma namnrymd

Relaterade artiklar