openLayers画轨迹图，引用jeojson文件数据

最新推荐文章于 2025-09-22 09:19:14 发布

原创

最新推荐文章于 2025-09-22 09:19:14 发布 · 1.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍如何在openLayers中结合GeoJSON数据绘制静态和动态的河流流向轨迹。首先，通过geoserver发布河流图层并获取点位信息。接着，在地图上展示这些点位，创建静态轨迹。此外，还展示了如何实现动态效果，使得轨迹在地图上流动。

要求

项目要求画出地图上河流的流向。

实现

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