Vue+OpenLayers7入门到实战：OpenLayers地图鼠标点击事件使用，点击地图后弹框并显示当前位置经纬度

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

#vue.js #前端 #javascript #OpenLayers #监听点击事件 #点击弹框

于 2024-03-11 16:45:34 首次发布
本教程介绍了在Vue项目中结合OpenLayers7监听地图点击事件，展示如何获取点击位置的经纬度并在弹框中显示，包括事件监听、坐标转换及弹窗内容的实现。

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

前言

本章介绍如何使用OpenLayers7在地图上监听点击事件，以及监听地图点击事件后进行简单弹框并获取当前点击位置的经纬度并显示wgs84坐标位置和度分秒格式经纬度信息。

Vue+OpenLayers7入门到实战

二、依赖和使用

"ol": "7.5.2"
  1. 使用npm安装依赖
npm install ol@7.5.2
了解本专栏 订阅专栏 解锁全文
Vue+OpenLayers7入门到实战：Openlayers调整地图可视范围到多个点组成的多边形边界，可视范围缩放到多个点的中心点
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-29 457
本章介绍如何使用Openlayers调整地图可视范围到多个点组成的多边形边界。也即Openlayers根据多个点坐标生成一个矩形可视范围，并判断当前传入的矩形可视范围是否在当前可视范围内。如果在当前可视范围内，则调整地图中心点；如果不在，则调整地图可视区域到对应矩形可视范围。
Vue+OpenLayers7入门到实战：OpenLayers7地图整合到Vue项目中的两种方式
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-24 724
OpenLayers本身已经是支持模块化，所以引入vue项目很简单。在vue中使用OpenLayers，最简单的是混合方式。直接在vue项目中和前端代码混在一起写，适合业务简单的项目。另一种是与前端代码分离的方式，前端写前端的代码。GIS写GIS的代码，各写各的，互不影响。最后前端以模块化的方式使用地图功能代码，这样可以实现gis地图功能代码复用，引入其他地方也可以复用。虽然两种方式最终实现功能是一样的，但是当代码越来越多，业务越来越复杂，后面代码分离方式是最优选，可以实现数据和地图功能的解耦。
OpenLayers的点击事件
热门推荐
超频化石鱼的博客
10-07 1万+
OpenLayers的点击事件是附加在整个ol.Map对象上的： var selectSingleClick = new ol.interaction.Select(); map.addInteraction(selectSingleClick); selectSingleClick.on('select', function(e) { var features = e.target.get...
Vue+OpenLayers7入门到实战：OpenLayers懒加载瓦片，点击事件后才开始加载瓦片，初始化地图时不加载瓦片
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-12 469
本章介绍如何使用OpenLayers7怎么在地图初始化时不加载瓦片，通过事件触发才开始懒加载地图瓦片图层。
vue集成openlayers
呱呱的博客
04-28 6174
下载依赖 cnpm i -S ol 创建地图文件 <div class="map"></div> 按需引入相应的API，具体查看官方文档 <script> import Map from "ol/Map"; import View from "ol/View"; // 添加图层 import TileLayer from "ol/layer/Tile"...
vue全局引入openlayers_把Vue与OpenLayers集成使用的方法
weixin_39725844的博客
02-05 2191
准备工作确认自己电脑是否通过npm正确安装了OpenLayers，没有的话可以npm i openlayers -s搞定后开始下一步。注册全局变量首先全局引入，然后通过vue的prototype方法定义全局变量。import ol from ‘openlayers‘;import ‘openlayers/css/ol.css‘;Vue.prototype.$ol = ol;这里的Vue.proto...
Vue+OpenLayers7入门到实战：OpenLayers7地图飞行动画效果，OpenLayers飞行到指定位置，OpenLayers飞行到经纬度位置
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-30 639
本章介绍如何使用OpenLayers7在地图上实现OpenLayers视图飞行动画，根据经纬度和动画持续时长，飞行到地图指定的经纬度位置。
Vue+OpenLayers7入门到实战：在地图上显示经纬度网格标记线
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-26 424
本章介绍如何使用OpenLayers7在地图上显示经纬度网格标记线。在地图上显示经纬度网格标记线，可以方便查看可视区域所在的经度和纬度区间。
Vue+OpenLayers7入门到实战：在地图上添加缩放控件、比例尺控件和鼠标经纬度位置显示控件
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-25 499
本章主要介绍如何使用OpenLayers7在地图上添加地图缩放控件，比例尺显示控件和鼠标经纬度位置展示控件这三个Control控件。
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》。
vue中集成openlayer+天地图实现地图打点和覆盖层加载
Christina0109的博客
10-13 1295
使用openlayer加载天地图，实现打点和覆盖层加载
openlayer Vue 测绘功能
Jos
02-04 408
关于在vue上面Openlayer ，即使是官方例子，也需要一定的vue化，如下 官方例子： https://openlayers.org/en/latest/examples/measure.html 我自己vue化之后的 <template> <div id="PlanMap"> <!-- 这里是计划里面的地图页面 --> <div id="map" class="openLayer"></div> <!--
openlayers 显示点击位置的经纬度
cc1314_工作、学习有感
11-23 8796
openlayers 显示点击位置的经纬度
Vue+OpenLayers7入门到实战：OpenLayers选择拖拽功能，OpenLayers实现对地图上的任意要素进行选择和拖拽
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-29 569
本章介绍如何使用OpenLayers7在地图上进行任意要素进行选择和拖拽，可以选择并拖动要素点、圆形、线段、多边形、图标等等任意要素图形。
OpenLayers使用高德导航接口实现动画animate
SieSteven
10-31 1558
react、openlayer、高德导航接口、坐标转换，实现动效
四十四、openlayers官网示例Geographic Coordinates解析——在地图上添加弹窗，点击显示图形信息
aaa_div的博客
06-08 474
初始化图层的时候，添加一个矢量的点数据到地图上，在new Feature时添加一些自定义属性。创建overlay实例 ，offset是偏移量，根据写的元素大小调节。点击地图的时候，获取图形的信息并给 this.message赋值。使用Overlay在地图上添加弹窗，点击控制显隐。写一个元素，用来展示信息。
Vue+OpenLayers7入门到实战：OpenLayers动画效果实现，OpenLayers实现轨迹运动动画
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
05-30 733
本章介绍如何使用OpenLayers7在地图上实现动画效果和运动轨迹动画。
Vue+OpenLayers7入门到实战：快速搭建Vue+OpenLayers7地图脚手架项目。从零开始构建Vue项目并整合OpenLayers7.5.2
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-24 1480
本章针对Vue初学者，对Vue不熟悉，甚至还不会Vue的入门学生读者。本章会详细讲解从NodeJS环境到npm环境的各个步骤，再到使用vue-cli脚手架快速生成项目，以及添加地图库依赖，编写简单的xyz高德地图显示页面的完整教程。如果已有Vue项目或者熟悉Vue.js的读者可以不用看本章，直接添加ol@7.5.2依赖到Vue项目中即可。熟悉VUE的读者可以跳过本章。
Openlayers实战：extent介绍及实际应用
大剑师兰特的GIS世界
07-23 1576
Openlayers中，extent是重要的属性，它主要目的是圈定边界。setExtent方法可以设定边界的值；fit()方法可以适配狂口的位置。
vue+openlayers天地图回显轨迹并自动聚焦到该轨迹处
最新发布
05-28
### 在 Vue 项目中使用 OpenLayers 加载天地图并实现轨迹回显与自动聚焦功能 在 Vue 项目中集成 OpenLayers 并加载天地图，可以按照以下方法实现轨迹回放和自动聚焦到轨迹位置的功能。 #### 1. 安装依赖 首先需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值