OpenLayers6入门，OpenLayers选择拖拽功能，OpenLayers实现对地图上的任意要素进行选择和拖拽

已于 2024-05-27 23:17:53 修改
阅读量1.4k 收藏 2
点赞数 1
分类专栏： # Vue+OpenLayers6入门 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： javascript OpenLayers OpenLayers选择拖动 拖拽编辑要素 地图上拖动编辑
于 2023-04-14 15:29:54 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/130154708
版权
OpenLayers6一本通 同时被 3 个专栏收录
132 篇文章 10 订阅 ¥159.90 ¥99.00
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥99.00
订阅专栏
Vue+OpenLayers6入门
69 篇文章 92 订阅 ¥69.90 ¥99.00
订阅专栏

专栏目录：
OpenLayers6入门教程汇总目录

前言

OpenLayers实现对地图上的任意要素进行选择和拖拽，可以选择并拖动要素点、圆形、线段、多边形、图标等等任意要素图形。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
  1. 使用Yarn安装依赖
yarn add ol

vue中如何使用：

vue项目使用请参考这篇

了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
订阅专栏
OpenLayers6入门，OpenLayers实现在地图上拖拽编辑修改绘制图形
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-27 216
OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形》，那么本章将在此基础上实现图形的拖拽编辑功能，方便我们对绘制后的图形进行修改操作。
Openlayers 教程 04 - 图形要素对象 Feature 的移动和编辑
linzi19900517的博客
06-05 4640
Openlayers 开发中经常会遇到需要操作图形要素 Feature，本示例介绍单体要素 Feature 和 矢量图层所有要素的编辑和平移操作。
openlayers实现图标拖动获取坐标
10-14
主要为大家详细介绍了openlayers实现图标拖动获取坐标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers6实现可拖拽点位，点位可拖拽移动点击移动
songxiao1124的博客
08-31 4607
openlayers6实现可拖拽点位 实现功能：需要实现地图上点击出现点位，此点位可拖拽，并且点击移动，从而实现地图选点的功能 使用技术：openlayers6 + react + 高德地图底图 1. 第一步：初始化地图容器 html代码：新增dom节点 <div id="testMap" style={{width: '100vw', height: '100vh'}}></div> 2. 第二步：初始化地图 js代码：初始化时调用方法初始化高德地图 const lngCente
072：vue+openlayers拖拽放大所选区域（DragPan示例代码）
大剑师兰特的GIS世界
08-19 530
本示例的目的是介绍演示如何在vue+openlayers中通过DragPan方法拖拽实现放大所选区域的效果。操作方式：按住shift，然后用鼠标拖拽。
Openlayers API-Select点击要素图层
ANNENBERG的博客
07-08 1733
Select是交互事件中的一种，用于选择矢量图层上的几何图形，添加选择交互事件后，点击地图上的几何图形或者将鼠标移动到几何图形上时，将获取到几何图形的相关信息，我们可以将选择的几何图形进行高亮显示。使用起来很简单，首先创建一个Select对象，然后再使用Map的addInteraction方法添加该对象。选择的事件包括Single-click, Click, Hover ，Alt+Click等。可以使用condition属性来指定事件类型。 var select = new ol.interact.
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
我只是个很菜的前端
09-30 9775
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
Vue+OpenLayers7入门到实战：OpenLayers选择拖拽功能，OpenLayers实现对地图上的任意要素进行选择和拖拽
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-29 238
本章介绍如何使用OpenLayers7在地图上进行任意要素进行选择和拖拽，可以选择并拖动要素点、圆形、线段、多边形、图标等等任意要素图形。
openlayers加载瓦片地图并手动标记坐标点
04-29
通过以上步骤，你可以在OpenLayers加载的瓦片地图上手动添加和显示坐标点。如果需要处理多个标记点，只需重复创建特征对象和矢量图层的步骤即可。同时，OpenLayers提供了丰富的API，可以实现更复杂的交互功能，如...
openlayers3点选、框选、多边形选择demo
02-05
通过分析和学习这个示例，你可以更好地理解OpenLayers 3的事件系统、几何对象和交互功能，从而在自己的项目中灵活地实现地图要素的选择功能。 在实际开发中，你还需要考虑一些额外的因素，比如选择操作的性能优化，...
openlayers遮罩示例
01-29
这个示例将展示如何在OpenLayers中实现地图遮罩功能，以便在地图上显示半透明覆盖层，从而突出显示特定区域或进行其他视觉效果。 首先，确保你已经安装了Node.js环境，因为我们将使用npm（Node包管理器）来管理项目...
openlayers加载静态图片地图
10-31
同时，OpenLayers 的强大功能和灵活性使得开发复杂地图应用成为可能，无论是简单的底图展示还是丰富的交互式地图应用。 在压缩包文件 "olDemo" 中，可能包含了实现上述功能的示例代码，你可以通过查看和运行这些...
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2031
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
openlayer拖动图标消失以及绘线穿越地图问题
qq_35332639的博客
04-25 846
最近用openlayer开发地图网站遇到了一个问题,我绘制的linestring线条，在穿越LONGITUDE：180 到-179的时候，会穿越地图一圈。 当我把LONGITUDE设为181而非-179时，则不会穿越地图一圈，但在放大或拖拽地图时，线条会消失。 放大消失 努力了好久，最终找到解决方法。 当绘制的特性需要穿过180 到 -180时 VectorSource 的 warpx属性应设为:False. new VectorLayer({ source: new VectorSource
openlayers 入门（28）自由绘制图形
qq_53079432的博客
10-20 114
在Draw类下 加一个freehand属性就好
【OpenLayers】VUE+OpenLayers+ElementUI加载WMS地图服务
weixin_41607453的博客
04-08 2527
修改vue项目的端口可以通过项目根目录下package.json文件修改serve：“serve”: “vue-cli-service serve --port 8002”启动vue项目：进入项目的目录下，执行npm run serve 启动。/vue.ps1，因为在此系统上禁止运行脚本，有关详细信息，…在配置好以上环境后，下面就可以正式实现加载wms地图服务的功能。安装完成后，控制台输入node -v，显示版本号即安装成功。安装完成之后控制台输入vue -V，显示版本号则安装成功。
OpenLayers入门，OpenLayers加载GeoServer发布的WMS地图服务作为底图
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
06-20 1284
在此之前我们已经实现了WMTS服务的加载（可以参考:《Openlayers通过计算matrixIds和resolutions方式加载WMTS地图服务，不需要解析WMTSCapabilities文档方式加载WMTS地图服务》），本章写一下如何加载GeoServer发布的WMS地图瓦片到地图上作为底图的功能。
Openlayers的交互功能（七）——平移图斑
m0_46410110的博客
10-08 508
ol-ext是OpenLayers的扩展。主要包含控件，交互，弹出窗口等功能。类似于WEB前端的UI框架，是一个成熟的扩展，可以节省时间、避免问题。本文对图斑的平移进行了简单的介绍，后续将继续更新Feature的框选平移操作。如有错误，请批评指正！欢迎关注星林社区文章将同步更新在星林社区中！
Sortable.js板块拖拽示例
最新发布
w11111xxxl的博客
07-14 780
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
openlayers对线进行拖拽
05-27
要对 OpenLayers 中的线进行拖拽，可以使用 `ol.interaction.Pointer` 类来实现。下面是一个简单的示例代码： ```javascript // 创建一个线要素 var lineFeature = new ol.Feature({ geometry: new ol.geom.LineString([[0, 0], [50, 50]]) }); // 创建一个图层，将线要素添加到图层中 var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [lineFeature] }) }); // 创建一个地图，将图层添加到地图中 var map = new ol.Map({ target: 'map', layers: [vectorLayer], view: new ol.View({ center: [0, 0], zoom: 2 }) }); // 创建一个 Pointer 交互对象 var pointerInteraction = new ol.interaction.Pointer({ handleDownEvent: function(event) { // 获取当前点击的地图坐标 var coordinate = event.coordinate; // 获取当前选中的要素 var feature = map.forEachFeatureAtPixel(event.pixel, function(feature) { return feature; }); // 如果选中的是线要素，则开始拖拽 if (feature === lineFeature) { // 设置拖拽状态为 true this.dragging = true; // 记录当前拖拽的地图坐标 this.coordinate = coordinate; } }, handleDragEvent: function(event) { // 如果当前处于拖拽状态，则更新线要素的坐标 if (this.dragging) { var deltaX = event.coordinate[0] - this.coordinate[0]; var deltaY = event.coordinate[1] - this.coordinate[1]; lineFeature.getGeometry().translate(deltaX, deltaY); // 更新当前拖拽的地图坐标 this.coordinate = event.coordinate; } }, handleUpEvent: function(event) { // 设置拖拽状态为 false this.dragging = false; // 清空当前拖拽的地图坐标 this.coordinate = null; } }); // 将 Pointer 交互对象添加到地图中 map.addInteraction(pointerInteraction); ``` 在上面的代码中，我们首先创建了一个线要素和一个图层，然后将线要素添加到图层中，将图层添加到地图中。接着，我们创建了一个 `ol.interaction.Pointer` 对象，并实现了 `handleDownEvent`、`handleDragEvent` 和 `handleUpEvent` 方法来处理拖拽事件。当用户点击地图时，`handleDownEvent` 方法会检查是否选中了线要素，如果是，则记录当前拖拽的地图坐标，并将拖拽状态设置为 true。当用户拖动鼠标时，`handleDragEvent` 方法会根据鼠标移动的距离更新线要素的坐标，并记录当前拖拽的地图坐标。当用户释放鼠标时，`handleUpEvent` 方法会将拖拽状态设置为 false，清空当前拖拽的地图坐标。最后，我们将 Pointer 交互对象添加到地图中，完成线的拖拽。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值