Openlayers实战，Openlayers如何设置米作为作为圆形的真实半径，解决圆形半径跟随地图缩放同时缩放的失真问题

已于 2023-08-02 17:43:08 修改
阅读量1.4k 收藏 2
点赞数 2
分类专栏： # Vue+OpenLayers6实战 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： javascript vue.js OpenLayers 圆形半径 圆形真实半径米
于 2023-06-01 23:05:32 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/130997622
版权
OpenLayers6一本通 同时被 3 个专栏收录 该专栏为热销专栏榜 第30名
132 篇文章 13 订阅 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6实战
53 篇文章 35 订阅 ¥69.90 ¥99.00
订阅专栏
本文介绍了OpenLayers中遇到的圆形半径失真问题，以及如何通过代码转换将圆形半径设置为实际的米单位，确保在地图缩放时保持正确比例。文章提供了Vue项目的使用示例和代码实现。
摘要由CSDN通过智能技术生成

专栏目录：
OpenLayers实战进阶专栏目录

前言

相信找到这篇文章的同学肯定遇到了Openlayers直接设置圆形半径（ radius）单位不准确的问题，而且失真严重。这是因为默认圆形半径设置的是浏览器像素大小，而不是真实地理信息中的半径长度。那么怎么进行转换成我们现实中的“米”这个单位呢，接着往下看就知道了。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
  1. 使用Yarn安装依赖
yarn
了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Openlayers 教程 09 - 以单位米为半径，绘制圆形图形要素
linzi19900517的博客
08-21 1308
Openlayers 教程 - 以单位米为半径，绘制圆形图形要素。
Openlayers3 绘制圆
04-26
NULL 博文链接：https://jjxliu306.iteye.com/blog/2371473
解决使用openlayers绘制圆形半径偏小，总有偏移的问题
weixin_44485276的博客
06-06 150
【代码】解决使用openlayers绘制圆形半径偏小，总有偏移的问题。
vue 项目使用 openlayers根据半径绘制圆形、绘制多边形
大家好，我是+V
06-17 2854
这里的绘制圆是指当后台返回数据，告诉你以某个经纬度坐标为圆心，或者是顶点，以 r 为半径绘制，不是鼠标手动绘制。首先绘制圆，首先有一个数据源和一个图层来存放绘制的圆形，这个很简单。然后创建变量自己该就可以，我估计都搞openlayer了，这些基础应该不至于不知道，我这边就写关键代码，我想应该没问题，我用的是默认3857坐标，不是4326。 好的，通过上面的代码实现了创建一个图层在地图上来放置绘制的圆形。接下来就是向这个数据源去添加圆形，这个呢，还是嘛，和我之前写的博客差不多，那几部分相互嵌套，我还是把图在贴
openlayers矢量圆形获取圆心和半径
Museions的开心博客
11-02 5166
在地图初始化前定义的交互：   var interaction = new ol.interaction.Draw({ source: this.source, type:('Circle'), });           需要使用变量保存起来，这里使用 interaction 保存。 获取圆心和半径需要结合交互：如下  ...
openlayers绘制圆形区域，消除误差的一种方法
wchwdog13的博客
05-10 822
大家如有新的见解或更好的方法实现，欢迎留言。效果如下，该圆为绿色的椭圆，经仔细观察，该圆实际上是一个64边形。经过测量，该圆的实际半径为199243米，误差明显变小。后来，我采用如下代码实现圆形区域的绘制，仍然绘制以坐标（1,1）为中心，200000米为半径的圆。一开始，我使用如下代码实现圆形区域的绘制，绘制以坐标（1,1）为中心，200000米为半径的圆。我需要以某点为圆心，以某长度（单位米）为半径，在地图上绘制圆形区域。效果如下，经过测量，该圆的实际半径为186135米，偏小。
openlayer 画圆Circle实际半径解决方案
qq_36208263的博客
01-06 3157
openlayers 获取Circle实际半径距离
OpenLayers加载缩放控件使用方法详解
10-14
OpenLayers 是一个强大的开源JavaScript库，用于在网页上创建交互式地图应用。它支持多种地图数据源，包括WMS、WMTS等，并且提供了丰富的地图控制和功能。本篇文章将详细讲解如何在OpenLayers中加载和使用缩放控件。...
天地图开发实战：Vue结合OpenLayers实现动态点位地图
最新发布
06-06
地图初始化：详细讲解了如何创建地图实例、配置地图视图、添加天地图服务作为底图，并设置地图的交互控件。 点位信息处理：展示了如何接收外部传入的点位数据，并在地图上以图标形式展示这些点位。 地图交互：介绍了...
openlayers笔记1：加载矢量地图数据的方法以及应对跨域问题的解决方法
01-08
OpenLayers笔记1：加载矢量地图数据的方法以及应对跨域问题的解决方法加载矢量地图数据的两种方法加载本地geojson格式文件出现的跨域问题及解决方法。向geoserver请求WFS服务出现的跨域问题及解决方法。 加载矢量...
openlayers加载瓦片地图并手动标记坐标点
04-29
OpenLayers 是一个强大的开源JavaScript库，用于在Web浏览器中创建交互式地图应用。它支持多种数据源，包括瓦片地图，使得开发者可以轻松地将地理信息集成到网站中。本教程将详细介绍如何使用OpenLayers加载瓦片地图...
使用openlayers加载离线地图实例
10-06
在IT行业中，前端开发是构建Web应用程序的关键部分，而OpenLayers是一个流行的JavaScript库，用于创建交互式的、基于Web的地图应用。本实例将详细介绍如何利用OpenLayers加载离线地图，并通过mui将其打包成移动应用...
8. OpenLayers 绘画元素，画点、画线、画面、画圆（结合Vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
07-01 5184
本文介绍了如何在Vue中使用OpenLayers库来实现鼠标绘制点、线、面、圆的功能，并提供清空绘画和退出绘制模式的操作。首先，我们需要创建一个地图容器，并添加底图和矢量图层。底图使用了ArcGIS World Street Map，矢量图层用于显示用户的绘制结果。然后，我们通过添加Draw交互控件来实现绘制功能。每个绘制按钮都有一个点击事件处理函数，调用addInteraction方法来添加相应类型的绘制控件。最后，我们提供了清空绘制和退出绘制模式的操作。
OpenLayers入门，使用OpenLayers叠加多边形、圆形、线段和点要素到地图上
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-13 1467
本章详细介绍一下如何使用OpenLayers叠加多边形、圆形、线段和点要素到地图上，并设置样式。要叠加这些元素到地图上，首先要理解OpenLayers的结构。就如同photoshop这些图像编辑软件和游戏引擎一样，OpenLayers是基于图层(layer)结构设计的，通过创建不同图层叠加到canvas画板上实现地图效果。那么闲话少讲，让我们来看看如何快速叠加多边形、圆形、线段和点要素到地图上。
openlayers根据半径绘制圆形，多圆连线并标记距离
大家好，我是+V
08-24 1812
其实这个效果很好实现的，之前有几篇博文呢，关于 openlayers 根据半径绘制圆形，根据经纬度坐标绘制连线啥的都有涉及过，所以说如果要想实现今天想做的功能拼接一下就可以了，做一个快乐的代码裁缝。
openlayer画的圆比实际的小？4326和3857投影的不同
江湖小葡萄
10-09 826
地图上显示地图和坐标都是投影坐标系（3857），4326坐标系主要是存储数据；我们获取之后要进行处理，转换成4326的坐标，才能进行数据使用以及其他的操作。
openlayers6 踩坑系列（二）距离转换公式
qq_39404437的博客
11-11 2372
3857坐标系下和4326坐标系下的距离转换
比例尺分辨率转换（openlayers）
Yuanben_wuxin的博客
01-19 1650
比例尺分辨率转换（openlayers）
openlayers6如何解决设置圆半径样式会跟随地图缩放等级缩放问题
06-02
在 OpenLayers 6 中，可以通过监听地图视图的 `change:resolution` 事件，来实时更新圆形要素的半径长度。具体步骤如下： 1. 创建一个圆形要素，并添加到矢量图层中。 ```javascript const circle = new ol.Feature(new ol.geom.Circle([x, y], radius)); const vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [circle] }), 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.1)' }) }) }); ``` 2. 监听地图视图的 `change:resolution` 事件，并在事件处理函数中更新圆形要素的半径长度。需要注意的是，半径长度需要根据当前地图视图的比例尺和半径原始值来计算得出。 ```javascript map.getView().on('change:resolution', function() { const resolution = this.getResolution(); const radiusInMapUnits = radius / resolution; circle.getGeometry().setRadius(radiusInMapUnits); }); ``` 3. 最后，将矢量图层添加到地图中，并设置合适的中心坐标和缩放级别。 ```javascript const map = new ol.Map({ target: 'map', layers: [vectorLayer], view: new ol.View({ center: [x, y], zoom: 10 }) }); ``` 通过上述步骤，我们可以实现动态调整圆形要素的半径长度，使其在不同缩放级别下保持一致。需要注意的是，半径长度的单位需要与地图投影坐标系一致，如米或像素等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤姆猫不是猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值