vue-openlayers实现地图坐标弹框效果实现地图坐标弹框效果
主要为大家详细介绍了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({
评论0