绑定事件
鼠标点击事件:click
this.map.on("click", (e) => {
console.log("e:", e);
});
鼠标滑过要素显示手势
// 设置鼠标划过矢量要素的样式
pointerMove() {
this.map.on("pointermove", (e) => {
const isHover = this.map.hasFeatureAtPixel(e.pixel);
this.map.getTargetElement().style.cursor = isHover ? "pointer" : "";
});
},
获取点击处地理空间坐标
this.map.on("click", (e) => {
console.log("e.coordinate:", e.coordinate);
});
获取点击处屏幕坐标
- 通过e.pixel获取屏幕坐标(推荐)
- 通过this.map.getEventPixel(e.originalEvent)获取屏幕坐标
this.map.on("click", (e) => {
console.log("e.pixel:", e.pixel);
console.log(
"this.map.getEventPixel(e.originalEvent)来获取屏幕坐标,屏幕左上角为[0,0]",
this.map.getEventPixel(e.originalEvent)
);
});
根据屏幕坐标获取当前所有要素
this.map.on("click", (e) => {
console.log(
"this.map.getFeaturesAtPixel(e.pixel):",
this.map.getFeaturesAtPixel(e.pixel)
);
});
根据屏幕坐标遍历当前所有要素
this.map.on("click", (e) => {
let pixel = this.map.getEventPixel(e.originalEvent);//屏幕坐标。左上角为[0,0]
//根据屏幕坐标遍历当前所有要素
this.map.forEachFeatureAtPixel(pixel, (feature) => {
console.log("feature:", feature);
});
});
点击要素获取该feature要素
clickFeature() {
this.map.on("click", (e) => {
let feature = this.map.forEachFeatureAtPixel(e.pixel, (feature) => {
return feature;
});
this.$message.success(feature.get("title"));
});
},
获取feature要素后,可以直接通过feature.get('属性名')来获取geojson中该feature的属性值
或者通过feature.getProperties()来获取geojson中该feature的所有的属性值,返回包含属性值的一个对象
图层常见操作
- 添加图层:map.addLayer(layer)
- 移除图层:map.removeLayer(layer)
- 清空图层上的所有要素:layer.getSource().clear()
根据feature获取layer
使用于点要素和面要素,而线要素还有待研究。
参考:Openlayers通过feature获取Layer以及通过点获取线feature_feishusang的博客-CSDN博客
import {Vector as VectorSource } from "ol/source";
//根据feature获取layer
getLayer(feature = {}, map = {}) {
let layers = map.getLayers().getArray();
for (let i in layers) {
let source = layers[i].getSource();
if (source instanceof VectorSource) {
let features = source.getFeatures();
if (features.length > 0) {
for (let j in features) {
if (features[j] === feature) {
return layers[i];
}
}
}
}
}
return {};
},
删除传入的feature
基于上面的【根据feature获取layer】中的方法获取layer,再通过layer.getSource().removeFeature(feature)即可
this.getLayer(feature, this.map).getSource().removeFeature(feature);
根据geojson数据获取坐标集
getCoordinatesByGeojson(geojsonData) {
let coordinates = [];
geojsonData.features.map((feature) => {
coordinates = [...coordinates, feature.geometry.coordinates];
});
return coordinates;
},
调整图标,文本,弹出框位置
通过layer获取source:
layer.getSource()
数据源source中遍历所有要素feature:
source.forEachFeature(feature=>{})
数据源source中获取features数组:
source.getFeatures()
返回feature数组
geojson中获取features数组:
import GeoJSON from "ol/format/GeoJSON";
geojsonData: {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [0, 0],
},
},
],
},
let features = new GeoJSON().readFeatures(this.geojsonData)
飞行到指定geometry,并设置geometry的显示范围
this.map.getView().fit(geometry, {
duration: 1000,
padding: [100, 100, 50, 100],
});
飞行到指定范围
像切片影像这种没有geometry的,可以飞行到指定的显示范围,如下:
this.map.getView().fit(
[
105.06825540402254, 28.82748694609426, 105.07362846356229,
28.83261203911692,
],
{
duration: 1000,
padding: [100, 100, 50, 100],
}
);
获取要素的坐标数组-feature.getGeometry().getCoordinates()
this.draw.on("drawend", function (e) {
console.log(" e:", e);
console.log(" e.feature:", e.feature);
console.log(" e.feature.getGeometry():", e.feature.getGeometry());
console.log(
" e.feature.getGeometry().getCoordinates():",
e.feature.getGeometry().getCoordinates()
);
});