如何在 react-leaflet v3 中绘制形状答案

【问题标题】：how to draw shapes in react-leaflet v3如何在 react-leaflet v3 中绘制形状
【发布时间】：2021-03-11 10:28:17
【问题描述】：

您对在 react-leafletV3 中实现绘图功能有任何想法吗？我添加了一个事件侦听器，但它无法正常工作并对任何内容做出反应。

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

    map.addEventListener("mousemove", function (event) {
      setCoords({ lat: event.latlng.lat, lng: event.latlng.lng });
    });

    map.on("draw:drawstart", function (event) {
      console.log("event here", event);
    });

    const drawControl = new L.Control.Draw({
      position: "topleft",
    });
    drawControl.addTo(map);

    const leftLayer = L.tileLayer(
      layers[leftLayerIndex].url,
      layerOptions
    ).addTo(map);

    const rightLayer = L.tileLayer(
      layers[rightLayerIndex].url,
      layerOptions
    ).addTo(map);

    const sbs = L.control.sideBySide(leftLayer, rightLayer).addTo(map);
    setSideBySide(sbs);
  }, [map]);

  useEffect(() => {
    if (sideBySide) {
      sideBySide.setLeftLayers(
        L.tileLayer(layers[leftLayerIndex].url, layerOptions).addTo(map)
      );
    }
  }, [leftLayerIndex, rightLayerIndex, sideBySide]);

【问题讨论】：

您能否提供一个代码框来展示您遇到的问题？由于您提供的代码没有任何明显的问题，因此会更容易提供帮助。
我找到了添加侦听器以绘制插件的解决方案，但还有另一个问题，我不清楚图标没有在那里呈现。 this codeSandBox 是我的问题的示例代码
我会修改您的问题以反映您所问内容的变化。我看到您可以开始绘图，但是在完成绘图后，它就消失了。您还需要有一个editable:drawing:end 的事件来捕获完成的形状并将其添加到地图中

标签： leaflet react-leaflet leaflet-draw react-leaflet-draw

【解决方案1】：

这是对我有用的代码。我添加了一个事件侦听器来侦听创建的图层，并在创建图层后添加了要素组图层。我已经提到这部分是必需的，因为我已经在选项对象中评论过。

      edit: {
        featureGroup: editableLayers, //REQUIRED!!
      }


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

    map.addEventListener("mousemove", function (event) {
      setCoords({ lat: event.latlng.lat, lng: event.latlng.lng });
    });

    const editableLayers = new L.FeatureGroup();
    map.addLayer(editableLayers);

    const options = {
      position: "topleft",
      draw: {
        polyline: false,
        polygon: false,
        rectangle: {
          shapeOptions: {
            clickable: false,
            color: "dodgerblue",
          },
        },
      },
      edit: {
        featureGroup: editableLayers, //REQUIRED!!
      },
    };

    const drawControl = new L.Control.Draw(options);
    map.addControl(drawControl);

    map.on(L.Draw.Event.CREATED, function (e) {
      var type = e.layerType,
        layer = e.layer;

      if (type === "marker") {
        layer.bindPopup("A popup!");
      }

      editableLayers.addLayer(layer);
    });

    const leftLayer = L.tileLayer(
      layers[leftLayerIndex].url,
      layerOptions
    ).addTo(map);

    const rightLayer = L.tileLayer(
      layers[rightLayerIndex].url,
      layerOptions
    ).addTo(map);

    const sbs = L.control.sideBySide(leftLayer, rightLayer).addTo(map);
    setSideBySide(sbs);
  }, [map]);

【讨论】：

谢谢，这对我帮助很大。出色的解决方案