javascript - 如何使用 react 在传单的图层控制选择上添加标题？

Question

我正在使用 Leaflet JS 和 Bing map 。我需要在显示在 map 右上角的类型 1 图层和类别 1 叠加选择之上添加标题。我看不到任何相同的文档。有人可以帮助我吗？

我的图层是，

基础层:默认和英语

叠加:类型 1 图层、类型 2 图层、类别 1、类别 2

图像

let type1Layer = L.layerGroup()
let type2Layer = L.layerGroup()
let category1 = L.layerGroup()
let category2 = L.layerGroup()
let overlays = {
            'Type1Layer': type1Layer, 
            'Type2Layer': type2Layer, 
            'Category1': category1, 
            'Category2': category2 
}
L.control.layers(baseLayers, overlays).addTo(myMap)

需要在 map 的图层选择窗口中添加标题“选择类型”和“选择类别”，如下所示，

选择类型

类型1层

类型2层

选择类别

类别1

类别2

Answer 1

使用leaflet-groupedlayercontrol插件以实现所需的结果。

当组件安装时，您可以使用groupedOverlays对象来分离层，方法是将键作为对象传递，其中它们的名称将是类似于字典的分离层:

    useEffect(() => {
    var basemaps = {
      Grayscale: L.tileLayer(
        "http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png",
        {
          maxZoom: 18,
          attribution:
            '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }
      ),
      Streets: L.tileLayer(
        "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        {
          maxZoom: 19,
          attribution:
            '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }
      )
    };

    var groups = {
      cities: new L.LayerGroup(),
      restaurants: new L.LayerGroup(),
      dogs: new L.LayerGroup(),
      cats: new L.LayerGroup()
    };

    L.marker([39.61, -105.02], { icon })
      .bindPopup("Littleton, CO.")
      .addTo(groups.cities);

    ...

    var map = L.map("map", {
      center: [39.73, -104.99],
      zoom: 10,
      layers: [basemaps.Grayscale, groups.cities]
    });

    // Overlay layers are grouped
    var groupedOverlays = {
      SelectType: {
        Type1Layer: groups.cities, // use your one
        Type2Layer: groups.restaurants // use your one
      },
      SelectCategory: {
        Category1: groups.dogs, // use your one
        Category2: groups.cats  // use your one
      }
    };

    // Use the custom grouped layer control, not "L.control.layers"
    L.control.groupedLayers(basemaps, groupedOverlays).addTo(map);
  }, []);

  return <div id="map" style={{ width: "600px", height: "400px" }} />;

将您的图层替换为示例中的图层，您应该会很好

demo