OpenLayer监听zoom缩放事件显示不同业务图层

前言

本身是想使用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)
    },

效果演示

同一经纬度zoom => 15

zoom => 17

zoom => 19

标签：map,setLayerVisible,OpenLayer,title,缩放,zoom,item,图层,null
来源： https://blog.csdn.net/DDD4V/article/details/121790062