我有一个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);
答案 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)
});
}
答案 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
}
};