Как включить листовку-машину маршрутизации в угловое приложение для веб-пакетов 2 typcript

Я использовал это семя, чтобы начать работу с Angular 2 Typescript и Webpack: https://github.com/haoliangyu/angular2-leaflet-starter.

Я новичок в большинстве используемых инструментов и технологий (Angular 2, Typescript, Webpack). Хотя я все больше и больше понимаю об этом, мне кажется, что я до сих пор не понял, как включены сторонние нетипизированные JS-библиотеки:

Я хотел бы включить в свой проект leaflet-routing-machine.js. Насколько мне известно, хотя существуют листовки для листовки, не существует типографики для листовки-машины маршрутизации.

Я установил пакет через npm install и добавили необходимый код быстрого запуска, отсекаемый для отображения маршрута.

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

  }

}

Ошибка, которую я получаю npm start является:

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

Насколько я понимаю, я не должен включать файл JS в index.html, так как это должно автоматически выполняться веб-пакетом. Наряду с тем, что я обычно не уверен, как включать сторонние библиотеки без ввода (подобные ответы не помогли), мне кажется, что мой случай немного отличается, потому что L Объект является стандартной листовкой и не знает Routing имущество. Что я как-то понимаю, так как не понимаю, как библиотека машин маршрутизации расширяет библиотеку листовок.

Какие-либо предложения?

Источник

2 ответа

Решение

Я не работал ни с Angular 2, ни с TypeScript, но подозреваю, что TypeScript не нравится, что LRM присоединяется к L объект / пространство имен.

Обратите внимание, что LRM также экспортирует себя как обычный модуль CommonJS, так что вы можете сделать что-то подобное вместо использования L.Routing.Control:

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

var map = L.map(...);
var routingControl = Routing.control({ ... });
Источник

Это было кое-чем, с чем я боролся некоторое время, но наконец заставил это работать. Вот как вы импортируете это:

import * as L from 'leaflet'; import 'leaflet-routing-machine';

И в твоей systemjs.config

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

Чтобы настроить маршрутизацию в компоненте, убедитесь, что вы добавляете маршрутизацию на карту вместо слоя листов.

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

Я получил много информации для этого по этому вопросу: Как импортировать модуль, который расширяет другой в том же пространстве имен

Источник
Другие вопросы по тегам