注意:feature中不能直接getSource(),layer才可以直接getSource()。但是可以通过自己封装函数来实现通过feature获取layer。feature可以直接getGeometry()
基本用法:
<template>
<div id="map" style="height: 100vh; width: 100vw"></div>
</template>
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
import { Point, LineString, Polygon } from "ol/geom";
export default {
data() {
return {
map: {},
vectorLayer: {},
};
},
created() {},
mounted() {
this.initMap();
this.addLayer();
},
computed: {},
methods: {
initMap() {
this.map = new Map({
target: "map",
layers: [
new TileLayer({
source: new OSM(),
}),
],
view: new View({
projection: "EPSG:4326",
center: [104.2979180563, 30.528298024],
zoom: 18,
}),
});
},
addLayer() {
this.vectorLayer = new VectorLayer({
source: new VectorSource(),
});
this.vectorLayer.getSource().addFeature(
//添加点图层
new Feature({
geometry: new Point([104.2979180563, 30.528298024]),
})
//添加线图层
// new Feature({
// geometry: new LineString([
// [104.2979180563, 30.528298024],
// [104.2987389704, 30.527798338],
// ]),
// })
//添加面图层
// new Feature({
// geometry: new Polygon([
// [
// [104.2979180563, 30.528298024],
// [104.2987389704, 30.527798338],
// [104.2974397847, 30.5265062907],
// [104.2979180563, 30.528298024],
// ],
// ]),
// })
);
this.map.addLayer(this.vectorLayer);
},
},
};
</script>
引入:
import { Feature } from "ol";
import { Point, LineString, Polygon } from "ol/geom";
创建点要素Point:
let feature = new Feature({
geometry: new Point([104.2979180563, 30.528298024]),
});
或者:
let feature = new Feature(new Point([104.2979180563, 30.528298024]));
创建线要素LineString:
let feature = new Feature({
geometry: new LineString([
[104.2979180563, 30.528298024],
[104.2987389704, 30.527798338],
]),
});
动态添加坐标:
let geometry = new LineString(); //线,Point 点,Polygon 面
let coordinate = [
[105.6005859375, 30.65681556429287],
[107.95166015624999, 31.98944183792288],
];
function addPonitToGeometry(arr) {
for (let i = 0; i < arr.length; i++) {
geometry.appendCoordinate(arr[i]);
}
}
addPonitToGeometry(coordinate);
let LineStringFeature = new Feature(geometry);
创建面要素Polygon:
let feature = new Feature({
geometry: new Polygon([
[
[106, 33],
[108.03955078125, 32.2313896627376],
[108.25927734375, 33.15594830078649],
[106, 33],
],
]),
});
给feature设置id
feature.setId(xxx)
获取feature的id
feature.getId()
通过feature的id获取feature
source.getFeatureById(xxx)
添加feature:
source.addFeature(xxx)
移除feature:
source.removeFeature(xxx)
数据源source中遍历所有要素feature:
source.forEachFeature(feature=>{})
数据源source中获取features数组:
source.getFeatures()
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)
给feature动态设置文本text
change() {
this.feature
.getStyle()
.getText()
.setText("哈哈哈");
this.feature.changed();
}
给feature设置样式style
feature.setStyle(new Style(xxx))
根据feature获取geometry
feature.getGeometry()
将feature置于视图中心-fly飞行
this.map.getView().fit(feature.getGeometry(), {
duration: 1000,
padding: [100, 100, 100, 100],
});
根据feature获取geometry类型:
feature.getGeometry().getType()
如:Point、LineString、Polygon等
给feature设置指定属性
feature.set("xx",xx)
给feature设置多个属性
feature.setProperties(Object)
获取feature中的指定属性
获取feature要素后,可以直接通过feature.get('属性名')来获取geojson中该feature的属性值
获取feature中的所有属性
或者通过feature.getProperties()来获取geojson中该feature的所有的属性值,返回包含属性值的一个对象
获取feature的中点
let extent = feature.getGeometry().getExtent();
let center = ol.extent.getCenter(extent);
通过feature获取layer
适用于点要素和面要素,而线要素还有待研究。
参考:Openlayers通过feature获取Layer以及通过点获取线feature_openlayers getlayers_一又的博客-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 {};
},
更多推荐
Openlayer中的Feature
发布评论