Как добавить заголовки при выборе элемента управления слоями листовки с помощью реакции? - PullRequest
Новая
       46

Как добавить заголовки при выборе элемента управления слоями листовки с помощью реакции?

0 голосов
/ 16 апреля 2020

Я использую Leaflet JS с картой Bing. Мне нужно добавить заголовки поверх Тип 1 слоя и Категория 1 выбора наложений, отображаемых в правой верхней части карты. Я не мог видеть документацию для того же. Может кто-нибудь мне помочь.

Мои слои,

Базовые слои: По умолчанию и Engli sh

Наложения: Слой типа 1, слой типа 2, категория 1, категория 2

изображение enter image description here

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)

Необходимо добавить title Выберите Type и выберите Category в окне выбора слоя на карте, как показано ниже,

Select Type

Type1Layer

Type2Layer

Выберите категорию

Категория1

Категория2

1 Ответ

1 голос
/ 16 апреля 2020

Используйте плагин 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" }} />;

Замените свои слои на те, что в экзамене, и вы должны быть хорошими

демо

...