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实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
解决vue scoped scss 无效的问题
Sep 04 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 中执行排序与 MySQL 中排序
2009/04/21 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
关于js datetime的那点事
2011/11/15 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
JavaScript实现数值自动增加动画
2017/12/28 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
python高阶爬虫实战分析
2018/07/29 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
2014年党支部学习材料
2014/05/19 职场文书
走群众路线学习笔记
2014/11/06 职场文书
2014教师年度工作总结
2014/11/10 职场文书
期末个人总结范文
2015/02/13 职场文书
销售开票员岗位职责
2015/04/15 职场文书
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
redis cluster支持pipeline的实现思路
2021/06/23 Redis
pycharm无法安装cv2模块问题
2022/05/20 Python