openlayer添加自定义图片图层

openlayer添加自定义图片图层

这个就是有一种图片，把他放到openlayer里面去！

首先引入相关的库文件

  import Projection from 'ol/proj/Projection'
  import Static from 'ol/source/ImageStatic'
  import Map from 'ol/Map'
  import ImageLayer from 'ol/layer/Image'
  import View from 'ol/View'
  import VectorLyr from 'ol/layer/Vector'
  import VectorSource from 'ol/source/Vector'
  import { getCenter } from 'ol/extent'
  import Polygon from 'ol/geom/Polygon'
  import Feature from 'ol/Feature'
  import { Circle as CircleStyle, Style, Fill, Stroke } from 'ol/style'
  import Point from 'ol/geom/Point'
  import { Heatmap as HeatmapLayer } from "ol/layer";

然后编写javascript代码。

initMap() {
    const extent = [0, 0, 500, 700]  // 图片范围
    const projection = new Projection({  // 创建投影
       code: 'EPSG:3857',
       units: 'pixels',   // 像素单位
       extent: extent,
       axisOrientation: 'seu'
    })
    if (!this.map) {   // 如果地图不存在，就创建
      this.map = new Map({
         layers: [
            new ImageLayer({       // 创建一个图像图层
              title: 'baseMap',
              source: new Static({
              	url: '图片地址',
              	projection: projection,
              	imageExtent: extent
              })
           })
         ],
         target: 'heatmapDiv',   // 绑定的地图显示元素
         view: new View({
           projection: projection,
           center: getCenter(extent),
           zoom: 2,
           maxZoom: 3
         })
       })
    } else {   // 如果存在就修改已存在地图的源
      let base = this.getLayerFromMap(this.map, 'baseMap')  // 获取地图中是否存在该图层
      base.setSource(new Static({   // 设置源数据
        url: this.area.map2d,
        projection: projection,
        imageExtent: extent
      }))
      this.map.setView(new View({   // 设置视图位置
         projection: projection,
         center: getCenter(extent),
         zoom: 2.0,
      }))
   }
}

// 根据图层title获取地图图层，如果有就返回图层，没有就返回null

getLayerFromMap(map, name) {
   var layers = map.getLayers()   // 获取地图所有图层
   var layer = null
   layers.forEach((item, index) => {
       if (item.values_.title !== undefined) {
          if (item.values_.title === name) {
            layer = item
            return layer
          }
       }
    })
    return layer
}