React Leaflet多边形绘制本地异常：编辑按钮无法显示

我开发了一个基于Leaflet的多边形绘制组件，用于保存绘制的坐标。该组件在CodeSandbox中可正常运行，能显示多边形绘制所需的编辑按钮，但在本地环境中，地图右上角蓝色区域的必要编辑按钮无法显示，功能不符合预期。

组件代码（Polygonmap.tsx） #

import { MapContainer, TileLayer, Polygon, FeatureGroup } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';
import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';
import { useRef, useState } from 'react';

const PolygonMap = () => {
  const mapRef = useRef();
  const center = [51.505, -0.09];
  const [mapLayers, setMapLayers] = useState<any>([]);

  const _onCreate = (e: any) => {
    console.log(e);
    const { layerType, layer } = e;
    if (layerType === 'polygon') {
      const { _leaflet_id } = layer;

      setMapLayers((layers: any) => [
        ...layers,
        { id: _leaflet_id, latlngs: layer.getLatLngs()[0] },
      ]);
    }
    console.log(mapLayers);
  };

  const _onEdited = (e: any) => {
    console.log(e);
    const {
      layers: { _layers },
    } = e;

    Object.values(_layers).map(({ _leaflet_id, editing }: any) => {
      setMapLayers((layers: any) =>
        layers.map((l: any) =>
          l.id === _leaflet_id
            ? { ...l, latlngs: { ...editing.latlngs[0] } }
            : l
        )
      );
    });
    console.log(mapLayers);
  };

  const _onDeleted = (e: any) => {
    console.log(e);
    const {
      layers: { _layers },
    } = e;

    Object.values(_layers).map(({ _leaflet_id }: any) => {
      setMapLayers((layers: any) =>
        layers.filter((l: any) => l.id !== _leaflet_id)
      );
    });
    console.log(mapLayers);
  };
  return (
    <>
      <MapContainer
        center={center}
        zoom={13}
        scrollWheelZoom={false}
        style={{ height: '500px', width: '100%' }}
        ref={mapRef}
      >
        <FeatureGroup>
          <EditControl
            position="topright"
            onCreated={_onCreate}
            onEdited={_onEdited}
            onDeleted={_onDeleted}
            draw={{
              rectangle: false,
              polyline: false,
              circle: false,
              circlemarker: false,
              marker: false,
            }}
          />
        </FeatureGroup>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
      <pre className="text-left">{JSON.stringify(mapLayers)}</pre>
    </>
  );
};

export default PolygonMap;

依赖配置（package.json） #

{
  "name": "minia-typescript",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "apexcharts": "^3.28.1",
    "availity-reactstrap-validation": "^2.7.1",
    "axios": "^0.21.1",
    "axios-mock-adapter": "^1.20.0",
    "bootstrap": "^5.1.0",
    "chart.js": "^2.9.4",
    "devextreme": "21.2",
    "devextreme-react": "21.2",
    "draft-js": "^0.11.7",
    "echarts": "^4.9.0",
    "echarts-for-react": "^3.0.1",
    "exceljs": "^4.3.0",
    "file-saver": "^2.0.5",
    "file-server": "^2.2.0",
    "firebase": "^8.7.0",
    "geolib": "^3.3.3",
    "google-maps-react": "^2.0.6",
    "i18next": "^20.4.0",
    "i18next-browser-languagedetector": "^6.1.2",
    "leaflet": "^1.8.0",
    "leaflet-draw": "^1.0.4",
    "leaflet-routing-machine": "^3.2.12",
    "lodash": "^4.17.21",
    "lodash.clonedeep": "^4.5.0",
    "metismenujs": "^1.3.1",
    "node-sass": "^4.14.1",
    "react": "^18.2.0",
    "react-apexcharts": "^1.3.9",
    "react-auth-code-input": "^1.2.1",
    "react-bootstrap-sweetalert": "^5.2.0",
    "react-bootstrap-table-next": "^4.0.3",
    "react-bootstrap-table2-editor": "^1.4.0",
    "react-bootstrap-table2-paginator": "^2.1.2",
    "react-bootstrap-table2-toolkit": "^2.1.3",
    "react-chartjs-2": "^2.11.1",
    "react-color": "^2.19.3",
    "react-countdown": "^2.3.2",
    "react-countup": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-draft-wysiwyg": "^1.14.7",
    "react-drawer": "^1.3.4",
    "react-dropzone": "^11.3.4",
    "react-facebook-login": "^4.1.1",
    "react-flags-select": "^2.2.3",
    "react-flatpickr": "^3.10.7",
    "react-google-login": "^5.2.2",
    "react-google-recaptcha": "^2.1.0",
    "react-hook-form": "^7.14.0",
    "react-i18next": "^11.11.4",
    "react-image-lightbox": "^5.1.4",
    "react-input-mask": "^2.0.4",
    "react-jvectormap": "^0.0.16",
    "react-leaflet": "^4.0.0",
    "react-leaflet-draw": "^0.20.1",
    "react-meta-tags": "^1.0.1",
    "react-modal-video": "^1.2.8",
    "react-perfect-scrollbar": "^1.5.8",
    "react-rangeslider": "^2.2.0",
    "react-rating": "^2.0.5",
    "react-rating-tooltip": "^1.2.0",
    "react-redux": "^7.2.4",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.2.1",
    "react-scripts": "^4.0.3",
    "react-select": "^4.3.1",
    "react-slick": "^0.28.1",
    "react-sparklines": "^1.7.0",
    "react-super-responsive-table": "^5.2.0",
    "reactstrap": "^8.9.0",
    "redux-devtools-extension": "^2.13.9",
    "redux-saga": "^1.1.3",
    "simplebar-react": "^2.3.5",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@ailibs/feather-react-ts": "^2.0.4",
    "@fullcalendar/bootstrap": "^5.9.0",
    "@fullcalendar/daygrid": "^5.9.0",
    "@fullcalendar/interaction": "^5.9.0",
    "@fullcalendar/react": "^5.9.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/file-saver": "^2.0.5",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.4",
    "@types/react": "^17.0.19",
    "@types/react-dom": "^17.0.9",
    "@types/react-router-dom": "^5.1.8",
    "@vtaits/react-color-picker": "^0.1.1",
    "@types/leaflet": "^1.7.11",
    "@types/lodash": "^4.14.170",
    "@types/react-bootstrap-table2-paginator": "^2.1.1",
    "@types/react-bootstrap-table2-toolkit": "^2.1.4",
    "@types/react-google-recaptcha": "^2.1.5",
    "babel-eslint": "^10.1.0",
    "prettier": "2.6.2",
    "react-error-overlay": "6.0.9"
  }
}

1. 修复依赖版本兼容性 #

当前react-leaflet v4.0.0与react-leaflet-draw v0.20.1不兼容，react-leaflet-draw v0.20.x仅适配react-leaflet v3.x版本。

操作步骤：

• 降级react-leaflet到v3.x稳定版：

  npm install react-leaflet@3.2.5
  

2. 调整组件渲染顺序 #

FeatureGroup放在TileLayer之前会导致控件被地图图层遮挡，将TileLayer移到FeatureGroup前面：

<MapContainer
  center={center}
  zoom={13}
  scrollWheelZoom={false}
  style={{ height: '500px', width: '100%' }}
  ref={mapRef}
>
  <TileLayer
    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  <FeatureGroup>
    <EditControl
      position="topright"
      onCreated={_onCreate}
      onEdited={_onEdited}
      onDeleted={_onDeleted}
      draw={{
        rectangle: false,
        polyline: false,
        circle: false,
        circlemarker: false,
        marker: false,
      }}
    />
  </FeatureGroup>
</MapContainer>

3. 清除本地缓存并重装依赖 #

本地缓存可能导致依赖加载异常：

• 删除node_modules文件夹和package-lock.json文件
• 执行npm install重新安装依赖
• 重启开发服务器npm start

4. 验证CSS加载 #

确保CSS导入顺序正确，Leaflet基础样式优先于draw样式：

import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';
// 后续导入React-Leaflet组件

内容的提问来源于stack exchange，提问作者Yunus