如何使用反应在传单的图层控件选择上添加标题？

Question

我正在使用带 Bing 地图的 Leaflet JS。我需要在 Type 1 Layer 和 Category 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)

需要在图层选择window中添加标题Select类型和Select类别，如下图，

Select类型

Type1图层

Type2Layer

Select 类别

类别 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

如何使用反应在传单的图层控件选择上添加标题？

How to add titles on leaflet's layer control selection using react?

javascript

dictionary

bing-maps

leaflet

reactjs