要求
项目要求画出地图上河流的流向。
实现
geoserver发布了河流的图层,描出了河流的点位。
导出geojson文件,拿到各个点的位置。
在地图上画出各个点。
静态轨迹
先画出地图,本项目采用的是天地图。
再叠加河流图层,绘制出各个点。
代码
//获取geojson文件的数据
axios.get('/json/bmskline.geojson').then(res => {
let arr = res.data.features[0].geometry.coordinates[0]
console.log('线数据', arr)
this.addLine(arr)
})
//画线
addLine(points) {
const that = this;
var lineArr = [];
points.forEach((sub, index) => {
lineArr.push([sub[0], sub[1]]);
});
var line = new Feature({
geometry: new LineString(lineArr),
});
line.id = "line";
var starPoint = new Feature(new Point([points[0][0], points[0][1]]));
starPoint.name = "起";
var endPoint = new Feature({
geometry: new Point([
points[points.length - 1][0],
points[points.length - 1][1],
]),
});
endPoint.name = "终";
this.pointTranslation([points[0][0], points[0][1]]);
var vector = new VectorLayer({
source: new Vector({
features: [starPoint, endPoint, line],
}),
zIndex: 10,
style: function(feature) {
var geometry;
if (feature