一、使用地图时可能会出现的需求
1、定位:需要将地图的中心视野,定位到研究区域的中心点;
2、地图蒙版:只研究特定区域,将其他部分区域用蒙层遮罩,突显重点;
3、变色:设置整体的地图颜色风格,更换不同的主题颜色;
4、打点:在地图上加入一些点位图标的矢量元素;
5、画线:在地图上加入矢量线元素;
6、画面:在地图上加入矢量面元素;
7、事件:设置地图矢量的点击事件等;
8、弹出层:配置地图内部弹出层,显示特定信息。
二、解决方案
以下使用的部分变量基本上均为地图相关变量,需传入对应参数。
1、定位
①直接设置地图中心点(无位移动画)
map.getView().setCenter(coord)
②动画位移至中心点
map.getView().animate( {center: center},{zoom: zoom})
2、地图蒙版
需借助插件"ol-ext"完成。
import Mask from 'ol-ext/filter/Mask'
// region 需要被遮罩的图层let maskLayer = this.getLayer('img')// 创建遮罩过滤, 此处注意坐标系问题const maskFilter = new Mask({feature: new GeoJSON({featureProjection: 'EPSG:4326'}).readFeature(gis.features[0]),wrapX: true,inner: false,fill: new Fill({color: color || 'rgba(0,0,0,0.5)'}),})// 设置图层遮罩过滤maskLayer.addFilter(maskFilter)
3、变色
核心操作:回调函数,通过每次获取瓦片时,对瓦片进行重绘,然后再将瓦片数据上图。
new TileLayer({id: "cia_n",source: new WMTS({url: wmtsUrl_1 + webKey,layer: "cia",matrixSet: "c",format: "tiles",style: "default",projection: projection,tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: matrixIds,}),wrapX: true,tileLoadFunction: function (imageTile, src) {// 使用滤镜 将白色修改为深色let img = new Image()// img.crossOrigin = ''// 设置图片不从缓存取,从缓存取可能会出现跨域,导致加载失败img.setAttribute('crossOrigin', 'anonymous')img.onload = function () {let canvas = document.createElement('canvas')let w = img.widthlet h = img.heightcanvas.width = wcanvas.height = hlet context = canvas.getContext('2d')context.filter = 'grayscale(98%) invert(100%) sepia(20%) hue-rotate(180deg) saturate(1600%) brightness(80%) contrast(90%)'context.drawImage(img, 0, 0, w, h, 0, 0, w, h)imageTile.getImage().src = canvas.toDataURL('image/png')}img.src = src}}),});
4、打点
常见需求,对部分地标或者建筑需要将其加入地图中,有助于使用者查看内容分布情况和内容具体位置。
添加地图元素需要分四步走,第一步是生成图层(点位元素的容器),第二步生成点位,第三步声明style(即点位的样式信息,例如点位图片、位置等),第四步将点位加入图层。
import {Point,
} from 'ol/geom'// 声明图层名称变量const addToLayer = toLayer || 'pointerLayer'
// 生成点位,param为函数传入参数,代表点位信息数据
let newFeature = new Feature({id: param.id,layerId: param.layerId,data: param.data,geometry: new Point(param.position)})
// 生成样式
let style = new Style()
newFeature.setStyle(style)
// 此处将第一步和第三步合并,在生成的时候加入点位,当然也可以在生成之后再通过调用source加入
const vectorLayerObj = new VectorLayer({id: addToLayer,zIndex: param.zIndex || 95,minZoom: param.minZoom,maxZoom: param.maxZoom,source: new VectorSource({features: [newFeature]})})
5、画线
步骤与生成点基本一致,只是在声明矢量元素时有所不同。
import {LineString
} from 'ol/geom'let routerLine = new Feature({geometry: new LineString(param.coordinates),data: param.data,layerId: param.layerId,id: param.id,});
6、画面
import {MultiPolygon,Polygon
} from 'ol/geom'let newPolygon = new Feature({geometry: new Polygon(data.coordinates),data: data.data,layerId: data.layerId,id: data.id,});
7、事件
若需要与地图交互时触发相关事件,需要添加对应的监听方法,常用的有点击监听、鼠标移动监听等事件。
①监听鼠标移动事件:常用的方式为,鼠标划过矢量元素时变成小手。
mouseoverEvent() {map.on("pointermove", (e) => {this.$emit("handleMoveCoordinate", e.coordinate);let pixel = this.map.mapObj.getEventPixel(e.originalEvent);let feature = this.map.mapObj.forEachFeatureAtPixel(pixel,(feature) => {return feature;});if (feature) {if (feature.values_.id) {map.getTargetElement().style.cursor = "pointer";}} else {if (that.cursorPointer == "crosshair") {map.getTargetElement().style.cursor = "crosshair";} else {map.getTargetElement().style.cursor = "auto";}}});},
②点击事件:常与弹出层搭配使用,点击对应矢量,弹出相关信息。
var selectSingleClick = new Select();
selectSingleClick.on("select", (e) => {let features = e.target.getFeatures().getArray();if (features.length > 0) {let feature = features[0];let featureObj = feature.values_.data;let coordinate = null;// 获取点击元素的featureif (featureObj) {}selectSingleClick.getFeatures().clear();});map.mapObj.addInteraction(selectSingleClick);
8、弹出层(overlay)
通常情况下,我们可以在html代码中先声明好弹出层的组成结构和样式,然后再将其与overlay对象绑定,从而即可达到理想中的效果。
<div id="popOverLay" class="pop-content" v-show="isShow">
</div>
let overlay = map.getOverlayById('popOverLay')let view = map.getView();view.animate({center: coordinate},{zoom: 15})setTimeout(() => {if (overlay) {overlay.setPosition(coordinate)} else {this.popup = new Overlay({id: 'popOverLay',autoPan: true,autoPanAnimation: {duration: 250},autoPanMargin: 250,element: document.getElementById('popOverLay'),position: coordinate,positioning: 'bottom-center',offset: [-1, -40]})this.mapObj.addOverlay(this.popup)}}, 1000);