-1

我在我的反应应用程序中显示带有反应传单 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;
}
4

1 回答 1

1

React-Leaflet v3在核心 API中提供了createControlComponent Hook，它接收一个 Leaflet 控件的实例并返回一个 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>

演示

于 2021-10-18T01:25:34.853 回答