本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码,供大家参考,具体内容如下
openlayers
这个效果是点击地图,弹出坐标信息。
点击地图边缘时,底图会跟着移动,使弹窗能完整显示出来。
<template> <div class="vm"> <h2 class="h-title">弹窗 popup</h2> <div id="map" class="map-x"></div> <!-- 弹窗元素 --> <div class="popup" ref="popup" v-show="currentCoordinate" > <span class="icon-close" @click="closePopup">"content">{{currentCoordinate}}</div> </div> </div> </template> <script> import 'ol/ol.css' import { Map, View } from 'ol' import Tile from 'ol/layer/Tile' import OSM from 'ol/source/OSM' import { toStringHDMS } from 'ol/coordinate' import { toLonLat } from 'ol/proj' import Overlay from 'ol/Overlay' export default { name: 'Popup', data () { return { map: null, currentCoordinate: null, // 弹窗坐标数据 overlay: null } }, methods: { initMap () { // 弹窗 this.overlay = new Overlay({ element: this.$refs.popup, // 弹窗标签,在html里 autoPan: true, // 如果弹窗在底图边缘时,底图会移动 autoPanAnimation: { // 底图移动动画 duration: 250 } }) // 实例化地图 this.map = new Map({ target: 'map', layers: [ new Tile({ source: new OSM() // 使用OSM底图 }) ], overlays: [this.overlay], // 把弹窗加入地图 view: new View({ center: [-27118403.38733027, 4852488.79124965], // 北京坐标 zoom: 12 // 地图缩放级别(打开页面时默认级别) }) }) this.mapClick() // 初始化地图成功后,给地图添加点击事件 }, mapClick () { // 地图点击事件 // 通过 map.on() 监听,singleclick 是单击的意思。也可以用 click 代替 singleclick。 this.map.on('singleclick', evt => { const coordinate = evt.coordinate // 获取坐标 const hdms = toStringHDMS(toLonLat(coordinate)) // 转换坐标格式 this.currentCoordinate = hdms // 保存坐标点 setTimeout(() => { // 设置弹窗位置 // 这里要设置定时器,不然弹窗首次出现,底图会跑偏 this.overlay.setPosition(coordinate) }, 0) }) }, // 关闭弹窗 closePopup () { // 把弹窗位置设置为undefined,并清空坐标数据 this.overlay.setPosition(undefined) this.currentCoordinate = null } }, mounted () { this.initMap() } } </script> <style lang="scss" scoped> /* 弹窗样式 */ .popup { min-width: 280px; position: relative; background: #fff; padding: 8px 16px; display: flex; flex-direction: column; transform: translate(-50%, calc(-100% - 12px)); /* 弹窗下方的小三角形 */ &::after { display: block; content: ''; width: 0; height: 0; position: absolute; border: 12px solid transparent; border-top-color: #fff; bottom: -23px; left: 50%; transform: translateX(-50%); } } /* 关闭弹窗按钮 */ .icon-close { cursor: pointer; align-self: flex-end; margin-bottom: 10px; } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“vue-openlayers实现地图坐标弹框效果”评论...
更新动态
2024年11月13日
2024年11月13日
- 李宗盛《理性与感性 作品音乐会》2CD[低速原抓WAV+CUE][1.8G]
- 群星《华语贺年金曲》K2HD[WAV+CUE][697M]
- 群星《酒廊夜色美》2CD[DTS-WAV]
- 群星《2024好听新歌35》AI调整音效【WAV分轨】
- 神秘园《讲故事的人》2019[FLAC+CUE/整轨]
- 张智霖VS许秋怡.1991-现代爱情故事【永高创意】【WAV+CUE】
- 忧欢派对.1988-忧欢派对【飞碟】【WAV+CUE】
- 群星.2009-他的沧海遗珠精选(金碟铁盒珍藏系列)【SONY】【WAV+CUE】
- 刘德华《经典金曲》[WAV+CUE][833M]
- 邓丽君《千言万语》SACD德国限量版[低速原抓WAV+CUE][1G]
- 王闻VS曼里《不老情歌》经典粤语情歌[低速原抓WAV分轨][1G]
- 英雄联盟faker有多少联赛冠军 faker联赛冠军数量介绍
- 炉石传说酒馆战棋分数等级段位介绍 酒馆战棋分数最新等级划分一览
- 野狗子奇才三姐怎么收集 野狗子奇才三姐收集攻略
- 香港群星《电影歌曲101》6CD[WAV整轨]