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

本文实例为大家分享了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">✖</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>

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

以上是 vue-openlayers实现地图坐标弹框效果 的全部内容, 来源链接: utcz.com/p/238170.html

回到顶部