React Leaflet v3：创建控件的好方法

Question

我正在我的 React 应用程序中显示带有 React leaflet v3 的地图。

我只想添加一个自定义控件，但我不知道这样做的好方法。

其实我也是这么干的，但是好像不行

function DptCtl(props) {
    // Control
    const map = useMap();

    // List of dpts and provinces
    const dpts = useSelector(dptsSelector);

    L.Control.Dpts = L.Control.extend({
        onAdd(map) {
            const container = L.DomUtil.create('div');
            const input = L.DomUtil.create('input', container);

            
            return container;
        },
        onRemove(map) {}
    })

    L.Control.dpts = function (opts) {
        return new L.Control.Dpts(opts);
    }

    useEffect(() => {
        const control = L.Control.dpts({ position: props.position })
        map.addControl(control)

        return () => {
            map.removeControl(control)
        }
    }, [dpts])

    return null;
}

Answer 1

React-Leaflet v3 提供了 createControlComponent Hook in the Core API 接受一个 Leaflet 控件的实例和 returns 一个 Leaflet 元素。

下面是一个使用 Leaflet 的缩放控件的例子：

import L from 'leaflet';
import { createControlComponent } from '@react-leaflet/core';

const createControlLayer = (props) => {
  // Set up an instance of the control:
  const controlInstance = new L.Control.Zoom(props);

  return controlInstance;
};

// Pass the control instance to the React-Leaflet createControlComponent hook:
const customControl = createControlComponent(createControlLayer);

export default customControl;

然后，将新的自定义控件图层添加到地图中：

<MapContainer
  center={[37.0902, -95.7129]}
  zoom={3}
  zoomControl={false}
  style={{ height: '100vh', width: '100%', padding: 0 }}
  whenCreated={(map) => setMap(map)}
>
  <CustomControl />
  <LayersControl position="topright">
    <LayersControl.BaseLayer checked name="Map">
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url={maps.base}
      />
    </LayersControl.BaseLayer>
  </LayersControl>
</MapContainer>

DEMO

React Leaflet v3：创建控件的好方法

React Leaflet v3 : Good way to create a control

reactjs

leaflet

react-leaflet

react-leaflet-v3