标签: leaflet-routing-machine

在 React-Leaflet 2.8.0 中，旧的处理方式是使用MapLayer和withLeaflet。

但现在在反应传单中：

MapLayerwithLeaflet从版本 3 开始已弃用。

我试图掌握核心文档：https ://react-leaflet.js.org/docs/core-introduction

但以下不起作用，我明白了

提供的对象不是图层。

import React, { Component, useEffect } from "react";
import { useLeafletContext, leafletElement, createLayerComponent } from '@react-leaflet/core'
import { MapContainer, TileLayer, useMap } from "react-leaflet";
import Leaflet from "leaflet";
import "leaflet-routing-machine";

function Routing(props) {
    const context = useLeafletContext();
    useEffect(() => 
    {
      let routing = createLayerComponent(Leaflet.Routing.control(
      {
        waypoints: [
          Leaflet.latLng(33.52001088075479, 36.26829385757446),
          Leaflet.latLng(33.50546582848033, 36.29547681726967)
        ],
        lineOptions: {
          styles: [{ color: "#6FA1EC", weight: 4 }] …

我用这个种子开始使用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'.

据我了解,我不应该在index.html中包含JS文件,因为这应该由webpack自动完成.接下来的事实,我通常不知道该如何包括但分型(答案像第三方库 …

我在开车时有一些 GPS 生成的数据。

var routeArr = [{lng1, lat1}, {lng2,lat2}, {lng3, lat3}.....];

我想将生成的数据显示为在 Leaflet 支持的 Openstreet 地图上实际行驶的路线。我天真的方法是显示连接所有点的折线。但我想展示驾驶时遵循的实际路线。我可以使用OSRM-Backend API和 leaflet-routing-machine 插件来实现此目的吗？任何帮助都感激不尽。

在这里，我正在绘制路线并使用 Leaflet Routing Machine Leaflet Routing Machine为路线分配停靠点

var control = L.Routing.control(L.extend(window.lrmConfig, {
    waypoints: [array object of stops],
    geocoder: L.Control.Geocoder.nominatim(),
    routeWhileDragging: true,
    reverseWaypoints: true,
    showAlternatives: true,
    altLineOptions: {
        styles: [
            {color: 'black', opacity: 0.15, weight: 9},
            {color: 'white', opacity: 0.8, weight: 6},
            {color: 'blue', opacity: 0.5, weight: 2}
        ]
    }
})).addTo(map);

在航点对象数组中，我绑定了自定义标记，例如：

L.marker([item.latLng.lat, item.latLng.lng], {icon: stopIcon}).addTo(map).bindPopup(item.name);

但是我得到了 2 个标记，1 是默认值，第二是我的自定义图标。您可以在我的屏幕截图中看到默认（蓝色标记）和自定义图标（停止图像）

所以我想用我的自定义替换默认（蓝色标记）并删除默认标记。谢谢。

我正在传单地图上绘制路线，效果很好，并且在控件中显示了距离和预计到达时间。有没有办法提取它们并保存它们？

L.Routing.control 的代码

function getroute() {
myroutewithout = L.Routing.control({
  waypoints: [
    L.latLng(window.my_lat, window.my_lng),
    L.latLng(window.job_p_lat, window.job_p_lng)
  ],show: true, units: 'imperial',
 router: L.Routing.mapbox('API-KEY-HERE'),
  createMarker: function(i, wp, nWps) {
    if (i === 0 || i === nWps + 1) {
      // here change the starting and ending icons
      return mymarker = L.marker(wp.latLng, {
        icon: operatoricon
      });
    } else {
      return job_start = L.marker(wp.latLng, {
        icon: jobicon
      }); 
    }
  }
}).addTo(map);

嗨，我正在尝试使用传单添加自定义标记并使用 Routing.control 绘制路线。我需要向标记添加一个变量，因为我需要不时更新标记位置之一。我只会有 3 个标记或航点，一个起点，一个第二个和第三个。我可能只需要移动开始标记。

添加绘制路线并添加默认标记的路线的代码是

var route = L.Routing.control({
     waypoints: [
    L.latLng(my_lat, my_lng),
    L.latLng(job_p_lat, job_p_lng),
    L.latLng(job_d_lat, job_d_lng)
 ],show: false, units: 'imperial',
 router: L.Routing.mapbox('API KEY HERE')
}).addTo(map);

我已经尝试了一些不值得展示的东西，完全没有。任何建议都会很棒，谢谢