如何将leaflet-routing-machine导入到Ionic2工程中？

Question

我不太明白如何将LRM导入到ts文件中。在安装via npm install leaflet-routing-machine之后，我这样定义了路由：

var Routing = require('leaflet-routing-machine');
var newRoute = Routing.control({Options});

这对我没有帮助，我得到了：

Error caused by: Routing.control is not a function

以下是我的Ionic信息：

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.0
Node Version: v6.3.1

顺便说一句，我对宣传单本身没有任何问题。

Answer 1

我们通过在声明组件之前添加以下行解决了这个问题。

declare var L: any;

myclass.component.ts

import { Component, OnInit } from '@angular/core';
...

// Leaflet and Leaflet Routing Machine have been installed with npm
import 'leaflet-routing-machine';
import 'leaflet-easybutton';

// Add this line to remove typescript errors
declare var L: any;

@Component({
  ...
})
export class MyClass extends OnInit {
  ...

  constructor(...) {
    ...
  }

  ngOnInit() {

    ...

    // The example snippet is now working
    L.Routing.control({
      waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
      ]
    }).addTo(myMap);

    ...

  }

  ...

}

正如在this post中提到的，typescript似乎在向Leaflet的全局L对象中添加属性时出现了问题，但在我们的示例中，声明类型为any的L就足以使其工作。

Answer 2

不确定Leaflet Routing Machine插件是否直接导出自身。

通常，它至少应该有附加到L全局名称空间的副作用。

在调用require('leaflet-routing-machine')之后，您是否尝试过使用L.routing.control实例化控件？(注意启动L)

Answer 3

好的。如何使用它！

1) npm i leaflet-routing-machine https://www.npmjs.com/package/leaflet-routing-machine

2) npm i leaflet-easybutton https://www.npmjs.com/package/leaflet-easybutton

3)在工作页面导入模块：

import leaflet from 'leaflet'; 
import 'leaflet-routing-machine'; 
import 'leaflet-easybutton';

4)声明L declare var L:any;

添加代码内容

var maptt = leaflet.map('mapId2');
leaflet.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
    attribution: '©suwitbb' 
}).addTo(maptt);

leaflet.Routing.control({ 
    waypoints: [ 
        leaflet.latLng(57.74, 11.94), 
        leaflet.latLng(57.6792, 11.949) 
    ], routeWhileDragging: true 
}).addTo(maptt);

6)给view html添加标签