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

Posted 2022-02-01 1024_Byte

前言

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