使用 react-leaflet-editable 和 react-leaflet 2.8.0答案

【问题标题】：using react-leaflet-editable with react-leaflet 2.8.0使用 react-leaflet-editable 和 react-leaflet 2.8.0
【发布时间】：2021-05-10 20:37:43
【问题描述】：

我正在将react-leaflet-editable 集成/包含到我现有的项目中，该项目100% 依赖于react-leaflet v2.8.0。我目前无法升级，因为它需要对整个项目进行太多更改。我们目前买不起的东西。（当一个人可以改变所有人时，为什么要为一个人改变一切。是的，我们可能有一天会这样做，但不是现在）

所以这是下面的代码。它与react-leaflet v.3.x 完美配合，但当我切换到“2.8.0 版”时，它就可以正常工作了。

我尝试过的； Map 在3.x 中重命名为MapContainer，所以我更改了它，但问题随后变成了whenCreated={setMap} 参数。我需要一种方法将其链接到ReactLeafletEditable。或者至少我认为这是问题所在。

我希望我已经解释清楚了。代码和链接如下。

import React, { useRef } from "react";
import L, { Icon } from "leaflet";
import "leaflet-editable";
import ReactLeafletEditable from "react-leaflet-editable";
import {
  MapContainer,
  TileLayer,
  LayersControl,
  LayerGroup
} from "react-leaflet";
import "leaflet/dist/leaflet.css";

function Demo() {
  const editRef = useRef();
  const [map, setMap] = React.useState();

  const editPolygon = () => {
    editRef.current.startPolygon();
  };

  return (
    <ReactLeafletEditable ref={editRef} map={map}>
      <button onClick={editPolygon} className="editable-btn">
        Create Polygon
      </button>
      <MapContainer
        style={{
          height: "700px",
          backgroundColor: "",
          flexGrow: "1",
          cursor: `10`
        }}
        editable={true}
        zoom={4}
        maxZoom={18}
        center={[35, 105]}
        whenCreated={setMap}
      >
        <LayerGroup>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <TileLayer url="http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png" />
        </LayerGroup>
      </MapContainer>
    </ReactLeafletEditable>
  );
}

export default Demo;

3.0 中的项目链接：https://codesandbox.io/s/react-leaflet-editable-z7tnq?file=/src/App.js

链接到react-leaflet-editable：https://www.npmjs.com/package/react-leaflet-editable

PS：您可以将侧面的react-leaflet 版本切换到2.8.0 看看行为。

感谢大家的支持

【问题讨论】：

标签： reactjs leaflet react-leaflet react-leaflet-v3

【解决方案1】：

在 react-leaflet v.2.x 中使用 ref 和 useEffect 来获取地图实例。通过这种方式，您可以模仿 whenCreated 在版本 3.x 中所做的事情

const [map, setMap] = React.useState();
const mapRef = useRef();

useEffect(() => {
    if (!mapRef.current) return;

    setMap(mapRef.current.leafletElement);
  }, []);


<ReactLeafletEditable ref={editRef} map={map}>
  <button onClick={editPolygon} className="editable-btn">
    Create Polygon
  </button>
  <Map
   style={{
   height: "700px",
       backgroundColor: "",
       flexGrow: "1",
       cursor: `10`
   }}
   ref={mapRef}
 ...

Demo

【讨论】：