openlayers学习——6、openlayers地块定位点定位

openlayers地块定位点定位

前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。本人不是专业GIS开发，只是记录，方便后续查找。

参考资料：
openlayers官网：https://openlayers.org/
geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector
地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint/index.html

openlayers核心：Map对象、View视图、Layer图层、Source来源、Feature特征等

需要引入和包

// 这里就不一点点删了，按需引入即可
import GeoJSON from 'ol/format/GeoJSON'
import Feature from 'ol/Feature'
import { Point, Circle as CircleGeo } from 'ol/geom'
import VectorSource from 'ol/source/Vector'
import Cluster from 'ol/source/Cluster'
import TileArcGISRest from 'ol/source/TileArcGISRest'
// 自己下载的GEOJSON
import Chzu from '@/assets/geojson/Chzu.json'
import { Fill, Stroke, Style, Icon, Circle, Text } from 'ol/style'
import { Vector as VectorLayer, Tile } from 'ol/layer'
import { Draw } from 'ol/interaction'
import { boundingExtent, getCenter } from 'ol/extent'
import Overlay from 'ol/Overlay'

定位地块

// 定位地块
locationDK () {// 使用GeoJSON构建sourceconst source = new VectorSource({features: new GeoJSON().readFeatures(Chzu)})// 设置地块区域样式const style = new Style({fill: new Fill({ // 填充color: 'rgba(255, 255, 255, 0.6)'}),stroke: new Stroke({ // 边框color: '#319FD3',width: 3})})if (this.geoLayer) {this.map.removeLayer(this.geoLayer)}// 构建地块图层this.geoLayer = new VectorLayer({source: source,style: style})// 添加到map中this.map.addLayer(this.geoLayer)let [width, height] = this.map.getSize()width = Math.ceil(width)height = Math.ceil(height / 5)const view = this.map.getView()// 定位重点方法View中的fit方法，第一个传区域范围，第二个传一些配置参数，具体参数可见官网，padding：做偏移让地块定位在我们视线中的中心，自行调整设置，duration：动画时长view.fit(source.getExtent(), {padding: [height, width, height, width + 500], duration: 500}) // , {padding: [170, 50, 30, 150]}// 获取中心点，添加弹出框（下面的可要可不要，为了加弹出层，和定位没有直接关系）// addPopup就不放了，可以注释掉，相加的// 相加的代码在这片文章中 https://blog.csdn.net/weixin_43390116/article/details/122350894var extent = boundingExtent(source.getFeatures()[0].getGeometry().getCoordinates()[0][0]) // 获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]var center = getCenter(extent) // 获取边界区域的中心位置this.addPopup(center)
},

定位点

// 定位点
locationPoint () {// 创建一个点的sourceconst source = new VectorSource({features: [new Feature(new Point([118.339408, 32.261271]))]})// 样式const style = new Style({image: new Circle({ // 圆形radius: 9, // 半径fill: new Fill({color: 'red'}) // 填充色})})if (this.pointLayer) {this.map.removeLayer(this.pointLayer)}// 点图层this.pointLayer = new VectorLayer({source,style})this.map.addLayer(this.pointLayer)let [width, height] = this.map.getSize()width = Math.ceil(width)height = Math.ceil(height / 5)const view = this.map.getView()// 定位重点方法View中的fit方法，第一个传区域范围，第二个传一些配置参数，具体参数可见官网，padding：做偏移让地块定位在我们视线中的中心，自行调整设置，duration：动画时长view.fit(source.getExtent(), {padding: [height, width, height, width + 500], duration: 500}) // , {padding: [170, 50, 30, 150]}// 下面也是弹出框，可以先注释掉this.addPopup([118.339408, 32.261271])
}

清除

// 清除
clear () {if (this.geoLayer) {this.map.removeLayer(this.geoLayer)this.geoLayer = null}if (this.pointLayer) {this.map.removeLayer(this.pointLayer)this.pointLayer = null}// 清除完之后还原地图const view = this.map.getView()view.setCenter([118.339408, 32.261271])view.setZoom(12)
}

效果


相关博文加弹出框：https://blog.csdn.net/weixin_43390116/article/details/122350894