网站添加wordpress,cms网站是什么,widgets wordpress怎么建,网站建设售后服务内容一、使用地图时可能会出现的需求
1、定位#xff1a;需要将地图的中心视野#xff0c;定位到研究区域的中心点#xff1b; 2、地图蒙版#xff1a;只研究特定区域#xff0c;将其他部分区域用蒙层遮罩#xff0c;突显重点#xff1b; 3、变色#xff1a;设置整体的地图…一、使用地图时可能会出现的需求
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/geomlet routerLine new Feature({geometry: new LineString(param.coordinates),data: param.data,layerId: param.layerId,id: param.id,});6、画面
import {MultiPolygon,Polygon
} from ol/geomlet 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 idpopOverLay classpop-content v-showisShow
/divlet 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]})map.addOverlay(this.popup)}}, 1000);
