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


Posted in Javascript onSeptember 24, 2020

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

openlayers

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

vue-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>

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

Javascript 相关文章推荐
javascript import css实例代码
Jul 18 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
基于JavaScript实现轮播图效果
Jan 02 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 #Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 #Javascript
vue使用openlayers实现移动点动画
Sep 24 #Javascript
Openlayers实现点闪烁扩散效果
Sep 24 #Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 #Javascript
vue3.0生命周期的示例代码
Sep 24 #Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 #Javascript
You might like
怎样去阅读一份php源代码
2009/08/21 PHP
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
Javascript的闭包详解
2014/12/26 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
微信小程序文字显示换行问题
2019/07/28 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
详解python中的json和字典dict
2018/06/22 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
python实现文本界面网络聊天室
2018/12/12 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
pygame实现弹球游戏
2020/04/14 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
Python之字典添加元素的几种方法
2020/09/30 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
入学申请自荐信范文
2014/02/26 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL