向传单的图层控件添加多个叠加

时间:2019-04-02 09:28:12

标签: angular leaflet ngx-leaflet

我有一个LayerGroup,其中放置了几个ImageOverlay。这些都正确显示。

现在,我希望能够在LayersControl中显示和隐藏此LayerGroup。

我的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       在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)       在LeafletControlLayersWrapper.push ../ node_modules/@asymmetrik/ngx-leaflet/dist/leaflet/layers/control/leaflet-control-layers.wrapper.js.LeafletControlLayersWrapper.applyChanges中   (leaflet-control-layers.wrapper.js:41)       在LeafletControlLayersWrapper.push ../ node_modules/@asymmetrik/ngx-leaflet/dist/leaflet/layers/control/leaflet-control-layers.wrapper.js.LeafletControlLayersWrapper.applyOverlayChanges   (leaflet-control-layers.wrapper.js:32)

如果我删除该行。

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

..从ol对象开始,一切正常。

有什么想法吗?


更新

  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 个答案:

答案 0 :(得分:1)

将单个或多个imageOverlays添加为小叶叠加层之间的区别在于,您必须创建每个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)

然后,当使用ngx-leaflet时(类似于本机小叶实现),只需根据所需的字符串将overlaysGroup分配给overlays对象即可:

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

答案 1 :(得分:0)

我通过创建一个FeatureGroup并将其LayerGroup放入其中来解决了该问题。

然后我将多个ImageOverlays的FeatureGroup添加到我的overlays对象中。

// 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
  }
};