个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 39 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue-openlayers实现地图坐标弹框效果由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

openlayers 。

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
< 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 >

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

原文链接：https://blog.csdn.net/ANNENBERG/article/details/107199318 。

最后此篇关于vue-openlayers实现地图坐标弹框效果的文章就讲到这里了,如果你想了解更多关于vue-openlayers实现地图坐标弹框效果的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

39 4 0
文章推荐： openlayers实现地图测距测面
文章推荐： openlayers 3实现车辆轨迹回放
文章推荐： 英雄联盟手游排位商城在哪 英雄联盟手游排位奖励怎么领
文章推荐： vue集成openlayers加载geojson并实现点击弹窗教程
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com