054：vue+openlayers经纬度动态赋值（示例代码）

已于 2024-05-13 21:44:21 修改
阅读量676 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： # openlayers综合教程300+ 文章标签： openlayers学习 openlayers教程 openlayers openlayers示例 大剑师
于 2022-08-15 11:14:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuclife/article/details/126343330
本文由大剑师兰特分享，介绍如何在Vue应用中结合OpenLayers实现经纬度动态赋值并展示。示例通过popup展示坐标，并进行坐标投影转换，使用EPSG:3857投影。提供源代码供读者快速实践。

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 054个示例

文章目录

一、示例效果图

二、示例简介

本示例演示如何在vue+openlayers中使用popup的形式来显示出经纬度坐标，转换坐标投影，使用EPSG:3857，并动态的赋予坐标值。

直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果； 注意如果OpenStreetMap无法加载，请加载其他来练习

三、配置方式

1）查看基础设置：https://xiaozhuanlan.com/topic/1378924560
或者同样查看：https://blog.csdn.net/cuclife/article/details/126195754
2）将上述的源代码，粘贴到src/views/Home.vue中，npm run serve 运行即可。

安装依赖

npm install ol-popup --save

四、示例源代码

了解本专栏 订阅专栏 解锁全文
050：vue+openlayers使用Popup组件显示经纬度坐标
大剑师兰特的GIS世界
08-14 1031
本示例的目的是介绍演示如何在vue+openlayers中使用popup的形式来显示出经纬度坐标，本示例是采用引用扩展的方式，相比以往的添加方式，减少了不少的代码量。
012：vue+openlayers 加载Stamen地图（3种形式）
大剑师兰特的GIS世界
08-09 1069
本示例的目的是介绍演示如何在vue+openlayers中添加Stamen地图，并含多种的表现形式。
OpenLayers Popup（浮窗）的Vue组件
GIS小虫的博客
04-25 1503
根据openlayers官方的popup实例改的，使用Vue2+TS，功能比较简单 OLPopop.vue <template> <div ref="container" class="ol-popup"> <a href="#" ref="closer" class="ol-popup-closer"></a> <slot></slot> </div> </template> impo
Vue和OpenLayers：在JavaScript中显示经纬度坐标
TechNovaX的博客
09-18 499
在本文中，我们将探讨如何使用Vue和OpenLayers库在JavaScript中显示经纬度坐标。OpenLayers是一个强大的JavaScript库，用于在Web应用程序中呈现地图，并提供了丰富的地图交互功能。需要注意的是，这篇文章提供的代码是基于Vue 2.x和OpenLayers 6.x版本的。我们的目标是创建一个简单的Vue组件，该组件可以显示经纬度坐标并在地图上标记位置。在这个组件中，我们首先定义了一个包含地图和坐标显示的容器。事件，并在点击时获取点击位置的经纬度坐标并显示在页面上。
Vue.js与OpenLayers使用Popup组件显示经纬度坐标
TechNovaX的博客
09-12 141
通过结合Vue.js的组件开发能力和OpenLayers的地图展示功能，我们可以轻松创建一个交互式的地图应用，并利用Popup组件来显示地理信息。希望这篇文章对你有所帮助！在上面的代码中，我们首先创建了一个Vue组件，并在mounted钩子函数中调用initializeMap方法来初始化地图。然后，我们监听地图的点击事件，在点击事件回调函数中获取点击处的经纬度坐标，并更新弹出框内容为该坐标。最后，我们显示弹出框。然后，在该容器元素内部，我们创建了一个弹出框容器，以及用于显示经纬度坐标的内容容器。
Vue3＋Openlayers教程导航页【目录】
最新发布
小彭的博客
04-18 765
欢迎来到 Vue3＋Openlayers 系列教程，这里是我在 CSDN 编写的所有 Vue3＋Openlayers 系列相关文章的索引页，适合初学者到进阶用户系统阅读。👀 更多教程正在持续更新中，欢迎关注我，一起探索 Openlayers 的强大魅力！
SpringBoot+Vue+Openlayers实现地图上新增和编辑坐标并保存提交
BADAO_LIUMANG_QIZHI的博客
11-05 2753
场景 若依前后端分离版手把手教你本地搭建环境并运行项目： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 Vue中使用Openlayers加载Geoserver发布的ImageWMS： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/115867709 在上面搭建起来Vue+SpringBoot的前后端分离的项目的基础上，并且加载显示地图之后。
53.在Vue3中使用OpenLayers获取经纬度并赋值到输入框中（EPSG:3857）
小彭的博客
12-31 1469
通过结合 Vue 3 和 OpenLayers，我们能够非常方便地在Web应用中集成地图功能，并且通过点击地图获取和显示经纬度信息。通过响应式数据与 Element UI 的输入框绑定，我们实现了一个简洁且易于使用的地图应用。这个应用不仅展示了如何处理地图交互，还使用了 OpenLayers 强大的坐标转换功能。希望这篇文章能帮助你更好地理解如何在 Vue3 中使用 OpenLayers，并实现点击地图获取经纬度并赋值到输入框中的功能。如果你有任何问题，欢迎在评论区留言讨论！
PostGis+GeoServer+OpenLayers最短路径分析
qgbihc的专栏
09-17 2311
使用PostGis存储路线数据，在GeoServer中发布路网图层和最短路径图层，通过OpenLayers建立路网和展示图层。 1、PostGis：PostgreSQL 12.4, 2、GeoServer：geoserver-2.17.2 3、OpenLayers：6.4.3 PostGis建表 CREATE SEQUENCE public.am_roads_gid_seq INCREMENT 1 START 1 MINVALUE 1 MAXVALUE 2147483647
109：vue+openlayers 定位动画（平移-弹性平移-飞行 示例代码）
大剑师兰特的GIS世界
09-01 1379
本示例的目的是介绍如何在vue+openlayers项目中来实现定位动画，实现平移，飞行，弹性动画等。
openlayers 显示点击位置的经纬度
cc1314_工作、学习有感
11-23 8784
openlayers 显示点击位置的经纬度
OpenLayers6入门，OpenLayers视图飞行动画，OpenLayers飞行到指定经纬度位置
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
08-09 1248
本章实现OpenLayers视图飞行动画，根据经纬度和动画持续时长，飞行到指定地图位置。《Openlayers入门，Openlayers调整中心点坐标、Openlayers调整缩放级别、Openlayers调整地图可视角度和地图复位》
072：vue+openlayers拖拽放大所选区域（DragPan示例代码）
大剑师兰特的GIS世界
08-19 851
本示例的目的是介绍演示如何在vue+openlayers中通过DragPan方法拖拽实现放大所选区域的效果。操作方式：按住shift，然后用鼠标拖拽。
openlayer接入天地图（经纬度投影）（openlayer篇.1）
GIS之家家长
02-28 704
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="lib/ol.css" rel="stylesheet
openlayers6【十一】vue 使用overlay实现弹窗框popup效果
@必意玲
06-01 8705
在之前的文章 openlayers6【九】地图覆盖物overlay三种常用用法 popup弹窗，marker标注，text文本 提及到了overlay三种常用方式就说到了popup弹窗效果。本篇文章我们具体详解一个popup是怎么实现的。 弹窗效果在地图加载完成后，我们往往需要更多的交互效果，不仅仅局限于地图的缩放和平移，让地图业务更加复杂一点，比如图标打点上图后，我们可以通过点击图标弹窗这个点位的具体信息都是应用场景，下面具体说下怎么利用overlay类实现popup气泡弹窗的吧。 文章目录1. po.
vue实现高德地图选择经纬度
m0_55333789的博客
07-13 513
vue实现高德地图选择经纬度
132：vue+openlayers 设置显示图层的层级数zIndex
大剑师兰特的GIS世界
09-09 2178
本示例的目的是介绍演示如何在vue+openlayers中设置显示层级数zIndex。每一个图层都像一张纸似的，叠加在一起，上面的层级数zIndex值高，下面的层级数小。点击查看本专栏内容目录列表。
OpenLayers6入门，OpenLayers的Popup弹出框如何内嵌Vue组件内容和内嵌iframe网页，根据所点击要素动态切换弹框内容
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
12-04 1219
本章主要讲解OpenLayers弹出框如何与VUE组件联动，在Popup弹出框内容中嵌入vue的组件，以及iframe第三方网页和html元素等内容。
OpenLayers: 创建两个地图联动展示
qq_40206575的博客
06-25 1043
Openlayers：地图联动实现
049:vue+openlayers鼠标pointermove显示城市名片(示例代码)
06-06
Vue OpenLayers 是一种基于 Vue.js 的开源地图库，结合了 OpenLayers 的强大功能和 Vue.js 的易用性。其中，鼠标 pointermove 显示城市名片是 Vue OpenLayers 中非常有用的功能之一。下面我们来看一下示例代码。 在 Vue OpenLayers 中，我们可以使用 PointerMove() 方法来实现鼠标移动时的功能。我们可以在 mounted() 中添加以下代码： ```JavaScript mounted() { this.map.on('pointermove', this.displayCityCard); } ``` 这里，我们为指针移动事件添加了一个监听器，该监听器会调用 displayCityCard 方法。 接下来，我们需要实现 displayCityCard 方法，该方法会在指针移动时显示城市名片。代码如下： ```JavaScript methods: { displayCityCard(evt) { let features = this.map.getFeaturesAtPixel(evt.pixel); if (features.length) { let feature = features[0]; let city = feature.get('name'); this.city = city; this.showCityCard = true; } else { this.showCityCard = false; } } } ``` 这里，我们首先通过 getFeaturesAtPixel() 方法获取与指针所在位置对应的要素。如果有要素，则从中取出城市名，并将其赋值给 city。同时，我们将 showCityCard 属性设置为 true，以显示城市名片。如果没有要素，则将 showCityCard 设置为 false，以隐藏城市名片。 最后，我们需要在模板中添加一个 div 元素，用于显示城市名片： ```HTML <div v-if="showCityCard" class="city-card"> {{ city }} </div> ``` 这里，我们使用了 v-if 指令来控制 div 元素的显示与隐藏。如果 showCityCard 为 true，则显示该元素，并将城市名字显示在其中。 以上就是在 Vue OpenLayers 中实现鼠标 pointermove 显示城市名片的示例代码。通过这个函数，我们可以更加便捷地在地图上查看城市信息。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值