我不太了解如何将LRM导入ts文件。通过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
这是我的离子信息:
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
顺便说一句,我对传单本身没有任何问题。
我们通过在声明组件之前添加以下行来解决此问题。
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对象添加属性的问题,但在我们的例子中,声明L类型为any足以使其工作。
不确定Leaflet Routing Machine插件是否直接导出自己。
通常它至少应该附加到L
全局命名空间的副作用。
在调用require('leaflet-routing-machine')
后,你试过用L.routing.control
实例化一个控件吗? (注意起始L
)
好。如何使用它!
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)添加标签以查看html
在Ionic 4中,试一试。
1)asl和传单。
2)npm i leaflet-routing-machine。
3)在“index.html”中导入js和css。
<!-- Leaflet CDN JS and Css-->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
<!-- Leaflet Machine. path: 'node_modules/leaflet-routing-machine/dist/leaflet-routing-machine.js' the same to css-->
<link rel="stylesheet" href="./assets/css/leaflet-routing-machine.css">
<script src="./assets/js/leaflet-routing-machine.js"></script>
4)在your_component.ts中
import Leaflet from 'leaflet';
import 'leaflet-routing-machine';
// Add this line to remove typescript errors
declare var L: any;
export class FullScreenMapPage implements OnInit {
// mapa
mapa: any;
ionViewDidEnter() {
this.drawMap();
}
drawMap(): void {
// marcador del mapa
const markerGroup = Leaflet.featureGroup();
const marker = Leaflet.marker([lat, lng]);
this.mapa = Leaflet.map('map').setView([lat, lng], 11);
Leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© Open Street Map',
zoom: 8,
maxZoom: 18,
minZoom: 4,
minResolution: 4891.96981025128,
maxResolution: 39135.75848201024,
doubleClickZoom: true,
center: [lat, lng]
}).addTo(this.mapa);
Leaflet.Routing.control({
waypoints: [
Leaflet.latLng(PointA_lat, PointB_lng),
Leaflet.latLng(PointB_lat, PointB_lng)
], routeWhileDragging: true
}).addTo(this.mapa);
}
}