openlayers矢量圆形获取圆心和半径

本文介绍如何通过OpenLayers库实现地图上绘制圆形,并详细解释了如何在绘制结束后获取圆心坐标及半径。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在地图初始化前定义的交互:

 

var interaction = new ol.interaction.Draw({
            source: this.source,
            type:('Circle'),
 });

 

 

 

 

 

需要使用变量保存起来,这里使用 interaction 保存。

获取圆心和半径需要结合交互:如下

 

interaction.on("drawend", function (event) {
            var centerLogLat,radius;
            var circle = event.feature.getGeometry();
            centerLogLat = circle.getCenter()
            radius = circle.getRadius();
            console.log("圆心坐标:"+centerLogLat+";半径:"+radius+"m")
})

 

 

 

 

 

输出的结果正是圆心坐标和半径!

要在 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、付费专栏及课程。

余额充值