angular - 向传单的图层控件添加多个叠加层
问题描述
我有一个放置了几个 ImageOverlays 的 LayerGroup。这些都显示正确。
现在我希望能够在 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 错误类型错误:无法在 Leaflet-control-layers.wrapper 的 NewClass.addOverlay (leaflet-src.js:5005) 的 NewClass._addLayer (leaflet-src.js:5101) 处读取未定义的属性“on” .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) 在 LeafletControlLayersWrapper.push../node_modules/@asymmetrik/ngx-leaflet/ dist/leaflet/layers/control/leaflet-control-layers.wrapper.js。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.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);
解决方案
添加单个或多个 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": 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)
});
}
推荐阅读
- java - 使用 IntelliJ、OpenJFX 和 Gradle 构建 JAR 文件
- express - 使用 express-gateway 修改 graphql 查询变量
- yaml - Google Workflows 上的多行字符串插值
- c# - c# 中的 x += 1 和 x = x + 1 有什么区别吗?
- reactjs - 无法读取未定义的属性“长度”,但一直给出错误
- r - 选择带点和冒号的数字字符串
- angularjs - 将 WebSocket 与 AngularJS 一起使用
- angular - 在 Angular Slick 网格中,多选字段无法过滤
- javascript - 带有 css 生成块的 JavaScript 游戏,字符无法在点击时跳转
- git - Git删除了所有跟踪文件中的所有更改