使用openPlayer,根据坐标加载覆盖物
本文默认您已经使用OL成功加载离线瓦片
openPlayer加载离线瓦片
一、加载覆盖物
1、需求
根据后端返回的坐标数据,在页面初次渲染的时候,加载所有数据坐标的覆盖物
2、代码实现
<template>
<div id="map"></div>
</template>
<script>
//导入基本模块
import 'ol/ol.css';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { Map, View, Feature } from 'ol';
import { fromLonLat, toLonLat, transform } from 'ol/proj';
import { Fill, Style, Stroke } from 'ol/style';
import { Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
import { Polygon, Circle } from 'ol/geom';
import { getVectorContext } from 'ol/render';
import Overlay from "ol/Overlay";
export default {
data() {
return {
map: null,
tileLayer: null, // 离线瓦片的图层
tileSource: null, // 离线瓦片资源
vector: null,
saveClickPixel : []
};
},
methods: {
initMap() {
this.tileLayer = new TileLayer({
source: new XYZ({
url: window.customizeConfig.mapUrl,
}),
});
// 加载所有数据覆盖物
this.$parent.firstAddAllRectangle();
this.map = new Map({
layers: [this.tileLayer],
view: new View({
center: transform([113.645358, 34.750684], 'EPSG:4326', 'EPSG:3857'),
minZoom: 0, // 最小缩放级别
maxZoom: 11, // 最大缩放级别
zoom: 9
}),
target: "map", // 将地图注入到 dom 元素中,此处写 dom id
});
this.map.on('singleclick', (evt) => {
var feature = this.map.forEachFeatureAtPixel(evt.pixel,(feature, layer)=> {
return feature;
});
if (feature) {
// 自定义全屏按钮 会改变原有覆盖物的 事件对象的evt.pixel 导致feature/layer 获取失败
// 所以需要保存这个evt.pixel;
this.saveClickPixel = evt.pixel;
this.$parent.saveArticleId = feature.values_.articleId;
this.$parent.isShowFigureInfoDialog = true;
} else {
var layer = this.map.forEachFeatureAtPixel(this.saveClickPixel,(feature, layer)=> {
return layer;
});
if (layer) {
this.$parent.saveArticleId = layer.values_.articleId;
this.$parent.isShowFigureInfoDialog = true;
}
}
});
},
// 绘制多边形(点集数组结构是[[xxxx(米),xxxx],[ xxxx,xxxx],.....])
// ol加载的瓦片 需要展示feature 必须使用 经纬度转米
addAllRectangle(allCoordinates) {
// 经纬度转为米:transform([113.645358, 34.750684], 'EPSG:4326', 'EPSG:3857')
let overlayGroupArr = [];
allCoordinates.forEach((item, index) => {
var polygonPoi = [];
item.coordinates.forEach(itemCoordinate => {
polygonPoi.push(transform([+itemCoordinate[1], +itemCoordinate[0]], 'EPSG:4326', 'EPSG:3857'));
});
overlayGroupArr[index] = new VectorLayer({
source: new VectorSource({
features: [new Feature({
geometry : new Polygon([
polygonPoi
]),
// 外部加载进来的 都保存在当前Feature 对象的 values_ 字段下
articleId: item.articleId
})],
}),
style: {
'stroke-width': 2,
'stroke-color': "#1890FF",
'fill-color': [24, 144, 255, 0.1],
},
articleId: item.articleId
});
});
overlayGroupArr.forEach(featureItem => {
this.map.addLayer(featureItem);
})
},
// 点击定位直接飞入到具体组坐标位置
addRectangle(polygonPoi, articleId) {
// 地图飞入指定坐标位置
this.map.getView().animate({
// center: fromLonLat([+polygonPoi[0][1], +polygonPoi[0][0]])
center: transform([+polygonPoi[0][1], +polygonPoi[0][0]], 'EPSG:4326', 'EPSG:3857')
});
},
},
mounted() {
this.initMap();
},
};
</script>
<style scoped>
#map {
width: 100%;
height: 100%;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
display: none;
}
#map>>>canvas {
width: 100%;
}
</style>
3、加载覆盖物总结
- 本文加载的是多边形覆盖物Ploygon,处理的坐标数据格式是:
[[米,米],[米,米],,,]
- 后端返回的如果是三位数和两位数的点位组合,即是经纬度,需要转换为米,才能加载出来覆盖物:
transform([+itemCoordinate[1], +itemCoordinate[0]], 'EPSG:4326', 'EPSG:3857')
- 因为是多边形,所以点位个数不固定的。需要动态遍历加载点位allCoordinates
- 如果点击覆盖物事件中,需要传递外部数据,则需要将数据挂载到
VectorLayer
或者Feature
对象下 - 点击定位,根据坐标,飞入到地图具体位置
this.map.getView().animate({ center: transform([+polygonPoi[0][1], +polygonPoi[0][0]], 'EPSG:4326', 'EPSG:3857')
- 点击覆盖物事件触发暂未找到(如果您知道,请留言给我,谢谢)
- 点击覆盖物:这里是触发map对象的点击事件,如下所示
// 功能 点击覆盖物 打开覆盖物详情信息面板
this.map.on('singleclick', (evt) => {
var feature = this.map.forEachFeatureAtPixel(evt.pixel,(feature, layer)=> {
return feature;
});
if (feature) {
// 自定义全屏按钮 会改变原有覆盖物的 事件对象的evt.pixel 导致feature/layer 获取失败
// 所以需要保存这个evt.pixel;
this.saveClickPixel = evt.pixel; // 重点
this.$parent.saveArticleId = feature.values_.articleId;
this.$parent.isShowFigureInfoDialog = true;
} else {
var layer = this.map.forEachFeatureAtPixel(this.saveClickPixel,(feature, layer)=> {
return layer;
});
if (layer) {
this.$parent.saveArticleId = layer.values_.articleId;
this.$parent.isShowFigureInfoDialog = true;
}
}
});