Vue+OpenLayers7入门到实战：OpenLayers实现在地图上拖拽编辑修改绘制图形

原创 已于 2024-05-27 23:23:59 修改 · 419 阅读 · 0 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#vue.js #前端 #javascript #OpenLayers #拖拽编辑修改图形 #绘制图形编辑

于 2024-05-27 23:22:51 首次发布
本文介绍了如何使用OpenLayers7在Vue项目中实现地图上的图形拖拽编辑功能。首先，通过npm或Yarn安装依赖，然后详细讲解了在Vue中引入和使用OpenLayers7的方法。接着，阐述了实现图形拖拽编辑的核心知识点，包括ol的Modify编辑控件和Snap吸附控件。最后，给出了具体的代码实现，使读者能够快速掌握这一功能。

返回《Vue+OpenLayers7》专栏目录：Vue+OpenLayers7入门到实战

前言

本章介绍如何使用OpenLayers7在地图上拖拽编辑修改绘制图形。
在前面一章中，我们已经学会了如何绘制基础的三种图形线段、圆形和多边形：《Vue+OpenLayers7入门到实战：OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形》，那么本章将在此基础上实现图形的拖拽编辑功能，方便我们对绘制后的图形进行修改操作。

Vue+OpenLayers7入门到实战

二、依赖和使用

"ol": "7.5.2"
  1. 使用npm安装依赖
了解本专栏 订阅专栏 解锁全文
OpenLayers6入门，OpenLayers实现在地图上拖拽编辑修改绘制图形
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
05-27 755
OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形》，那么本章将在此基础上实现图形的拖拽编辑功能，方便我们对绘制后的图形进行修改操作。
OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制平行四边形
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-11 317
本章介绍如何使用OpenLayers在地图上使用实现鼠标拖拽方式绘制平行四边形。
openlayers叠加天地图经纬度投影瓦片
yrlzmm的专栏
03-04 3883
openlayers版本  Release 2.12 之前写了一篇openlayers叠加天地图魔卡托瓦片的文章，发现有朋友不知道怎么叠加经纬度（WGS84）投影的瓦片，今天在原来的基础上做了一些修改，发上来大家看看，标点、标线、标面的大家参考吧 openlayers 加载天地图地图 点击地图可获取鼠标点击位置屏幕坐标及经纬度
二十四、openlayers官网示例Custom Interactions——自定义交互实现在地图上移动、拖拽feature
aaa_div的博客
05-22 1021
然后创建了一个类继承原本的PointerInteraction，将四个事件作为参数传递给PointerInteraction。这里移动要素用了一个geometry.translate()方法，如果我们自己写方法来完成移动的话会比较麻烦。重新定义了一个Drag类，我放在了utils下的Drag.js中便于多次使用。这个示例介绍了如何在地图上自定义一个交互实现在地图上拖拽、移动要素。首先是加载了三个要素到地图上，一个点、一个多边形、一条线。可以看下源码中PointerInteraction的定义。
openlayers -----------坐标系篇（小贴士）
m0_54476873的博客
11-13 2436
openlayers 默认的坐标系的原点在左上角，向上为y轴正方向，向右为x轴正方向。 也就是说，地图投影到一个平面后，平面的左边对应着地球的西边，也是x轴负方向；平面上面对应地图的北面，也是y轴正方向。 但是并不是所有的瓦片地图都采用这样的坐标系，例如百度地图，它是将坐标系原点设为地图视图的中心点，因此坐标是有正负的，负值添加了 'M’ 前缀作为区分。 <div id="baiduMap" style="width: 100%"></div> <script>
openlayers：实现拖动、旋转和缩放 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-28 333
openlayers：实现拖动、旋转和缩放 (附完整源码）
operlayers绘制可拖动标牌
qq_65325528的博客
08-24 575
在地图上绘制可拖动的标牌，在地图的API中绘制自定义样式的标牌也就能使用Overlayer,将创建好的dom放入地图中，这样样式容易修改。然后连接地图的线和点就直接使用地图API正常绘制点、线即可。因此一个标牌包含三个元素，一个overlayer对象、点对象、线对象，然后正确修改偏移量就好。拖动时修改对象的相关属性就行。注意：overlayer对象不能放图层中，只能放在地图对象中，因此删除时必须在地图中删除，所以删除标牌时最好定义一个通用方法，从地图和矢量图层中查找和删除相关对象。
openlayers绘制虚线
qq_35987023的博客
10-11 1470
该属性是一个数组，用于定义虚线的样式，数组中的每个元素表示一个虚线段的长度。例如，[5, 10] 表示先画一个长度为 5 的实线，再画一个长度为 10 的空白，如此往复。在上面的代码中，通过创建一个 ol.style.Stroke 对象并将其作为 ol.style.Style 的 stroke 属性来设置线的样式。lineDash 属性被设置为 [5, 10]，表示虚线段的长度为 5，空白段的长度为 10。
Vue+OpenLayers7入门到实战：OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-26 799
本章介绍如何使用OpenLayers7在地图上实现图形绘制功能，OpenLayers地图实现在地图上绘制线段、圆形和多边形等基本图形。注意：本章需要用到Element-UI组件，可能需要额外安装依赖，这里跳过不详述，具体可参考Element-UI官方文档。
Vue+OpenLayers7入门到实战：OpenLayers实现鼠标拖拽方式绘制三角形，OpenLayers鼠标拖拽方式自定义绘制特殊图形
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-07 317
本章介绍如何使用OpenLayers7在地图上实现鼠标拖拽方式绘制三角形，OpenLayers鼠标拖拽方式自定义绘制特殊图形的功能。OpenLayers本身是可以通过多边形绘制来绘制自行绘制三角形的，但是这种绘制方式是通过鼠标点击每个点来实现线条链接的，不支持固定的三角形这种特殊图形绘制的。因此本章我们通过自定义OpenLayers的绘制事件，来让OpenLayers支持鼠标拖拽方式绘制三角形，让绘制三角形变得更加方便。
Vue+OpenLayers7入门到实战：鹰眼控件简单介绍，并使用OpenLayers7在地图上添加鹰眼控件
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-25 660
本章介绍OpenLayers7添加鹰眼控件到地图上的功能。在OpenLayers中，想要实现鹰眼控件，必须要新建一个数据源，且不能跟其他图层混用，相当于鹰眼是一个单独图层。
Vue+OpenLayers7入门到实战：OpenLayers选择拖拽功能，OpenLayers实现对地图上的任意要素进行选择和拖拽
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-29 574
本章介绍如何使用OpenLayers7在地图上进行任意要素进行选择和拖拽，可以选择并拖动要素点、圆形、线段、多边形、图标等等任意要素图形。
OpenLayers6入门，OpenLayers选择拖拽功能，OpenLayers实现对地图上的任意要素进行选择和拖拽
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-14 1925
OpenLayers实现对地图上的任意要素进行选择和拖拽，可以选择并拖动要素点、圆形、线段、多边形、图标等等任意要素图形。
openlayers绘制图标并定位到图标
前端开发者
03-20 1034
#openlayers绘制图标并定位到图标 文档 http://openlayers.vip/
openlayers+vue绘制水流——流动的虚线
qq_40020564的博客
01-04 4147
openlayers+vue绘制流动虚线的原理 openlayers绘制流动的虚线和canvas绘制流动虚线原理类似，利用linedash属性绘制一组线段和间距交替的虚线，然后利用偏移量，利用定时器循环，最后就可以实现水流效果； 话不多说直接上代码 <template> <div id="box"> <div id="map"></div> </div> </template> <script> import
openlayers：实现拖放图像矢量 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-28 228
openlayers：实现拖放图像矢量 (附完整源码）
vue+openlayers中实现图片展示与图片的拖拽和放大缩小（一）
浩星
11-26 6740
前言： openlayers中渲染图片是有多种方法的，Icon ，Image 等等都可以实现将图片放到地图上面，但是操作图片的话，方法比较少了，这里是配合 ol-ext 来实现的。 相关资料: 1、ol-ext官方地址：入口 2、ol-ext 对应的资料地址：入口 3、ol-ext 源码gitee地址：入口 4、openlayers 最新官网：入口 5、openlayers 官网api：入口 6、实际坐标转换视图坐标（getPixelFromCoordinate）：入口 ...
9. Openlayers 矢量元素整体拖动（结合Vue 详细教学）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
07-02 1391
通过Translate交互实现整体拖动功能。这样，用户可以在地图上拖动要素。
72.在 Vue3 中使用 OpenLayers 进行 Drag-and-Drop 拖拽文件解析并显示图形
小彭的博客
02-05 1111
交互组件，使得我们可以通过拖拽方式加载这些文件，并将其中的地理要素渲染到地图上。在 WebGIS 相关的开发中，我们经常需要加载各种地理数据文件，如。组件，该组件将用于初始化地图，并支持拖拽加载地理数据文件。首先，确保你的 Vue3 项目已经创建好，并安装了。等格式的数据到地图上，从而实现可视化展示。而 OpenLayers 提供了。，并动态解析并显示地理要素。，让我们一起来看看具体实现吧！希望本文能对你有所帮助！（OpenLayers）库。交互，我们可以轻松地拖拽。本文将详细介绍如何在。
SpringBoot+Vue+OpenLayers6
最新发布
08-28
在整合 Spring Boot、Vue 3 和 OpenLayers 6 进行地图开发时，需要从前端与后端的通信、地图渲染、数据交互等多个方面进行设计和实现。以下是详细的实现方案： ### 3.1 前后端通信架构设计 Spring Boot 作为后端...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值