You need to enable JavaScript to run this app.
最新活动
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

L.Routing.controlonreact-leafletv3withhooks

  1. 首先,应该先安装插件react-leaflet和leaflet-routing-machine的依赖。

  2. 在App.js中使用useEffect钩子,引入leaflet-routing-machine,并创建路由控制器。

    import L from 'leaflet';
    import 'leaflet-routing-machine';
    import {useMap} from 'react-leaflet';
    import {useEffect, useRef} from 'react';
    
    function Routing({ map, waypoints }) {
       const routingRef = useRef(null);
    
       useEffect(() => {
          if (!routingRef.current) {
             routingRef.current = L.Routing.control({
                waypoints,
                show: false,
                router: L.Routing.osrmv1({ serviceUrl: 'http://router.project-osrm.org/route/v1' }),
             }).addTo(map.current.leafletElement);
          }
       }, [waypoints, map]);
    
       return null;
     }
    
     function App() {
        const mapRef = useRef(null);
    
       return (
         <div className="App">
            <MapContainer center={[51.505, -0.09]} zoom={13} whenCreated={(map) => { mapRef.current = map; }}>
              <Routing map={mapRef} waypoints={[L.latLng(51.5, -0.07), L.latLng(51.51, -0.09)]} />
            </MapContainer>
         </div>
       );
     }
    
    

    在上面的示例中,我们使用了useRef,以便在不重复渲染时保留L.Routing控件的引用。

  3. 在使用路由控制器对象时,可以通过操作路由控制器对象的show()和hide()方法来显示或隐藏路由。

function Routing({ map, waypoints, isVisible }) {
    const routingRef = useRef(null);

    useEffect(() => {
       if (!routingRef.current) {
          routingRef.current = L.Routing.control({
             waypoints,
             show: false,
             router: L.Routing.osrmv1({ serviceUrl: 'http://router.project-osrm.org/route/v1' }),
          }).addTo(map.current.leafletElement);
       }

       if (isVisible) {
          routingRef.current.show();
       } else {
          routingRef.current.hide();
       }
    }, [waypoints, map, isVisible]);

    return null;
  }

  function App() {
     const mapRef = useRef(null);
     const [isRoutingVisible, setIsRoutingVisible] = useState(false);

     return (
      <div className="App">
         <button onClick={() => setIsRoutingVisible(!isRoutingVisible)}>Toggle routing visibility</button>
         <
本文内容通过AI工具匹配关键字智能整合而成,仅供参考,火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见,您可以通过联系service@volcengine.com进行反馈,火山引擎收到您的反馈后将及时答复和处理。
展开更多
面向开发者的云福利中心,ECS9.9元起,域名1元起,助力开发者快速在云上构建应用

社区干货

特惠活动

域名注册服务

cn/top/com等热门域名,首年低至1元,邮箱建站必选
1.00/首年起32.00/首年起
立即购买

2核4G热门爆款云服务器

100%性能独享不限流量,学习测试、web前端、企业应用首选,每日花费低至0.24元
89.00/2380.22/年
立即抢购

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗,加速分发更实惠
2.00/20.00/年
立即购买

L.Routing.controlonreact-leafletv3withhooks -优选内容

L.Routing.controlonreact-leafletv3withhooks -相关内容

特惠活动

域名注册服务

cn/top/com等热门域名,首年低至1元,邮箱建站必选
1.00/首年起32.00/首年起
立即购买

2核4G热门爆款云服务器

100%性能独享不限流量,学习测试、web前端、企业应用首选,每日花费低至0.24元
89.00/2380.22/年
立即抢购

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗,加速分发更实惠
2.00/20.00/年
立即购买

产品体验

体验中心

幻兽帕鲁服务器搭建

云服务器
快速搭建幻兽帕鲁高性能服务器,拒绝卡顿,即可畅玩!
即刻畅玩

白皮书

一图详解大模型
浓缩大模型架构,厘清生产和应用链路关系
立即获取

最新活动

热门联机游戏服务器

低至22元/月,畅玩幻兽帕鲁和雾锁王国
立即部署

火山引擎·增长动力

助力企业快速增长
了解详情

数据智能VeDI

易用的高性能大数据产品家族
了解详情

一键开启云上增长新空间

立即咨询