如何在openlayers中测量从圆心到边缘的距离
Posted
技术标签:
【中文标题】如何在openlayers中测量从圆心到边缘的距离【英文标题】：How to measure the distance from center of a circle to the edge in openlayers 【发布时间】：2021-03-07 16:55:08 【问题描述】：我想让用户能够找出他们从兴趣点到地图半径边缘的距离。我还想将该单位转换为公里、米或海里。
我了解所有多边形都以米为单位绘制。
我正在使用fromCircle 将圆转换为几何多边形。请帮我。我记得 openlayers 2 中有一个 getbound() 函数，但我找不到它来计算从兴趣点或地图中心到边缘的距离。我已经通过 *** 搜索了几天，但找不到确切的需求或适用于新版本 openlayers 的解决方案。
var vectorSource = vectorLayer.getSource();
var centerLongitudeLatitude = map.getView().getCenter();
var viewProjection = map.getView().getProjection();
var pointResolution = olProj.getPointResolution(viewProjection, 1, centerLongitudeLatitude);
console.log('pointResolution', pointResolution)
function addCirclePolygon(coordinates, radius=1600)
var _radius = radius/pointResolution;
// var circle = new Feature(new Circle(coordinates, _radius));
var circle = new Feature(new Circle(coordinates, _radius));
circle.setStyle(new Style(
stroke: new Stroke(
color: 'blue',
width: 3
),
fill: new Fill(
color: 'rgba(0, 0, 255, 0.1)'
)
));
var geom=circle.get('geometry');
if (circle instanceof Circle)
circle.set('geometry', fromCircle(geom));
vectorSource.addFeature(circle);
【问题讨论】：
【参考方案1】：点到圆心的距离是点到圆心的距离减去半径。
但 OpenLayers 有一个 getClosestPoint 方法，它适用于任何几何体：
var point1 = point.getGeometry().getCoordinates();
var point2 = circle.getClosestPoint(point1);
然后您可以使用毕达哥拉斯计算距离并调整点分辨率：
var dx = point1[0] - point2[0];
var dy = point1[1] - point2[1];
var meters = Math.sqrt(dx * dx + dy * dy) * pointResolution;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
</script>
<style>
html, body, .map
margin: 0;
padding: 0;
width: 100%;
height: 100%;
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var vectorLayer = new ol.layer.Vector(
source: new ol.source.Vector()
);
var map = new ol.Map(
layers: [
new ol.layer.Tile(
source: new ol.source.OSM()
),
vectorLayer
],
target: 'map',
view: new ol.View(
center: ol.proj.fromLonLat([0, 52]),
maxZoom: 20,
zoom: 12,
),
);
var vectorSource = vectorLayer.getSource();
var centerLongitudeLatitude = map.getView().getCenter();
var viewProjection = map.getView().getProjection();
var pointResolution = ol.proj.getPointResolution(viewProjection, 1, centerLongitudeLatitude);
console.log('pointResolution', pointResolution);
var circle;
function addCirclePolygon(coordinates, radius=1600)
var _radius = radius/pointResolution;
circle = new ol.Feature(new ol.geom.Circle(coordinates, _radius));
circle.setStyle(new ol.style.Style(
stroke: new ol.style.Stroke(
color: 'blue',
width: 3
),
fill: new ol.style.Fill(
color: 'rgba(0, 0, 255, 0.1)'
)
));
var geom=circle.get('geometry');
if (circle instanceof ol.geom.Circle)
circle.set('geometry', fromCircle(geom));
vectorSource.addFeature(circle);
addCirclePolygon(centerLongitudeLatitude);
map.on(
'click',
function (event)
var point1 = event.coordinate;
var point2 = circle.getGeometry().getClosestPoint(point1);
console.log(point1, point2);
var line = new ol.Feature(new ol.geom.LineString([point1, point2]));
vectorSource.addFeature(line);
var dx = point1[0] - point2[0];
var dy = point1[1] - point2[1];
var meters = Math.sqrt(dx * dx + dy * dy) * pointResolution;
console.log('meters to edge = ' + meters);
var dx = point1[0] - centerLongitudeLatitude[0];
var dy = point1[1] - centerLongitudeLatitude[1];
var toCenter = Math.sqrt(dx * dx + dy * dy) * pointResolution;
console.log('to center = ' + toCenter);
);
</script>
</body>
</html>【讨论】：
point.getGeometry().getCoordinates(); 是什么？因为如果我点击地图并获取圆心的坐标，我不能将它用作point1吗？ @迈克 如果你有一个特征，你需要获取它的坐标。如果您通过单击获得坐标，则单击坐标就是您的 point1。 你能给我一个工作的例子吗？当我使用 circle.getClosestPoint(point1) 时，我得到相同的坐标，所以 dx 和 dy 的结果都是零 (0)。 嗨 @Mike 感谢您的解决方案，但我想要的是在 map.on 上创建圆圈并测量从圆圈中心到边缘的距离。您提供的解决方案已经绘制了圆并测量了任何点到边缘的距离 已使用 var point2 = circle.getGeometry().getExtent() 但远远超出了圆的边界以上是关于如何在openlayers中测量从圆心到边缘的距离的主要内容，如果未能解决你的问题，请参考以下文章