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 闭包深入理解(closure)
May 27 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
简单实现js放大镜效果
Jul 24 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
vue实现输入一位数字转汉字功能
Dec 13 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中的cookie不用刷新就生效的方法
2012/02/04 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
vue生命周期的探索
2019/04/03 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
通过代码实例了解Python sys模块
2020/09/14 Python
外科实习自我鉴定
2013/10/06 职场文书
企业厂长岗位职责
2013/12/17 职场文书
学生保证书范文
2014/04/28 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
思想道德自我评价2015
2015/03/09 职场文书
大学团日活动总结书
2015/05/11 职场文书
爱国电影观后感
2015/06/19 职场文书
生活小常识广播稿
2015/08/19 职场文书