openlayers6.x 获取点到线的距离

最新推荐文章于 2024-05-29 20:27:13 发布

MLAY

最新推荐文章于 2024-05-29 20:27:13 发布

阅读量1.3k

点赞数

分类专栏： Openlayers 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_32492777/article/details/121349239

版权

Openlayers 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这个博客展示了一个使用OpenLayers库在地图上绘制点和线段，并计算点到线段最近距离的示例。通过JavaScript代码，创建了地图，加载了高德地图瓦片服务，添加了矢量图层以显示用户位置、测试线段、最近点和距离标记。最后，计算并显示了从人员位置到线段的最短距离。

摘要由CSDN通过智能技术生成

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css" type="text/css">
    <style>
		html,body{
			height:100%;
			width:100%;
			padding:0px;
			margin:0px;
		}
		.map {
		   height: 100%;
		   width: 100%;
		}
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
    <title>点到线的距离</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
		var map = new ol.Map({
			target: "map",
			view: new ol.View({
				center: [110.26499613189605, 39.04069115959695],
				zoom: 12,
				projection: "EPSG:4326",
			}),
		});
		var gaodeLayer = new ol.layer.Tile({
			source: new ol.source.XYZ({
				url: "http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
			})
		});
		map.addLayer(gaodeLayer);
		var vectorSource = new ol.source.Vector();
		var vectorLayer = new ol.layer.Vector({
			source: vectorSource,
			
		});
		map.addLayer(vectorLayer);
		var userPoint = [110.26499613189605, 39.04069115959695] //人员位置
		var testLine = [
			 [110.32610758209135, 39.051162503591094],
			 [110.28799875640776, 38.986961148610625]
		]//测试线段
		var userFeature = new ol.Feature({
			geometry:new ol.geom.Point(userPoint)
		})
		var lineFeature = new ol.Feature({
			geometry:new ol.geom.LineString(testLine)
		})
		vectorSource.addFeatures([userFeature,lineFeature]);
		var lineGeomtry = lineFeature.getGeometry()//获取线段的geometry
		var closestPoint = lineGeomtry.getClosestPoint(userPoint)//距离人员位置最近线段上的点
		var closestPointFeature = new ol.Feature({
			geometry:new ol.geom.Point(closestPoint)
		})
		var closestLineFeature = new ol.Feature({
			geometry:new ol.geom.LineString([userPoint,closestPoint])
		})
		closestLineFeature.setStyle(new ol.style.Style({
			stroke: new ol.style.Stroke({
				color: "rgba(0, 128, 0, 0.8)",
				width: 3,
				lineDash: [10, 10],
			}),
		}))
		vectorSource.addFeatures([closestPointFeature,closestLineFeature]);
		var length = ol.sphere.getDistance(userPoint,closestPoint)
		var labelFeature = new ol.Feature({
			geometry: new ol.geom.Point(closestLineFeature.getGeometry().getCoordinateAt(0.5)),
			name: length.toFixed(2) + " m"
		});
		var labelStyle = new ol.style.Style({
			text: new ol.style.Text({
				font: "12px Calibri,sans-serif",
				fill: new ol.style.Fill({
					color: "rgba(0, 0, 0, 1)",
				}),
				backgroundFill: new ol.style.Fill({
					color: "#FFCC33",
				}),
				text: labelFeature.get("name"), //文本内容
				padding: [2, 2, 2, 2],
				textBaseline: "bottom",
				offsetY: -12
			}),
			image: new ol.style.RegularShape({
				radius: 6,
				points: 3,
				angle: Math.PI,
				displacement: [0, 8],
				fill: new ol.style.Fill({
					color: "#FFCC33",
				})
			})
		});
		labelFeature.setStyle(labelStyle)
		vectorSource.addFeatures([labelFeature]);
    </script>
  </body>
</html>