标签: react-leaflet-v3

我已经使用react-leaflet有一段时间了，几周后我删除了node_modules内的文件并重新安装了它们，我根本没有触及react-leaflet版本，但是当我尝试运行该项目时，它给了我一个错误。

./node_modules/@react-leaflet/core/esm/path.js 10:41 模块解析失败：意外的标记 (10:41) 文件已使用这些加载器处理：

• ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js 您可能需要一个额外的加载器来处理这些加载器的结果。| useEffect(function updatePathOptions() { | if (props.pathOptions !== optionsRef.current) {

  const options = props.pathOptions ?? {};

Run Code Online (Sandbox Code Playgroud)

| element.instance.setStyle(选项); | optionsRef.current = 选项；

我试图用传单标记方法绘制大约 50K 点，但由于渲染时间和所需的内存而无法实现。我看到的新方法是使用 Leaflet-canvas 在屏幕上绘制点（而不是在 DOM 中）。我如何在 React leaflet 3.X 中执行此操作。我尝试了 https://www.npmjs.com/package/react-leaflet-canvas-markers 但它不支持传单的V3。

有什么建议吗？

背景

对于React Leaflet v2，有一个NPM插件react-leaflet-control，它允许您创建任何类型的控件并将其放入react-leaflet控件容器中。显然，随着 RL-v3 的引入，随着 API 的更改，这在 v3 中不再适用。我想创建一个自定义控件包装器，以允许我在其中放置任何类型的 React Node。

当前状态

我目前拥有的代码可以工作......但不能。我从 Stack Overflow 帖子中的示例中提取了内容：React Leaflet V3 Custom Control，它让我获得了创建自定义控件的 99% 解决方案。但是，我的用例是地图上的工具栏，其中包含可交互的按钮（颜色用于指定活动工具）。然而，通过这段代码，我拥有了该功能，但由于每次渲染都会导致创建一个新控件，因此工具提示会在失去其锚元素时闪烁。

期望的行为

我想要一个工具栏，允许用户选择工具在地图上执行操作（想想老式的）leaflet-draw。为了提供反馈，我希望按钮在工具处于活动状态时改变颜色，对于用户体验，我想要工具提示来描述操作按钮的。

实际行为

工具栏存在，用户可以选择工具并且有 UI 反馈，但是，当选择工具时在每个渲染上删除并重新添加控件时，工具提示会丢失其锚元素。

代码沙箱

https://codesandbox.io/s/react-leaflet-custom-control-n1xpv

遵循高级组件工厂的官方参考来更新控制组件的道具

核心 API 导出可以以类似方式使用的其他高级组件工厂。

我模仿了这个例子 - 但我收到以下语法错误：

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

function setWaypoints(props)
{
    return { 
        waypoints: [
        L.latLng(props.startLat, props.startLng),
        L.latLng(props.endLat, props.endLng)
        ],
        lineOptions: {
            styles: [{ color: "#0500EE", weight: 4 }]
        },
        show: false,
        addWaypoints: false,
        routeWhileDragging: true,
        draggableWaypoints: true,
        fitSelectedRoutes: true,
        showAlternatives: false,
        createMarker: function() { return null; },

    }
}


function createRoutingMachine(props, context) 
{
    const instance =  new L.Routing.control(setWaypoints(props))
    return 
    { 
        instance, context: { ...context, …