如何将传单路由机包含到 Angular 2 typescript webpack 应用程序中答案

【问题标题】：How to include leaflet-routing-machine into angular 2 typescript webpack application如何将传单路由机包含到 Angular 2 typescript webpack 应用程序中
【发布时间】：2019-02-13 00:32:14
【问题描述】：

我使用这个种子开始使用 Angular 2 Typescript 和 Webpack：https://github.com/haoliangyu/angular2-leaflet-starter。

我对大多数使用的工具和技术（Angular 2、Typescript、Webpack）都很陌生。虽然我对这些了解得越来越多，但似乎我仍然没有掌握如何包含第三方非类型化 JS 库：

我想将leaflet-routing-machine.js 包含到我的项目中。据我所知，虽然传单确实存在分型，但传单路由机不存在分型。

我通过npm install 安装了包并添加了所需的quick-start code snipped 以显示路线。

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'.

据我了解，我不应该在 index.html 中包含 JS 文件，因为这应该由 webpack 自动完成。除了我通常不确定如何在没有打字的情况下包含第三方库（this 之类的答案没有帮助）这一事实之外，我的情况似乎有点不同，因为L 对象是标准传单并且不知道Routing 属性。我以某种方式理解，因为我看不到路由机器库如何扩展传单库。

有什么建议吗？

【问题讨论】：

标签： typescript angular leaflet webpack leaflet-routing-machine

【解决方案1】：

我没有使用过 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({ ... });

【讨论】：

没错，Typescript 对命名空间不满意。然而，这正是我一直在寻找的。为了避免编译时错误，我现在将 Routing 变量声明为 any：var Routing: any = require('leaflet-routing-machine');

【解决方案2】：

这一直是我挣扎了一段时间，但最终得到了它的工作。这是您导入它的方式：

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

我得到了很多关于这个问题的信息： How to import a module that extends another on the same namespace

【讨论】：