Vue+OpenLayers7入门到实战：OpenLayers选择拖拽功能，OpenLayers实现对地图上的任意要素进行选择和拖拽

最新推荐文章于 2024-05-22 22:30:00 发布
原创 最新推荐文章于 2024-05-22 22:30:00 发布 · 574 阅读 · 1 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#vue.js #前端 #javascript #OpenLayers #绘制图形 #图形拖拽 #要素拖拽

本文介绍了如何在Vue项目中使用OpenLayers7实现地图上要素的选择和拖拽功能。通过创建选择和拖拽组件，控制组件激活状态，实现了对地图上的点、圆形、线段、多边形等图形的交互操作。提供了代码实现和测试效果演示。

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

前言

本章介绍如何使用OpenLayers7在地图上进行任意要素进行选择和拖拽，可以选择并拖动要素点、圆形、线段、多边形、图标等等任意要素图形。

Vue+OpenLayers7入门到实战

二、依赖和使用

"ol": "7.5.2"
  1. 使用npm安装依赖
npm install ol@7.5.2
  1. 使用Yarn安装依赖<
了解本专栏 订阅专栏 解锁全文
OpenLayers6入门，OpenLayers选择拖拽功能，OpenLayers实现对地图上的任意要素进行选择和拖拽
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-14 1925
OpenLayers实现对地图上的任意要素进行选择和拖拽，可以选择并拖动要素点、圆形、线段、多边形、图标等等任意要素图形。
Vue+OpenLayers7入门到实战：html原生网页如何使用OpenLayers7地图
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-24 783
尽管现在大部分网页都是使用Vue或者React开发了，但是还是有不少开发者使用的是网页原生html进行开发，或者是老项目维护的需要，所以为了照顾使用html原生网页的同学们，本章简单讲解一下如何使用原始html网页情况下使用OpenLayers7。《Vue+OpenLayers7：快速搭建Vue+OpenLayers7地图脚手架项目。从零开始构建Vue项目并整合OpenLayers7.5.2》。
二十四、openlayers官网示例Custom Interactions——自定义交互实现在地图上移动、拖拽feature
最新发布
aaa_div的博客
05-22 1019
然后创建了一个类继承原本的PointerInteraction，将四个事件作为参数传递给PointerInteraction。这里移动要素用了一个geometry.translate()方法，如果我们自己写方法来完成移动的话会比较麻烦。重新定义了一个Drag类，我放在了utils下的Drag.js中便于多次使用。这个示例介绍了如何在地图上自定义一个交互实现在地图上拖拽、移动要素。首先是加载了三个要素到地图上，一个点、一个多边形、一条线。可以看下源码中PointerInteraction的定义。
9. Openlayers 矢量元素整体拖动（结合Vue 详细教学）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
07-02 1391
通过Translate交互实现整体拖动功能。这样，用户可以在地图上拖动要素。
Vue+OpenLayers7入门到实战：OpenLayers实现鼠标拖拽方式绘制三角形，OpenLayers鼠标拖拽方式自定义绘制特殊图形
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-07 317
本章介绍如何使用OpenLayers7在地图上实现鼠标拖拽方式绘制三角形，OpenLayers鼠标拖拽方式自定义绘制特殊图形的功能。OpenLayers本身是可以通过多边形绘制来绘制自行绘制三角形的，但是这种绘制方式是通过鼠标点击每个点来实现线条链接的，不支持固定的三角形这种特殊图形绘制的。因此本章我们通过自定义OpenLayers的绘制事件，来让OpenLayers支持鼠标拖拽方式绘制三角形，让绘制三角形变得更加方便。
Vue+OpenLayers7入门到实战：OpenLayers如何使用全屏控件，来实现地图容器的全屏和退出全屏功能
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-16 397
本章介绍如何使用OpenLayers7在地图上使用地图全屏控件，来控制地图容器的全屏和退出全屏的功能。注意：这里的全屏控件全屏指的是地图容器全屏，并非整个网页全屏。《Vue+OpenLayers7入门到实战：OpenLayers如何实现地图全屏和退出全屏操作，实现指定网页节点全屏和退出全屏》
Vue+OpenLayers7入门到实战：OpenLayers7地图整合到Vue项目中的两种方式
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-24 724
OpenLayers本身已经是支持模块化，所以引入vue项目很简单。在vue中使用OpenLayers，最简单的是混合方式。直接在vue项目中和前端代码混在一起写，适合业务简单的项目。另一种是与前端代码分离的方式，前端写前端的代码。GIS写GIS的代码，各写各的，互不影响。最后前端以模块化的方式使用地图功能代码，这样可以实现gis地图功能代码复用，引入其他地方也可以复用。虽然两种方式最终实现功能是一样的，但是当代码越来越多，业务越来越复杂，后面代码分离方式是最优选，可以实现数据和地图功能的解耦。
Vue+OpenLayers7入门到实战：OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-26 799
本章介绍如何使用OpenLayers7在地图上实现图形绘制功能，OpenLayers地图实现在地图上绘制线段、圆形和多边形等基本图形。注意：本章需要用到Element-UI组件，可能需要额外安装依赖，这里跳过不详述，具体可参考Element-UI官方文档。
Vue+OpenLayers7入门到实战：OpenLayers7加载天地图
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
02-02 1007
本章介绍如何使用OpenLayers7在地图上加载天地图.天地图瓦片访问需要先到天地图申请key。天地图官网链接本文使用xyz方式加载天地图，并且介绍如何加载xyz格式天地图url，包括天地图纯底图（无标记）、卫星影像图和纯标记图（不含底图）
OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-14 2720
通过使用OpenLayers的Draw模块实现在地图上绘制线段、圆形和多边形（三角形、矩形等多边形）。
openlayers图层控制加入group layer功能
12-09
开发时,有时候图层很多,需要有同时打开关闭多个图层的功能,但是正式版的layerSwitcher不支持group layer功能. 从网上搜到layerSwitcher的扩展,是在源代码里添加对grouplayer的操作和事件支持. 对layerSwitcher.js进行修改后,需要重新build一下,生成新的openlayers.js
openlayers 显示点击位置的经纬度
cc1314_工作、学习有感
11-23 8798
openlayers 显示点击位置的经纬度
Vue+OpenLayers7入门到实战：OpenLayers地图鼠标点击事件使用，点击地图后弹框并显示当前位置经纬度
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-11 546
本章介绍如何使用OpenLayers7在地图上监听点击事件，以及监听地图点击事件后进行简单弹框并获取当前点击位置的经纬度并显示wgs84坐标位置和度分秒格式经纬度信息。
【openlayers-4】事件
WXG1011的博客
12-30 2102
openlayers事件
Vue + OpenLayers 实现地图拖拽和鼠标滚动控制
ByteZenith的博客
09-04 469
Vue + OpenLayers 实现地图拖拽和鼠标滚动控制在使用 Vue 和 OpenLayers 构建 Web 地图应用时，我们经常需要对地图进行拖拽和鼠标滚动控制。本文将介绍如何利用 Vue 和 OpenLayers 实现这些功能，并附上相应的源代码。
openlayers：实现图标拖动获取坐标（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 360
openlayers：实现图标拖动获取坐标（附完整源码）
openlayers6实现可拖拽点位，点位可拖拽移动点击移动
songxiao1124的博客
08-31 4960
openlayers6实现可拖拽点位 实现功能：需要实现地图上点击出现点位，此点位可拖拽，并且点击移动，从而实现地图选点的功能 使用技术：openlayers6 + react + 高德地图底图 1. 第一步：初始化地图容器 html代码：新增dom节点 <div id="testMap" style={{width: '100vw', height: '100vh'}}></div> 2. 第二步：初始化地图 js代码：初始化时调用方法初始化高德地图 const lngCente
OpenLayers要素拖拽
YOOSHIN的博客
01-15 2078
//拖拽要素 function dragFeature (_map,_dragEndCallback) { let selFeature = null; _map.on("pointerdrag", function (evt) { selFeature = _map.getFeaturesAtPixel(ev...
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）：入口 ...
Vue+OpenLayers：实现场景地图测距测面与交互操作
本文主要介绍了如何在Vue-cli 3.0项目中使用OpenLayers库来实现地图上的测距和测面功能。OpenLayers是一个强大的JavaScript库，用于在Web页面上创建交互式地图。在这个例子中，作者将地图作为一个公共组件，并利用...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值