openlayers加载图片图层

背景：后台返回base64加密图片

      this.dzmData = ‘data:image/jpeg;base64,‘ + data  //data :后台返回值
      this.drawRaindata(‘data:image/jpeg;base64,‘ + data)

    drawRaindata(data) {
      // 图片的位置
      var extent = [78.3937045720084882, 26.6196231671198298, 99.1151731627114430, 36.2507410702885622]
      var name = ‘rain‘
      var imageLayer = new Image({
        layerName: name,
        visible: false,
        source: new ImageStatic({
          url: data,
          imageExtent: extent
        })
      })
      this.addLayer(name, imageLayer)
    }

封装简易方法

    //添加图层
    addLayer(layerName, layer) {
      this.layers[layerName] = layer
      this.map.addLayer(layer)
    },
    //移除图层
    removeLayer(layerName) {
      const layer = this.layers[layerName]
      if (layer) {
        this.map.removeLayer(layer)
      }
    },
    //获取指定图层
    getLayerByLayerName(layerName) {
      let targetLayer = null
      const me = this
      if (Vue.prototype.map) {
        const layers = Vue.prototype.map.getLayers().getArray()
        layers.forEach((layer, index) => {
          const _layerName = layers[index].values_.layerName
          if (_layerName === layerName) {
            me.idx = index
            targetLayer = layers[index]
          }
        })
      }
      return targetLayer
    }

openlayers加载图片图层

原文：https://www.cnblogs.com/wwj007/p/15029187.html