[英]OpenLayers - LayerSwitcher change visbility
I am working on an Angular based application which is using OpenLayers to show given data on a map.我正在开发一个基于 Angular 的应用程序,它使用 OpenLayers 在地图上显示给定的数据。 For this map I am using a LayerSwitcher (ol-ext.control.LayerSwithcer):
对于这张地图,我使用的是 LayerSwitcher (ol-ext.control.LayerSwithcer):
const layerSwitcher = new LayerSwitcher({
tipLabel: 'Layers',
trash: false,
width: 800
});
this.map.addControl(layerSwitcher);
I have also a LayerGroup, to which I am dinamycally adding vector layers.我还有一个 LayerGroup,我正在向其中添加矢量图层。 All of these layers can be selected / deselected via the LayerSwitcher one by one or by ticking the checkboy of the whole LayerGroup as well.
所有这些层都可以通过 LayerSwitcher 一一选择/取消选择,也可以通过勾选整个 LayerGroup 的复选框来选择/取消选择。
I wish to have the funtctionality that when one vector layer is click to select / deselect in the LAyerSwitcher (with the red circle marked tick), then I want to do some operation on my map object.我希望有这样的功能,当在 LAyerSwitcher 中单击一个矢量图层以选择/取消选择(红色圆圈标记为勾号)时,然后我想对我的地图对象进行一些操作。 I have added a listener for change events of visibility:
我为可见性更改事件添加了一个侦听器:
const vectorLayer = this.myFunctionToGetTheLayer(input1, input2);
vectorLayer.on('change:visible', function () {
console.log('selected')
});
this.layerGroup.getLayers().push(vectorLayer);
This works well, when I click the checkbox in the LayerSwitcher, then the log disappears on the console.这很有效,当我单击 LayerSwitcher 中的复选框时,日志会在控制台上消失。
But instead of the log, I want to have something like this:但不是日志,我想要这样的东西:
...this.map.getLayers()... ...this.map.getLayers()...
But the this.map is undefined within this function.但是 this.map 在这个函数中是未定义的。
Is there any way to operate on the whole map while listening to a change event of a layer?有没有什么方法可以在监听图层的变化事件的同时对整个地图进行操作?
Thanks a lot in advance!非常感谢!
function has it's own context, so there is no map property.函数有它自己的上下文,所以没有 map 属性。 Try using arrow function which has context of it's parent
尝试使用具有其父上下文的箭头函数
vectorLayer.on('change:visible', () => {
console.log('selected')
... this.map ... etc
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.