时间戳

首页 > 解决方案 > 如何使用反应在传单的图层控件选择上添加标题？

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

问题描述

我正在使用带有 Bing 地图的 Leaflet JS。我需要在类型 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)

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

选择类型

Type1Layer

Type2Layer

选择类别

类别1

类别2

标签： javascriptreactjsdictionaryleafletbing-maps

解决方案

使用 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" }} />;

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

演示

推荐阅读