前言
本身是想使用moveend事件来监听地图的缩放级别，但是初始化实例之后一直不能正常监听到缩放结束的变化。
后再文档中查到change:resolution可以同样实现相同效果。因此以此文记录使用和实现方案。
监听事件
mounted() {
this.$map = this.$refs.baseMap.getMap()
this.$map.getView().on('change:resolution', () => {
if (this.$map.getView().getZoom() >= 17 && this.$map.getView().getZoom() < 19) {
this.setLayerVisible('图层1', false)
this.setLayerVisible('图层2', false)
} else if (this.$map.getView().getZoom() < 17) {
this.setLayerVisible('图层1', true)
this.setLayerVisible('图层2', true)
} else if (this.$map.getView().getZoom() === 19) {
this.setLayerVisible('图层1', false)
this.setLayerVisible('图层2', false)
}
})
控制图层显示与隐藏
这里我提出setLayerVisible作为公共方法，以便导出复用
Mymap.setLayerVisible = function(mapHelper, title, isV) {
if (mapHelper) {
if (title instanceof Object) {
mapHelper.setLayerVisible(title.title, isV)
} else {
mapHelper.setLayerVisible(title, isV)
}
}
}
因为图层初始渲染时不会被监听到需要提前先将图层加载并隐藏
this.handleTabData（'图层名称','这里传数据列')
this.setLayerVisible （'图层名称', false)// 首次渲染后，若和初始zoom值不对应，先进行隐藏
渲染图层
updateLayer(title, dataArr) {
const featuresArr = []
if (title && dataArr && dataArr.length > 0) {
// 循环数据生成地图要素对象
const icon = this.icons.filter(item => item.name == title)[0]
dataArr.map((item, index) => {
if (item.lgtd && item.lttd) {
let text = null
let style = null
// 这里是根据图层名称渲染不同图层
switch (title) {
case this.layerNmRain:
text = `${item.stnm}(${item.drps})`
style = MyMapUtils.createStyle(text, imgSrc, null, null, null, null, [16, 16])
break
case this.layerNmRsvr:
// 可以不指定样式，会使用layersConfig中设置的默认样式：style: new Style({
text = `${item.stnm}(${item.rz})`
style = MyMapUtils.createStyle(text, imgSrc, null, null, null, null, [16, 16])
break
}
const feature = MyMapUtils.createFeature(item.lgtd, item.lttd, title, style, item)
featuresArr.push(feature)
}
})
}
MyMapUtils.setLayerData(this.mapHelper, title, featuresArr)
},