在React中创建自定义Leaflet图层控件

npm install leaflet react-leaflet

import React from 'react';
import { Map, TileLayer } from 'react-leaflet';

class MapComponent extends React.Component {
  render() {
    return (
      <Map center={[51.505, -0.09]} zoom={13}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution="Map data © OpenStreetMap contributors"
        />
        {/* 在这里添加你的自定义图层控件 */}
      </Map>
    );
  }
}

export default MapComponent;

import React from 'react';
import { withLeaflet, MapControl } from 'react-leaflet';
import L from 'leaflet';

class CustomLayerControl extends MapControl {
  createLeafletElement(props) {
    const { map } = this.props.leaflet;

    // 创建一个自定义图层
    const customLayer = L.layerGroup();

    // 添加一些标记到自定义图层
    L.marker([51.5, -0.09]).addTo(customLayer);
    L.circle([51.508, -0.11], { radius: 200 }).addTo(customLayer);

    // 将自定义图层添加到地图上
    map.addLayer(customLayer);

    return customLayer;
  }
}

export default withLeaflet(CustomLayerControl);

import CustomLayerControl from './CustomLayerControl';

// ...

render() {
  return (
    <Map center={[51.505, -0.09]} zoom={13}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution="Map data © OpenStreetMap contributors"
      />
      <CustomLayerControl position="topright" />
    </Map>
  );
}