当前位置：首页 > backend >正文

15openlayers获取VectorLayer上的数据

backend 2025/5/17 10:30:28

1.前言

当遇到有前端编辑场景时，修改多个图形后，需要获取VectorLayer上的所有图形。下面介绍如何获取。同时介绍如何通过编程的方式将图形添加到VecorLayer中。

2.实战

import {Vector as VectorSource} from 'ol/source.js';
import {Vector as VectorLayer} from 'ol/layer.js';import Feature from 'ol/Feature.js';
import Point from 'ol/geom/Point.js';
import LineString from 'ol/geom/LineString.js';
import Polygon from 'ol/geom/Polygon.js';
import Circle from 'ol/geom/Circle.js';

引入Feature、Point、LineString、Polygon、Circle类。

//
const vectorSource = new VectorSource();
const vectorLayer = new VectorLayer({source: vectorSource,style: {'fill-color': 'rgba(255, 255, 255, 0.2)','stroke-color': '#ffcc33','stroke-width': 2,'circle-radius': 7,'circle-fill-color': '#ffcc33',},
});
map.addLayer(vectorLayer);

创建一个vector source并设置样式，创建一个vector layer并添加进map。

//添加点
function addPoint(coordinate,name,style){const iconFeature = new Feature({geometry: new Point(coordinate),name: ''});  vectorSource.addFeature(iconFeature);
}//添加线
function addLine(coordinate,name,style){const iconFeature = new Feature({geometry: new LineString(coordinate),name: ''});  vectorSource.addFeature(iconFeature);
}//添加多边形
function addPolygon(coordinate,name,style){const iconFeature = new Feature({geometry: new Polygon(coordinate),name: ''});  vectorSource.addFeature(iconFeature);
}//添加圆形
function addCircle(center,radius){const iconFeature = new Feature({geometry: new Circle(center,radius),name: ''});  vectorSource.addFeature(iconFeature);
}

定义添加点、线、面、圆形方法。

addPoint([114.298572,30.584355],'湖北省');addLine([[94.32269717249045,31.468091544570086],[100.02042024648048,30.202469763220904],[105.9291668213466,29.710279044570086]]);addPolygon([[[107.75806667905127,27.460281190337298],[106.28087802282712,24.155594495000003],[109.5166200031102,23.804031995000003],[110.1497012391125,25.561844495000003],[107.75806667905127,27.460281190337298]]]);addCircle([115.28468692740245,27.460281190337298],1.9542399801319874)

添加一些测试数据。点的坐标是一个一维数组，线是一个二维数组，面是一个三维数组。圆形是一个中心点和一个半径，半径单位和当前map的投影有关（本例中为projection: 'EPSG:4326'），这里是经纬度，所以单位为度。

 //获取矢量图层上的数据function getVectorData(){infoDiv.innerHTML = '';var fs = vectorSource.getFeatures();var fsLength = fs.length;if(fsLength>0){for(var i=0;i<fsLength;i++){var f = fs[i];printFeatureCoordenate(f,"")}}}const getBtn = document.getElementById('getBtn');getBtn.onclick = getVectorData;

定义获取矢量图层上数据的方法。注册到按钮的点击事件上。

获取结果如下：