如何在 react-leaflet 中使用 leaflet.bezier 插件？

Question

我想使用一个名为 leaflet-geotiff (https://github.com/lifeeka/leaflet.bezier) 的传单插件，但我使用的是传单 React。我可以将此插件转换为 leaflet-react 版本吗？

Answer 1

安装并导入 leaflet.bezier & snapsvg 这是第一个的依赖项：

import "snapsvg";
import "leaflet.bezier";

使用本机传单代码创建自定义 react-leaflet 组件，将其放置在组件安装的位置。同样使用导入的平面图像来重现示例演示：

function LeafletBezier() {
  const { map } = useLeaflet();

  useEffect(() => {
    const dash_straight = {
      color: "rgb(145, 146, 150)",
      fillColor: "rgb(145, 146, 150)",
      dashArray: 8,
      opacity: 0.8,
      weight: "1",
      iconTravelLength: 1,
      iconMaxWidth: 50,
      iconMaxHeight: 50,
      fullAnimatedTime: 7000,
      easeOutPiece: 4,
      easeOutTime: 2500
    };

    L.bezier(
      {
        path: [
          [
            { lat: 7.8731, lng: 80.7718, slide: "RIGHT_ROUND" }, //Sri Lanka
            { lat: -25.2744, lng: 133.7751, slide: "LEFT_ROUND" }, //Australia
            { lat: 36.2048, lng: 138.2529 } //Japan
          ],
          [
            { lat: 7.8731, lng: 80.7718, slide: "RIGHT_ROUND" }, //Sri Lanka
            { lat: 3.139, lng: 101.6869 }
          ],
          [
            { lat: 7.8731, lng: 80.7718, slide: "RIGHT_ROUND", deep: "8" }, //Sri Lanka
            { lat: 41.8719, lng: 12.5674 }
          ],
          [
            { lat: -25.2744, lng: 133.7751 }, //Australia
            { lat: -40.9006, lng: 174.886 } //Japan
          ],
          [
            { lat: 7.8731, lng: 80.7718, slide: "RIGHT_ROUND" },
            { lat: -18.7669, lng: 46.8691 }
          ]
        ],
        icon: {
          path: plane
        }
      },
      dash_straight
    ).addTo(map);
  }, []);

  return null;
}

在react-leaflet的<Map />中使用它：

<Map ...> 
  <LeafletBezier />
</Map>

Demo

编辑

使用 snapsvg 库一段时间后出现错误

eve is not defined

所以使用 snapsvg-cjs 库代替 npm i snapsvg-cjs

并使用

导入

import Snap from "snapsvg-cjs";

如何在 react-leaflet 中使用 leaflet.bezier 插件？

How to use leaflet.bezier plugin in react-leaflet?

leaflet

reactjs

react-redux

react-leaflet