OpenLayers 5 一个固定视口中心位置的球面测距demo

最新推荐文章于 2023-03-21 13:34:34 发布

战斗中的老胡

最新推荐文章于 2023-03-21 13:34:34 发布

阅读量1k

点赞数

分类专栏： Openlayers 开发高级技巧文章标签： openlayers 测距文字跟随

本文链接：https://blog.csdn.net/nudtcadet/article/details/102515330

版权

Openlayers 开发高级技巧专栏收录该内容

18 篇文章 63 订阅

订阅专栏

代码功能：使用屏幕中心点作为终点，平移地图时动态修改起始点（天津）到屏幕中心点所在位置的连线，并实时计算两点间的球面距离（EPSG:3857坐标系），显示距离的文字沿连线做出标记。

主要思想是借用了openlayers的渲染机制，监听tileLayer的postcompose事件，在回调函数中使用vectorContext的API动态绘制图形。

代码中的ol.js和ol.css请自备，版本是5.3.0

<!DOCTYPE html>
<html>

<head>
	<title></title>
	<link rel="stylesheet" href="./include/ol.css" type="text/css" />
	<script src="./include/ol.js"></script>
</head>
<style>
</style>

<body>

	<div id="map" class="map"></div>
	<script>
		var raster = new ol.layer.Tile({
			source: new ol.source.OSM()
		});

		var view = new ol.View({
			center: ol.proj.fromLonLat([116.403571, 39.909193]),
			zoom: 7
		});

		//准备一个空的矢量图层存放表示天津的点要素
		var sourceVector = new ol.source.Vector()
		var vector = new ol.layer.Vector({
			source: sourceVector
		});

		var map = new ol.Map({
			layers: [raster, vector],
			target: 'map',
			view: view
		});
		//以上是常规操作

		//添加天津的点要素
		var tianjin = ol.proj.fromLonLat([117.247504, 39.365469]);
		var tjFeature = new ol.Feature(new ol.geom.Point(tianjin));
		sourceVector.addFeature(tjFeature);

		//下面缓存几个样式，在postcompose的回调函数里复用，提高内存利用率
		var pointStyle = new ol.style.Style({
			image: new ol.style.Circle({
				radius: 5,
				fill: new ol.style.Fill({
					color: 'red'
				})
			})
		})

		var lineStyle = new ol.style.Style({
			stroke: new ol.style.Stroke({
				color: 'green',
				width: 3
			}),
		})

		var textStyle = new ol.style.Style({
			text: new ol.style.Text({
				//文字标签的文本内容在回调函数里动态修改
				font: 'bold 15px "Open Sans", "Arial Unicode MS", "sans-serif"',
				placement: 'line',
				fill: new ol.style.Fill({
					color: 'black'
				}),
				stroke: new ol.style.Stroke({
					color: 'white'
				})
			})
		});

		//监听瓦片图层的postcompose事件，在其渲染结束之后进行绘制
		raster.on("postcompose", function (evt) {
			//拿到vectorContex对象，开始绘制
			var vCtx = evt.vectorContext;
			var center = view.getCenter();
			var centerFeature = new ol.Feature(new ol.geom.Point(center));
			var distance = Math.floor(ol.sphere.getDistance(ol.proj.toLonLat(center), [117.247504,
				39.365469
			]));
			var lineGeom = new ol.geom.LineString([center, tianjin]);
			var lineFeature = new ol.Feature(lineGeom);
			//动态修改文字样式的文本
			textStyle.getText().setText("球面距离：" + distance + " 米")
			//计算文字倾斜角度
			textStyle.getText().setRotation(Math.atan2(center[1] - tianjin[1], -center[0] + tianjin[0]))
			//绘制中心点、连线和文字标签
			vCtx.drawFeature(centerFeature, pointStyle);
			vCtx.drawFeature(lineFeature, lineStyle);
			vCtx.drawFeature(lineFeature, textStyle);
		})
	</script>
</body>

</html>

把上面的例子稍作改动，可以做成一个连续打点测量路径总长度的实例：

<!DOCTYPE html>
<html>

<head>
	<title></title>
	<link rel="stylesheet" href="./include/ol.css" type="text/css" />
	<script src="./include/ol.js"></script>
</head>
<style>
</style>

<body>
	<input type="button" id="addInput" value="添加路径点">
	<div id="map" class="map"></div>
	<script>
		var raster = new ol.layer.Tile({
			source: new ol.source.OSM()
		});

		var view = new ol.View({
			center: ol.proj.fromLonLat([116.403571, 39.909193]),
			zoom: 7
		});

		var sourceVector = new ol.source.Vector()
		var vector = new ol.layer.Vector({
			source: sourceVector
		});

		var map = new ol.Map({
			layers: [raster, vector],
			target: 'map',
			view: view
		});

		var tianjin = ol.proj.fromLonLat([117.247504, 39.365469]);
		var tjFeature = new ol.Feature(new ol.geom.Point(tianjin));
		sourceVector.addFeature(tjFeature);

		var pointStyle = new ol.style.Style({
			image: new ol.style.Circle({
				radius: 5,
				fill: new ol.style.Fill({
					color: 'red'
				})
			})
		})

		var lineStyle = new ol.style.Style({
			stroke: new ol.style.Stroke({
				color: 'green',
				width: 3
			}),
		})

		var textStyle = new ol.style.Style({
			text: new ol.style.Text({
				font: 'bold 15px "Open Sans", "Arial Unicode MS", "sans-serif"',
				placement: 'line',
				fill: new ol.style.Fill({
					color: 'black'
				}),
				stroke: new ol.style.Stroke({
					color: 'white'
				})
			})
		});

		var endPoint = tianjin;

		var addButton = document.getElementById('addInput');
		var routeLine = null;

		addButton.onclick = function () {
			var centerFeature = new ol.Feature(new ol.geom.Point(view.getCenter()));
			if (routeLine===null) {
				routeLine = new ol.Feature(new ol.geom.LineString([endPoint, view.getCenter()]));
				sourceVector.addFeature(routeLine);
			}else{
				routeLine.getGeometry().appendCoordinate( view.getCenter());
			}
			sourceVector.addFeature(centerFeature);
			endPoint = view.getCenter();
		};


		raster.on("postcompose", function (evt) {
			var vCtx = evt.vectorContext;
			var center = view.getCenter();
			var centerFeature = new ol.Feature(new ol.geom.Point(center));
			var distance = (routeLine===null?
			Math.floor(ol.sphere.getDistance(ol.proj.toLonLat(center), ol.proj.toLonLat(endPoint)))			
			:Math.floor(ol.sphere.getLength(routeLine.getGeometry())));
			var lineGeom = new ol.geom.LineString([center, endPoint]);
			var lineFeature = new ol.Feature(lineGeom);
			textStyle.getText().setText("球面距离：" + distance + " 米")
			textStyle.getText().setRotation(Math.atan2(center[1] - endPoint[1], -center[0] + endPoint[0]))
			vCtx.drawFeature(centerFeature, pointStyle);
			vCtx.drawFeature(lineFeature, lineStyle);
			vCtx.drawFeature(lineFeature, textStyle);
		})
	</script>
</body>

</html>

效果图

战斗中的老胡

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
OpenLayers 5 一个固定视口中心位置的球面测距demo

代码功能：使用屏幕中心点作为终点，平移地图时动态修改起始点（天津）到屏幕中心点所在位置的连线，并实时计算两点间的球面距离（EPSG:3857坐标系），显示距离的文字沿连线做出标记。主要思想是借用了openlayers的渲染机制，监听tileLayer的postcompose事件，在回调函数中使用vectorContext的API动态绘制图形。代码中的ol.js和ol.css请自备，版本是5...
复制链接

扫一扫