Openlayers：Polygon绘图工具

最新推荐文章于 2024-05-17 22:54:00 发布
最新推荐文章于 2024-05-17 22:54:00 发布
阅读量1k 收藏
点赞数 1
分类专栏： WebGIS 文章标签： WebGIS Openlayers 绘图工具 地图开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43524214/article/details/127434364
版权
本文介绍了如何在OpenLayers v7.1.0中使用DrawPolygon工具进行地图上的多边形绘制和编辑。详细讲解了相关类的使用，包括地图交互类ol.interaction.Draw和ol.interaction.Modify，以及几何要素格式转换类ol.format.WKT和ol.format.GeoJSON。此外，还提到了ol.map的空间参考信息获取，并给出了完整的DrawPolygon类代码和使用示例。
摘要由CSDN通过智能技术生成

        Openlayers官网地址为：OpenLayers - Welcome，目前已更新至v7.1.0。官网中也提供了绘制各种Geometry->Feature几何要素的示例Demo，如：Draw and Modify Geodesic Circles、Draw Shapes等，如下为根据官网例子定义的DrawPolygon绘图工具，支持绘制任意多边形、修改多边形顶点，内置了多边形Geometry转换为WKT或者GeoJSON的函数接口。

目录

基本效果

相关的类

地图交互类

几何要素格式转换类

ol.map：空间参考信息获取

绘图类：DrawPolygon

使用示例

基本效果

        基本效果如下图所示，

了解本专栏 订阅专栏 解锁全文 超级会员免费看
是席木木啊
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
270：vue+openlayers 利用 MultiPolygon 显示多个多边形
大剑师兰特的GIS世界
06-21 688
本示例介绍如何在vue+openlayer中利用 MultiPolygon 显示多个多边形。在OpenLayers中，MultiPolygon是一种几何对象，它可以表示由多个Polygon组成的几何集合。
openlayers 不规则polygon 按一定范围扩大边界
08-14
openlayers 不规则polygon 按一定范围扩大边界，利用turf.js 缓冲区 buffer ,两行代码实现。输入指定半径要素计算缓冲区，支持的单位是英里、公里和度。
OpenLayers - 创建多边形Polygon
weixin_34195142的博客
10-08 7748
OpenLayers版本：4.6.4 叨叨： 本来这不应该成为一个问题，也不值得专门写一篇文章，尤其是对一个已经用过各种MapAPI（Google、百度、高德、SmartEarth...）的人来说，但就是这个本来以为3分钟解决的问题我却用了至少30分钟才把坑填完，最后发现OpenLayers的好多设计理念、思路都和之前用过的API大不相同。 需求： 需求很简单，其实就是用代码把一串经纬度坐标表示的...
openlayers：实现画多边形（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 283
openlayers：实现画多边形（附完整源码）
Openlayers 踩坑Polygon（传了没闭合的坐标串）
guzicheng1990的博客
06-27 1321
Openlayers踩坑
Openlayers 教程 32 - 通过 Feature（polygon）创建网格图层
linzi19900517的博客
12-20 1182
Openlayers 教程 - 通过 Feature（polygon）创建网格图层。
openlayers开发&绘制点、圆、多边形
yGIS
04-23 8678
这个例子是使用openlayers来绘制矢量点、圆、和polygon的。首先需要创建一个地图。如下的代码。注意这里接入的是osm地图，相应的设置地图飞至的中心点，缩放层级。 var flyPt= ol.proj.fromLonLat([106.671670,26.409000]); map = new ol.Map({ target:'map', ...
vue3 + openlayers---绘制Feature（Polygon）
最新发布
QDxin_xyz的博客
05-17 252
【代码】vue3 + openlayers---绘制Feature（Polygon）
Openlayers实现图形绘制
10-14
在OpenLayers中实现图形绘制是一项常见的任务，尤其对于地理信息系统（GIS）开发人员来说，它提供了丰富的功能来绘制和编辑地图上的几何形状。OpenLayers是一个强大的JavaScript库，用于在Web浏览器中显示地图，并且...
openlayers实现地图测距测面
10-14
总的来说，OpenLayers 提供了丰富的API和工具，使得在Web应用中实现地图测距和测面变得相对简单。通过创建交互、监听事件、处理用户输入和绘制几何图形，你可以构建出强大的地图测量功能。记住，为了获得最佳效果，...
OpenLayers 画点、线、及删除点、线 封装的js工具类
10-12
在这个"OpenLayers 画点、线、及删除点、线 封装的js工具类"中，我们可以找到一系列实用的功能，方便开发者快速实现地图上的绘图和编辑操作。 首先，让我们详细了解如何在OpenLayers中绘制点和线： 1. **绘制点**...
Openlayers测距测面积
02-01
总的来说，OpenLayers提供了强大的工具来实现地图上的测距和测面积功能。通过创建Vector图层、添加绘图控件、进行投影变换以及利用数学公式计算距离，我们可以构建出一个完整的测量系统，使用户能够在Web地图应用中...
openlayer在线标绘，并实现增删改查
09-16
2. **在线标绘**：OpenLayers 提供了绘制工具，可以方便地在地图上绘制点、线和面。用户可以通过交互式的绘图控件来添加这些要素。点可以用Point，线用Polyline，面用Polygon。你可以自定义绘制事件监听器，比如开始...
Openlayers 教程 24 - 多面、多线、多点对象与单面、单线、单点对象的转换
linzi19900517的博客
09-05 2990
项目中偶然遇到个需求，因为安卓端数据类型问题，想把多个面图形要素转为一个多面的图形要素。因为数据存在数据库，所以想通过 postgis 的函数，直接转换就行。经过尝试，没找到合适函数，后来想到 openlayers 中应该有转换方法，于是使用 openlayers 做了个转换的工具类，这里记录一下。
Vue+Openlayers实现在地图上绘制多边形Polygon,坐标数组三层赋值，否则不显示
BADAO_LIUMANG_QIZHI的博客
04-01 5187
场景 Vue+Openlayers实现地图上绘制线： Vue+Openlayers实现地图上绘制线_霸道流氓气质的博客-CSDN博客 上面实现添加点和线，怎么实现添加面/多边形Polygon 注： 博客：霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、引入所需模块 //导入基本模块 import "ol/ol.css"; import Map from "ol/Map.
openlayers开篇 - GIS基础知识
sky___Show的博客
11-09 249
GIS 是地理信息系统的简称，这里比较喜欢 ESRI 对它的解释：地理信息系统 (GIS) 是一个创建、管理、分析和绘制所有类型数据的系统。GIS将数据连接到地图，将位置数据（事物所在位置）与所有类型的描述性信息（事物在该位置的情况）集成到一起。这可以为适用于自然科学和几乎所有行业的制图和分析提供基础。GIS帮助用户了解模式、关系和地理环境。其优势包括改善沟通、提高效率以及更好地管理和决策。
openlayer绘制多边形
大家好，我是+V
03-28 3123
openlayer 绘制多边形 /*** 绘制多边形 points：多边形顶点组成的列表 */ drawPolygon(points) { let layer = this.getLayerFromMap(this.map, 'polygon') // 先查看一下之前是否存在，如果存在先移除 if (layer) { this.map.removeLayer(layer) } let
使用openlayers3绘制polygon(多边形)
weixin_33843409的博客
08-10 4941
问题：在用openlayers3绘制多边形时老是出现问题,再用鼠标双击结束绘图时，图形也消失不见原因一：在代码中多次用到source:new ol.source.Vector(),相当于多次实例化对象，改正，可以全局定义source=new ol.source.Vector()，然后在代码需要的地方直接调用变量名就可以了；原因二：在定义矢...
Openlayers6将圆（Circle）对象转化为多边形（Polygon）
xiao猪仙的博客
08-05 2854
Openlayers6将圆（Circle）对象转化为多边形（Polygon） 在openlayers中如何通过一个圆（ol.geom.Circle）对象得到一个（ol.geom.Polygon）对象呢？ 解决方法： openlayers的ol.geom.Polygon提供了fromCircle这个方法,这个方法就是通过一个圆得到一个正多边形，下面是Polygon.js里面fromCircle方法的源码。 可以结合API说明看到，方法有三个参数： 1.circle：一个ol.geom.Circle对象；
精通OpenLayers：WebGIS开发实战指南
OpenLayers的广泛应用在于其灵活性和与不同GIS平台的兼容性，使其成为WebGIS开发者的首选工具之一。 1. **WebGIS开发基础**：WebGIS是基于互联网的地理信息系统，它将地理信息与Web技术结合，使用户能够通过浏览器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

是席木木啊

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

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

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

打赏作者

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

抵扣说明：

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

余额充值