openlayer5 半径不准 画圆_openlayers绘制圆形时设置半径以米为单位

在OpenLayers 5中使用ol.geom.Circle绘制圆形时,半径的单位取决于投影。官方文档提到radius是number类型,但未明确单位。实际上,半径单位与投影单位相同。要以米为单位设置半径,首先需要获取当前投影的单位,如'degrees', 'ft', 'm', 'pixels', 'tile-pixels' 或 'us-ft',然后使用getMetersPerUnit()方法进行单位转换。通过这种方法,可以确保半径值正确地转换为投影单位,从而准确绘制圆形。" 134782244,10468046,区块链安全:JOP实战分析与利用,"['区块链', '安全', '以太坊', '智能合约']
摘要由CSDN通过智能技术生成

ol.geom.Circle半径参数radius单位是什么?

ol.geom.Circle方法有三个参数其中radius便是半径,但是官方文档没有明确说明其单位,只是说radius是number类型,很坑。

ol.geom.Circle设置半径的单位是随投影的单位。

然后继续看api文档发现 setRadius 这个方法是设置图形的半径。然后一句关键的话,官网原话:

Set the radius of the circle. The radius is in the units of the projection.

翻译过来也就是ol.geom.Circle设置半径的单位是随投影的单位。

那么我们就有思路了,就先获取到当前投影然后在获取当前投影的单位,在进行单位转换。

获取当前投影的单位getUnits

在ol.proj.Projection找到getUnits方法可以获取当前投影的单位

投影有哪些单位 ?

Projection units: 'degrees', 'ft', 'm', 'pixels', 'tile-pixels' or 'us-ft'.

ol.proj.Units可以查看有哪些单位,发现其中有'm'就是米这个单位。

单位转换 ?

那么如果将当前投影的单位转换成'm'米呢?

继续寻找api发现在ol.proj.Projection有getMetersPerUnit()方法

Get the amount of meters per unit of this projection.

这样不管当前投影是什么单位都可以设置以米为单位的半径值了。

因为ol.geom.Circle设置半径的单位是随投影的单位,所以需要将单位m转换成投影的单位

到此问题已经解决,代码如下:

/**

* 获取转换后单位的半径

* @param {Number} radius 以米为单位的半径的值

* @returns {Number} circleRadius 以投影的单位为单位的半径的值

*/

let getRadius = (radius)=>{

let metersPerUnit = map.getView().getProjection().getMetersPerUnit();

let circleRadius = radius / metersPerUnit;

return circleRadius;

}

要在 OpenLayers绘制一个半径为5km的圆,可以按照以下步骤进行: 1. 首先,需要确定圆心的位置,可以使用 OpenLayers 中的 `ol.proj.fromLonLat()` 方法将经纬度坐标转换为投影坐标。假设圆心在北京市中心的经纬度为 `(116.3975, 39.9085)`,则可以这样写: ```javascript var center = ol.proj.fromLonLat([116.3975, 39.9085]); ``` 2. 接下来,需要计算圆的半径在投影坐标系下的长度。可以使用 OpenLayers 中的 `ol.sphere.getDistance()` 方法来计算两个点之间的距离。假设圆的半径为5km,则可以这样写: ```javascript var radius = 5000; // 半径长度,单位:米 var projection = map.getView().getProjection(); // 获取当前地图的投影坐标系 var centerCoord = ol.proj.transform(center, projection, 'EPSG:4326'); // 将圆心坐标转换为经纬度坐标 var circleCoord = [centerCoord[0] + 0.1, centerCoord[1]]; // 假设圆上一点的经度比圆心经度大0.1度 var circleRadius = ol.sphere.getDistance(center, circleCoord, projection) * radius / 1000; // 计算圆的半径长度,单位:千米 ``` 3. 最后,可以使用 OpenLayers 中的 `ol.geom.Circle` 类来创建圆形几何图形,并将其添加到地图中。可以这样写: ```javascript var circle = new ol.geom.Circle(center, circleRadius * 1000, 'XY'); // 创建圆形几何图形,半径长度单位:米 var circleFeature = new ol.Feature(circle); // 创建圆形要素 var circleLayer = new ol.layer.Vector({ // 创建矢量图层 source: new ol.source.Vector({ features: [circleFeature] }), style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', width: 2 }), fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.2)' }) }) }); map.addLayer(circleLayer); // 将圆形图层添加到地图中 ``` 上述代码中,`ol.style.Style` 类用于设置圆形的样式,`ol.style.Stroke` 类用于设置圆形轮廓线的样式,`ol.style.Fill` 类用于设置圆形填充色的样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值