OpenLayers

Question

我正在开发一个基于 Angular 的应用程序，该应用程序使用 OpenLayers 在地图上显示给定数据。

对于这张地图，我使用的是 LayerSwitcher (ol-ext.control.LayerSwitcher):

const layerSwitcher = new LayerSwitcher({
        tipLabel: 'Layers',
        trash: false,
        width: 800
    });
this.map.addControl(layerSwitcher);

我还有一个 LayerGroup，我正在向其中动态添加矢量图层。所有这些层都可以通过 LayerSwitcher 一个一个地 selected / deselected 或通过勾选整个 LayerGroup 的复选框。

我希望有这样的功能，当一个矢量图层在LAyerSwitcher中点击select / deselect时（红色圆圈标记为勾号），然后我想做一些操作在我的地图对象上。我为可见性的变化事件添加了一个监听器：

const vectorLayer = this.myFunctionToGetTheLayer(input1, input2);
vectorLayer.on('change:visible', function () {
    console.log('selected')
});
this.layerGroup.getLayers().push(vectorLayer);

效果很好，当我单击 LayerSwitcher 中的复选框时，控制台上的日志就会消失。

但是我想要这样的东西而不是日志：

...this.map.getLayers()...

但是this.map在此函数中未定义。

有什么方法可以在监听图层的变化事件的同时对整个地图进行操作吗？

Answer 1

函数有它自己的上下文，所以没有映射属性。尝试使用具有父级上下文的箭头函数

vectorLayer.on('change:visible', () => {
   console.log('selected')
   ... this.map ... etc
});

OpenLayers - LayerSwitcher 改变可见性

OpenLayers - LayerSwitcher change visibility

angular

openlayers-6