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 getComputedStyle获取和设置style的原理
Oct 10 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
vue+element实现表单校验功能
May 20 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 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
中英文字符串翻转函数
2008/12/09 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
基于JavaScript实现弹幕特效
2020/08/27 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
Django的Modelforms用法简介
2019/07/27 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
文明城市标语
2014/06/16 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
寒假安全保证书
2015/02/28 职场文书
自荐信模板大全
2015/03/27 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python