1、openLayer获取并移动到多边形的中心点
项目中遇到两种需要定位中心点的情况，但是后台返回的数据内容不同。
this.map.getView().fit(center)
方法
两种数据类型
1、[120.132382713, 30.19622665, 120.291591182, 30.395315667]
2、POINT(120.22 29.7)
需要使用wkt转化获取中心点
import {getCenter} from 'ol/extent';
let feature=new WKT().readFeature('POINT(120.22 29.7)')
let Geometry = feature.getGeometry()
let center = getCenter(Geometry.getExtent())
以上是获取的单个点或面的中心点坐标。
还可以获取到当前添加图层的中心点:
let layers = this.map.getLayers().getArray()
layers = layers.filter((l) => l.get('lid') === 'addressLayer')
let layerSource = null
if (layers.length > 0) {
layerSource = layers[0].getSource()
let center = layerSource.getExtent();
获取到的center结果示例： [120.21198694750001, 30.2957711585]
然后使用下面的方法居中，并且让地图缩小1以显示全图层内容。
this.map.getView().fit(center)
this.map.getView().setZoom(view.getZoom()-1)
2、openLayer获取坐标转化为wkt方法
这个方法是因为后端接口需要wkt格式的请求体，所以需要前端转化一下。
需要引入依赖：
npm install terraformer-wkt-parser --s
import WKT2 from 'terraformer-wkt-parser'
此时的坐标类型示例：
let geometry = {
coordinates: [120.112221, 30.284268],
type: "Point"
const r2 = WKT2.convert(geometry);
3、openLayer点击图层获取信息
监听singleclick鼠标单击事件，用lid过滤出要加的图层;
ItemContent对应数据是在添加feature方法时通过feature.set('ItemContent',data)添加的数据。拿到数据后可用于显示，或者高亮等相关操作。
this.map.on('singleclick', function (evt) {
const coordinate = evt.coordinate
let layers = me.map.getLayers().getArray()
let addressLayer = layers.filter((l) => l.get('lid') === 'addressLayer')
let addressLayerSource = null
if (layers.length > 0) {
addressLayerSource = addressLayer[0].getSource()
if(addressLayerSource){
let feature = me.map.getFeaturesAtPixel(evt.pixel)
if(feature){
for(let i in feature){
const f2 = feature[i].getProperties().ItemContent
console.log('点击获取的信息：',f2)
4、openLayer鼠标经过箭头变手势
监听pointermove鼠标移动事件，用lid过滤出要加的图层，然后给过滤出的图层加上这个样式：cursor:pointer;
this.map.on('pointermove', e => {
let pixel = me.map.getEventPixel(e.originalEvent);
let hit = me.map.hasFeatureAtPixel(pixel, {
layerFilter: layer => {
let layerId = layer.get('lid');
if ( layerId =='addressLayer' ) {
return true;
this.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
前端工程师
粉丝
