Vue + Openlayers 使用 Overlay 添加 Popup 弹窗

原创 已于 2022-05-09 10:04:03 修改 · 1.3k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #web

于 2022-05-08 22:26:38 首次发布
这篇博客记录了使用Vue.js和OpenLayers库创建地图弹窗功能的过程。作者通过创建元素、引入依赖、添加事件及设置样式，展示了如何在地图上显示包含地名和面积信息的弹窗，并提供了项目的运行效果截图。文章还附带了Vue+OpenLayers DOM的下载链接。

最近使用 Vue 和 Openlayers 写了一个简单的小 dom ，用到了 Overlay 的弹窗功能，记录一下！

实验数据：test.xls

项目运行效果

创建元素：

  <div ref="popCon" id="popup" v-show="isShow"><!-- 弹出信息框 -->
    <span class="iconfont icon-guanbi" @click="closePop"></span>
    <ul id="info">
      <h4>基本信息</h4>
      <p>-------------------------------</p>
      <p>名称：{
  
  {name}}</p>
      <p>面积：{
  
  {output}}</p>
    </ul>
  </div>

引入依赖：

import 'ol/css';
import{ Overlay } from 'ol'

添加事件：

    getArea(){
最低0.47元/天 解锁文章
OpenLayers6入门，OpenLayers的Popup弹出框如何内嵌Vue组件内容和内嵌iframe网页，根据所点击要素动态切换弹框内容
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
12-04 1196
本章主要讲解OpenLayers弹出框如何与VUE组件联动，在Popup弹出框内容中嵌入vue的组件，以及iframe第三方网页和html元素等内容。
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
10-31 4787
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
OpenLayers Popup（浮窗）的Vue组件
GIS小虫的博客
04-25 1499
根据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入门教程（六）：实现信息弹窗功能
菜鸟的博客
06-29 733
信息弹窗会自动获取鼠标当前位置下的所有矢量图层信息，包括当前坐标、矢量类型与图层名称。如果同一个点击区域有不同矢量图层覆盖，可以点击切换按钮进行信息描述切换。
openlayers添加弹出框
weixin_30374009的博客
08-18 687
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
vue中使用openlayers离线地图添加弹窗（三）
林依.的博客
07-25 2309
openlayers添加点击弹框
Vue2+OpenLayers使用Overlay实现点击获取当前经纬度信息（提供Gitee源码）
黄团团的个人博客
01-12 1067
覆盖物（Overlay） 是用于在地图上显示额外的HTML元素，如弹出窗口、信息框、控件等的层。与图层不同，叠加层不直接渲染地理要素，而是用于展示与地图位置相关的HTML内容。
Vue+Openlayer使用overlay实现弹窗弹出显示与关闭
BADAO_LIUMANG_QIZHI的博客
11-11 5139
场景 Vue+Openlayers实现地图上绘制线： Vue+Openlayers实现地图上绘制线_BADAO_LIUMANG_QIZHI的博客-优快云博客 在上面的基础上实现点击地图，弹窗显示并获取点击处的坐标，并实现坐标转换经纬度。 效果 加载显示地图的流程 Vue中使用Openlayers加载Geoserver发布的TileWMS： Vue中使用Openlayers加载Geoserver发布的TileWMS_BADAO_LIUMANG_QIZHI的博客-优快云博客 注：
WebGL--vue+openlayers实现覆盖物＋popup
Yan9_9的博客
11-22 813
最近公司有需求，需要用到openlayers实现在地图上面绘制多边形，并且轨迹回放，实现弹出框，国内资料太少了，所以在这里放上openlayers的学习教程以及这个案例的代码。
openlayers的popup实现
Lin00Kun11的专栏
08-29 6655
功能需求如下： 在地图 http://blog.csdn.net/lin00kun11/article/details/38865147
vue集成openlayers加载geojson并实现点击弹窗教程
10-14
主要为大家详细介绍了vue集成openlayers加载geojson并实现点击弹窗教程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
四十四、openlayers官网示例Geographic Coordinates解析——在地图上添加弹窗，点击显示图形信息
aaa_div的博客
06-08 456
初始化图层的时候，添加一个矢量的点数据到地图上，在new Feature时添加一些自定义属性。创建overlay实例 ，offset是偏移量，根据写的元素大小调节。点击地图的时候，获取图形的信息并给 this.message赋值。使用Overlay在地图上添加弹窗，点击控制显隐。写一个元素，用来展示信息。
openlayers地图点击标记点,弹出当前位置自定义弹窗(三)
Summer_Uncle的博客
02-19 4382
1. 效果图 2. 代码 <template> <div class="container"> <div id="map" style='width: 100%; height: 100%;border: 5px solid #a4cdff;'> <div class="toolBox"> <div class="messageBox" v-show="isShow"> <di
OpenLayers基础教程——实现popup弹出框
HerryDong的博客
08-20 9431
1、前言 在OpenLayers中，一般使用ol.Overlay实现popup弹出框，弹出框一般用于显示地图上兴趣点的一些属性信息，如下图所示。下面开始介绍实现方法。 2、准备测试数据 在SqlServer中新建一张省会数据表——ProvincialCapital，字段如下表所示： 字段 含义 Id 自增主键 CityName 城市名称 ProvinceCode 省份编码 Pinyin 拼音 Attribution 归属 CityCode 城市编码 PostCode
制作带三角指向的overlay/popup
dlshbn的博客
07-18 582
HTML 部分：                 x                                             CSS 部分： .ss_toolTip{ display: block; position: absolute; width: 300px; mi
openlayers [九] 地图覆盖物overlay三种常用用法 popup弹窗，marker标注，text文本
爱玩亚索的程序员
01-19 1886
常见的地图覆盖物为这三种类型，如：popup弹窗、label标注信息、text文本信息等。
openlayers6【九】地图覆盖物overlay三种常用用法 popup弹窗，marker标注，text文本
@必意玲
05-29 9531
文章目录1. 写在前面2. overlay 实现popup弹窗3. overlay 实现 label标注信息4 overlay 实现 text文本信息5. 附上完整代码 1. 写在前面 常见的地图覆盖物为这三种类型，如：popup弹窗、label标注信息、text文本信息等。 上篇讲了overlay的一些属性方法事件等，这篇主要讲overlay三种最常用的案例。更多可以参考上篇内容openlayers6【八】地图覆盖物overlay详解，这两篇会有关联。 popup弹窗 基本是经常遇到的需求案例，所有单独给
vue3+openlayers 点击点自定义弹窗，不同类型不同样式，点击面跳转，点的聚类
weixin_46527645的博客
02-14 4205
vue3+openlayers 点击点自定义弹窗，不同类型不同样式，点击面跳转，点的聚类
vue利用openlayers实现动态轨迹
sinat_40572875的博客
11-13 3965
事件触发一个函数，这个事件本来是地图渲染结束事件，但是它的回调函数中，小车的坐标位置一直在变，那就会不停地触发地图渲染，当然最终也会触发。gis初学者可能对openlayers（后面简称ol）不熟悉，这里暂时不介绍ol了，直接上代码，先体验下感觉。这段代码有点难理解，最好自己尝试体验下，比较难理解部分我都加上了注释。线路有了，车也有了，现在就到了激动人心的开车时刻了，接下来才是本文最核心的代码！这个上面的代码已经包括了，我这里列出来是为了让你更清晰，就是。同样的，这里的代码在上面也写过了，就是。
vue+openlayers调用高德地理编码api
最新发布
08-01
在 Vue 项目中结合 OpenLayers 调用高德地图的地理编码 API 实现地理数据解析，需要完成以下几个步骤： ### ### 初始化 Vue 项目并集成 OpenLayers 首先，确保你的 Vue 项目已经创建，并安装 `ol`（OpenLayers）库： ```bash npm install ol ``` 然后，在 Vue 组件中初始化地图，加载高德地图作为底图图层： ```javascript import { Map, View } from &#39;ol&#39;; import TileLayer from &#39;ol/layer/Tile&#39;; import { get as getProjection } from &#39;ol/proj&#39;; import { bbox as bboxStrategy } from &#39;ol/loadingstrategy&#39;; import { OSM, XYZ } from &#39;ol/source&#39;; export default { name: &#39;MapComponent&#39;, mounted() { const amapLayer = new XYZ({ url: &#39;https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}&#39;, subdomains: [&#39;1&#39;, &#39;2&#39;, &#39;3&#39;, &#39;4&#39;], }); const map = new Map({ target: &#39;map&#39;, layers: [ new TileLayer({ source: amapLayer, }), ], view: new View({ center: [120, 30], zoom: 4, projection: getProjection(&#39;EPSG:4326&#39;), }), }); }, }; ``` ### ### 配置高德地理编码 API 高德地图的地理编码 API 提供了将地址转换为地理坐标（正向编码）以及将坐标转换为地址（逆向编码）的功能。要使用这些功能，需要在 Vue 项目中通过 HTTP 请求调用高德 API。 #### 地理编码（正向编码） 使用 `axios` 或 `fetch` 请求高德地理编码 API： ```javascript import axios from &#39;axios&#39;; async function geocodeAddress(address) { const key = &#39;YOUR_AMAP_API_KEY&#39;; const url = `https://restapi.amap.com/v5/geocode/geo?address=${encodeURIComponent( address )}&key=${key}`; try { const response = await axios.get(url); const data = response.data; if (data.status === &#39;1&#39; && data.count > 0) { const location = data.geocodes[0].location.split(&#39;,&#39;); return { lon: parseFloat(location[0]), lat: parseFloat(location[1]) }; } } catch (error) { console.error(&#39;Geocoding error:&#39;, error); } } ``` #### 逆地理编码 逆地理编码用于将地理坐标转换为地址信息： ```javascript async function reverseGeocode(lat, lon) { const key = &#39;YOUR_AMAP_API_KEY&#39;; const url = `https://restapi.amap.com/v5/geocode/regeo?location=${lon},${lat}&key=${key}`; try { const response = await axios.get(url); const data = response.data; if (data.status === &#39;1&#39;) { return data.regeocode.formatted_address; } } catch (error) { console.error(&#39;Reverse geocoding error:&#39;, error); } } ``` ### ### 在 OpenLayers 地图上展示地理编码结果 当获取到地理坐标后，可以使用 OpenLayers 将结果展示在地图上： ```javascript import { fromLonLat } from &#39;ol/proj&#39;; import Feature from &#39;ol/Feature&#39;; import Point from &#39;ol/geom/Point&#39;; import { Style, Icon } from &#39;ol/style&#39;; function displayMarker(map, lon, lat, address) { const coordinate = fromLonLat([lon, lat]); const feature = new Feature(new Point(coordinate)); const iconStyle = new Style({ image: new Icon({ anchor: [0.5, 1], src: &#39;https://openlayers.org/en/latest/examples/data/icon.png&#39;, }), }); feature.setStyle(iconStyle); map.getSource().addFeature(feature); // 弹出信息框 const popup = document.createElement(&#39;div&#39;); popup.className = &#39;popup&#39;; popup.innerHTML = address; const overlay = new Overlay({ element: popup, positioning: &#39;bottom-center&#39;, stopEvent: false, }); map.addOverlay(overlay); overlay.setPosition(coordinate); } ``` ### ### 注意事项 - 高德地图 API 在中国境内使用效果较好，但在欧美等国家可能不支持或返回信息不准确[^1]。 - 调用高德 API 需要申请 Key，个人账户每天最多可调用 3000 次[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值