vue-openlayers实现地图坐标弹框效果

本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码，供大家参考，具体内容如下

openlayers

这个效果是点击地图，弹出坐标信息。

点击地图边缘时，底图会跟着移动，使弹窗能完整显示出来。

<template> <div class='vm'> <h2 class='h-title'>弹窗 popup</h2> <div class='map-x'></div> <!-- 弹窗元素 --> <div ref='popup' v-show='currentCoordinate' > <span @click='closePopup'>✖</span> <div class='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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。