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 = nulllayers.forEach((item, index) => {if (item.values_.title !== undefined) {if (item.values_.title === name) {layer = itemreturn layer}}})return layer}