te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - How to use Leaflet Routing Machine with React-Leaflet 3? - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - How to use Leaflet Routing Machine with React-Leaflet 3? - Stack Overflow

    javascript - How to use Leaflet Routing Machine with React-Leaflet 3? - Stack Overflow

    programmeradmin3浏览0评论

    The old way of doing things in react-leaflet 2.8.0 was to use MapLayer and withLeaflet.

    But now in react-leaflet:

    MapLayer and withLeaflet are deprecated as of version 3.

    I'm trying to grasp the documentation for core:

    but the following doesn't work, I get

    The provided object is not a Layer.

    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 }]
        },
        show: false,
        addWaypoints: false,
        routeWhileDragging: true,
        draggableWaypoints: true,
        fitSelectedRoutes: true,
        showAlternatives: false
      }), )
      const container = context.layerContainer || context.map
      container.addLayer(routing)

      return () => {
        container.removeLayer(routing)
      }
    })
  return null;
}


function MapComponent() {

  return (
      <MapContainer center={[33.5024, 36.2988]} zoom={14} >
        <TileLayer url="/{z}/{x}/{y}.png?key=gR2UbhjBpXWL68Dc4a3f" />
        <Routing />
      </MapContainer>
    );
  }


export default MapComponent;

    The old way of doing things in react-leaflet 2.8.0 was to use MapLayer and withLeaflet.

    But now in react-leaflet:

    MapLayer and withLeaflet are deprecated as of version 3.

    I'm trying to grasp the documentation for core: https://react-leaflet.js/docs/core-introduction

    but the following doesn't work, I get

    The provided object is not a Layer.

    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 }]
        },
        show: false,
        addWaypoints: false,
        routeWhileDragging: true,
        draggableWaypoints: true,
        fitSelectedRoutes: true,
        showAlternatives: false
      }), )
      const container = context.layerContainer || context.map
      container.addLayer(routing)

      return () => {
        container.removeLayer(routing)
      }
    })
  return null;
}


function MapComponent() {

  return (
      <MapContainer center={[33.5024, 36.2988]} zoom={14} >
        <TileLayer url="https://api.maptiler./maps/ch-swisstopo-lbm-dark/256/{z}/{x}/{y}.png?key=gR2UbhjBpXWL68Dc4a3f" />
        <Routing />
      </MapContainer>
    );
  }


export default MapComponent;
    • javascript
    • reactjs
    • leaflet
    • react-leaflet
    • leaflet-routing-machine
    Share Improve this question asked May 23, 2021 at 9:46 lyslys 1,0273 gold badges14 silver badges36 bronze badges
    Add a ment  | 

    2 Answers 2

    Reset to default 13

    You're using createLayerComponent, but the routing machine is actually a control. Use createControlComponent.

    I also remend making this as a separate custom ponent, as described in the docs, rather than putting it in a useEffect. The docs are hard. Feel free to read How to extend TileLayer ponent in react-leaflet v3? to see if that helps in understanding how to make custom ponents with react-leaflet v3.

    Here's how you'd do it:

    import L from "leaflet";
import { createControlComponent } from "@react-leaflet/core";
import "leaflet-routing-machine";

const createRoutineMachineLayer = (props) => {
  const instance = L.Routing.control({
    waypoints: [
      L.latLng(33.52001088075479, 36.26829385757446),
      L.latLng(33.50546582848033, 36.29547681726967)
    ],
    ...otherOptions
  });

  return instance;
};

const RoutingMachine = createControlComponent(createRoutineMachineLayer);

export default RoutingMachine;

    Working Codesandbox

    // Basic leaflet Routing Machine Code //

    import React, { useEffect } from "react";
import { MapContainer, TileLayer, useMap } from "react-leaflet";
import "leaflet-routing-machine";
import L from "leaflet";
import "leaflet/dist/leaflet.css";

const Routing = ({ start, end }) => {
  const map = useMap();

  useEffect(() => {
    if (!map) return;

    // Create a routing control and add it to the map
    const routingControl = L.Routing.control({
      waypoints: [
        L.latLng(start.lat, start.lng),
        L.latLng(end.lat, end.lng),
      ],
      routeWhileDragging: true,
      lineOptions: {
        styles: [{ color: "#6FA1EC", weight: 4 }],
      },
    }).addTo(map);

    return () => {
      map.removeControl(routingControl);
    };
  }, [map, start, end]);

  return null;
};

const App = () => {
  const startPoint = { lat: 19.076, lng: 72.8777 }; // Example: Mumbai
  const endPoint = { lat: 18.5204, lng: 73.8567 }; // Example: Pune

  return (
    <MapContainer
      center={[19.076, 72.8777]}
      zoom={7}
      style={{ height: "100vh", width: "100%" }}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap/{z}/{x}/{y}.png"
        attribution="&copy; <a href='https://www.openstreetmap/copyright'>OpenStreetMap</a> contributors"
      />
      <Routing start={startPoint} end={endPoint} />
    </MapContainer>
  );
};

export default App;

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论