Добавление нескольких оверлеев в элемент управления слоями листовки - PullRequest
Новая
       24

Добавление нескольких оверлеев в элемент управления слоями листовки

0 голосов
/ 02 апреля 2019

У меня есть LayerGroup, в которой размещены несколько изображений наложений. Все они отображаются правильно.

Теперь я хотел бы иметь возможность показать и скрыть эту LayerGroup в LayersControl.

Моя LayerGroup определена в функции, подобной этой: 

this.imgOvl.forEach((img) => {
  this.imgOvlGp.addLayer(img);
});

Если я добавлю эту LayerGroup в свой существующий и работающий объект наложения, я получу сообщение об ошибке: 

 lControl = {
    bLayers: {
      'Open Street Map': xyz
    },
    ol: {
      'GeoJSONs': xyz,
      'Image Overlays': this.imgOvlGp // does not work
    }
  };

Я получаю это сообщение об ошибке в браузере:

MapViewComponent.html: 1 ОШИБКА TypeError: Невозможно прочитать свойство 'on' из не определено в NewClass._addLayer (leaflet-src.js: 5101) на NewClass.addOverlay (leaflet-src.js: 5005) на сайте leaflet-control-Layers.wrapper.js: 52 at DefaultKeyValueDiffer.push ../ node_modules/@angular/core/fesm5/core.js.DefaultKeyValueDiffer.forEachAddedItem (core.js: 19640) на сайте leaflet-control-Layers.wrapper.js: 51 в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke (zone.js: 391) в Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.run (zone.js: 150) на NgZone.push ../ node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js: 17248) at LeafletControlLayersWrapper.push ../ (листовка-Control-layers.wrapper.js: 41) at LeafletControlLayersWrapper.push ../ (листовка-Control-layers.wrapper.js: 32)

Если я уберу строку .. 

 'Image Overlays': this.imgOvlGp // does not work

.. из объекта ol все работает нормально.

Есть идеи?

UPDATE 

  this.overlays = imgOverlays;
  this.overLayGroup = new L.LayerGroup().addTo(this.map);

  this.overlays.forEach((img) => {
    this.overLayGroup.addLayer(img);
  });

  // If I do it like this, it works..
  const overlay = {'Overlays': this.overLayGroup};
  L.control.layers(null, overlay).addTo(this.map);

Ответы [ 2 ]

1 голос
/ 02 апреля 2019

Разница между добавлением одного или нескольких изображенийOverlay в качестве листового наложения заключается в том, что вам нужно создать и добавить каждый imageOverlay в L.layerGroup() следующим образом: 

overlaysGroup = L.layerGroup();

imageUrl = "http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg";
imageBounds: L.LatLngBoundsExpression = [
    [-33.865, 151.2094],
    [-35.865, 154.2094]
];
imageOverlay = imageOverlay(this.imageUrl, this.imageBounds)
       .addTo(this.overlaysGroup)

imageUrl2 = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Sydney_Opera_House_-_Dec_2008.jpg/1024px-Sydney_Opera_House_-_Dec_2008.jpg',
imageBounds2: L.LatLngBoundsExpression = [
    [-30.8650, 151.2094],
    [-32.865, 154.2094]
];
imageOverlay2 = imageOverlay(this.imageUrl2, this.imageBounds2)
          .addTo(this.overlaysGroup)

, а затем просто назначить overlaysGroup для оверлеевобъект в соответствии с желаемой строкой при использовании ngx-leaflet аналогично реализации собственной листовки: 

overlays: {
    "overlays": this.overlaysGroup
}

Альтернативный подход

Создать массив и сохранить imageOverlays 

 allOverlays = [this.imageOverlay, this.imageOverlay2]

Прослушивание события onMapReady и цикл по массиву imageOverlays и добавление оверлеев в overlayGroup после загрузки карты 

onMapReady(map) {
    // map.fitBounds(this.imageOverlay.getBounds());
    this.allOverlays.forEach(overlay => {
      overlay.addTo(this.overlaysGroup)
    });
}

Demo

0 голосов
/ 02 апреля 2019

Я решил это, создав FeatureGroup и поместив в него свою LayerGroup.

Затем я добавил FeatureGroup нескольких ImageOverlays к моему объекту наложения. 

// Create FeatureGroup
featureGroup = new FeatureGroup ();

// Add LayerGroup of multiple Images to the FeatureGroup
this.overlayGroup.addTo(this.featureGroup);

// Add FeatureGroup to the ol object to display the toggle functionality in the layers group
lControl = {
  bLayers: {
    'Open Street Map': xyz
  },
  ol: {
    'GeoJSONs': xyz,
    'Image Overlays': this.featureGroup // does not work
  }
};
...