OpenLayers6实战，OpenLayers自定义overlay弹框拖拽事件，点击地图后弹框并使用鼠标拖拽overlay弹框到任意地图位置并在弹框内容实时显示经纬度位置

已于 2024-04-01 17:10:59 修改
阅读量271 收藏 1
点赞数 4
分类专栏： Vue+OpenLayers6入门到实战 # Vue+OpenLayers6实战 OpenLayers6一本通 文章标签： 前端 javascript vue.js OpenLayers overlay弹框拖拽 自定义拖拽overlay
于 2024-04-01 17:09:05 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/137239527
版权
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
订阅专栏
本文介绍了如何在OpenLayers6中实现自定义overlay弹框拖拽功能。当点击地图后，弹出的overlay弹框可以被拖动到地图上的任意位置，并实时显示当前位置的经纬度。
摘要由CSDN通过智能技术生成

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

前言

本章使用OpenLayers实现自定义overlay弹框拖拽事件，点击地图后弹框并使用鼠标拖拽overlay弹框到任意地图位置并在弹框内容实时显示经纬度位置的功能。

本章在《OpenLayers6入门，OpenLayers地图鼠标点击事件使用，点击地图后弹框并显示当前位置经纬度》基础上增加overlay弹框拖拽事件

openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
    了解本专栏 订阅专栏 解锁全文
    汤姆猫不是猫
    关注
    • 4
      点赞
    • 踩
    • 1
      收藏
      觉得还不错? 一键收藏
    • 打赏
      打赏
    • 0
      评论
    专栏目录
    订阅专栏
    Openlayers Overlay基础及重点内容讲解
    大剑师兰特的GIS世界
    07-08 732
    Overlay这个组件在Openlayers 项目中是经常要用到的，使用的场景通常是作为弹窗，显示某点或者某区域的信息。它不是根据屏幕位置固定的，而是与地理坐标相关联，因此平移地图将移动 Overlay。常用的大致有。每个覆盖物都会生成对应的HTML元素，所以我们也可以使用css来修改去样式。
    vue-openlayers实现地图坐标弹框效果
    10-14
    在本文中，我们将深入探讨如何使用Vue框架与OpenLayers库结合来实现在地图上点击时显示坐标信息的弹框效果。Vue是一个流行的前端JavaScript框架，而OpenLayers则是一个功能强大的开源JavaScript库，用于创建交互式...
    vue+openlayers中实现图片展示与图片的拖拽和放大缩小（一）
    浩星
    11-26 5338
    前言： openlayers中渲染图片是有多种方法的，Icon ，Image 等等都可以实现将图片放到地图上面，但是操作图片的话，方法比较少了，这里是配合 ol-ext 来实现的。 相关资料: 1、ol-ext官方地址：入口 2、ol-ext 对应的资料地址：入口 3、ol-ext 源码gitee地址：入口 4、openlayers 最新官网：入口 5、openlayers 官网api：入口 6、实际坐标转换视图坐标（getPixelFromCoordinate）：入口 ...
    16-openlayers地图缩放控件、比例尺控件、鼠标经过地图显示经纬度控件
    最新发布
    fxshy的博客
    05-15 62
    15-openlayers地图缩放控件、比例尺控件、鼠标经过地图显示经纬度控件
    5. OpenLayers 添加Overlay文字信息（结合Vue 详细教程）
    全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
    06-24 3312
    本教程详细介绍了如何在Vue和OpenLayers项目中添加Overlay。Overlay是一种在地图上显示额外信息的方法，例如标签、弹出窗口等。我们将向您展示如何在已有的Vue2和OpenLayers项目中添加Overlay，并将其放置在多边形的中心位置。通过本教程，您将学会如何创建和定位Overlay，以及如何自定义其内容和样式。
    Openlayer OverLay 地图联动/拖动
    西柚2015地信小白GISer
    03-09 796
    目标： 通过尝试我的理解是“是否停止对OverLay的事件监听”（如有合理正确的解释请评论私信留言，一起探讨学习） stopEvent设置为“true”（不能点击叠置图层进行拖动） stopEvent设置为“false”（点击叠置图层允许进行拖动） ...
    vue3+ts+openlayers实现overlayer叠加层
    weixin_59855825的博客
    01-05 768
    OpenLayers 中的 Overlay 是一个可视化容器，用于在地图中的某个位置显示与地图控件、图层和要素不直接关联的信息。Overlay 可以包含 HTML 内容和其他内容，如图像和表单输入。在 OpenLayers 中，Overlay 是一个独立的类，它不是在地图上的单独图层，而是与地图一同呈现的。若您想要在地图上添加一个 Overlay，则需要通过调用 ol.Overlay 类来创建它，并将其添加到地图上。
    OpenLayers学习笔记（六）— 拖拽叠加层overlayer
    diaoyanbian8143的博客
    12-28 931
    是在官网例子基础上增加的拖拽功能 GitHub:八至 作者：狐狸家的鱼 本文链接：拖拽叠加层overlayer 全部代码 <!DOCTYPE html> <html> <head> <title>Icon Symbolizer</title> <link rel="...
    使用OpenLayers3 添加地图鼠标右键菜单
    11-22
    总的来说，使用OpenLayers 3添加地图鼠标右键菜单涉及到监听鼠标事件、坐标转换以及自定义交互逻辑。通过理解OpenLayers的内部结构和提供的API，我们可以轻松地扩展其功能，创建符合项目需求的交互体验。
    Openlayers绘制地图标注
    10-14
    在OpenLayers中绘制地图标注是将特定的信息或者兴趣点（POI）以图标或文字的形式在地图上清晰呈现的关键操作。这有助于用户更好地理解和解析地图上的数据。以下是对OpenLayers中绘制地图标注的详细说明： 1. **标注...
    openlayers实现地图弹窗
    10-14
    在本文中，我们将深入探讨如何使用OpenLayers库来实现在地图上显示弹窗的功能。OpenLayers是一个强大的JavaScript库，专门用于创建交互式地图应用，支持多种数据源和地图服务，包括WMS（Web Map Service）。 首先，...
    vue集成openlayers加载geojson并实现点击弹窗教程
    10-14
    为了实现点击地图要素时弹出详细信息，你需要创建一个`Overlay`对象来存储弹窗信息，并在地图上添加事件监听器，监听`click`事件： ```javascript data() { return { // ... overlay: new Overlay({ element: ...
    OpenLayers6入门，OpenLayers选择拖拽功能，OpenLayers实现对地图上的任意要素进行选择和拖拽
    GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
    04-14 1476
    OpenLayers实现对地图上的任意要素进行选择和拖拽，可以选择并拖动要素点、圆形、线段、多边形、图标等等任意要素图形。
    OpenLayers之 OverLay问题汇总
    xinxin_csdn的博客
    10-24 2027
    OpenLayers使用
    Vue+Openlayer使用overlay实现弹窗弹出显示与关闭
    BADAO_LIUMANG_QIZHI的博客
    11-11 4867
    场景 Vue+Openlayers实现地图上绘制线： Vue+Openlayers实现地图上绘制线_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上实现点击地图，弹窗显示并获取点击处的坐标，并实现坐标转换经纬度。 效果 加载显示地图的流程 Vue中使用Openlayers加载Geoserver发布的TileWMS： Vue中使用Openlayers加载Geoserver发布的TileWMS_BADAO_LIUMANG_QIZHI的博客-CSDN博客 注：
    openlayers6【八】地图覆盖物overlay详解
    @必意玲
    05-27 5520
    文章目录1. overlay 简述2. overlay 属性2. overlay 事件4. overlay 方法5. overlay 实例5.1 overlay 实现 windowInfo 弹窗5.2 overlay 实现 label标注信息5.3 overlay 实现 text文本信息 1. overlay 简述 overlay是覆盖物的意思，顾名思义就是在地图上以另外一种形式浮现在地图上，这里很多同学会跟图层layers搞混淆，主要是放置一些和地图位置相关的元素，常见的地图覆盖物为这三种类型，如：win
    Vue+openLayers开发时的常用代码
    cxp13453551198的博客
    09-16 1169
    Vue+openLayers开发时的常用代码leaflet开发时的常用代码Vue+openLayers开发时的常用代码 Vue+openLayers开发时的常用代码 加载天地图与arcgis server发布的切片服务 <template> <div id="map" ref="rootmap"> </div> </template> <script> import "ol/ol.css"; import { Map, View }
    尚硅谷-谷粒商城P44Vue模板
    weixin_44829804的博客
    09-18 1002
    配置模板 <template> <div></div> </template> <script> //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //例如：import 《组件名称》 from '《组件路径》'; export default { //import引入的组件需要注入到对象中才能使用 components: {}, props: {}, data() { /
    openlayers 显示点击位置的经纬度
    cc1314_工作、学习有感
    11-23 8200
    openlayers 显示点击位置的经纬度
    openlayers使用InfoWindow并显示×可关闭弹框
    06-10
    在上面的代码中，我们创建了一个 Overlay 组件，将其添加到地图中，并在地图点击事件中设置其位置并显示。同时，我们还为 Overlay 中的关闭按钮添加了一个点击事件，点击后隐藏 Overlay。 需要注意的是，上面的代码...
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

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

    打赏作者

    汤姆猫不是猫

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

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

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

    打赏作者

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

    抵扣说明：

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

    余额充值