Vue结合Openlayers使用Overlay添加Popup弹窗实现

最近使用 Vue 和 Openlayers 写了一个简单的小 dom ，用到了 Overlay 的弹窗功能，记录一下！

实验数据：test.xls

项目运行效果

创建元素：

  <div ref="popCon" id="popup" v-show="isShow"><!-- 弹出信息框 -->
    <span class="iconfont icon-guanbi" @click="closePop"></span>
    <ul id="info">
      <h4>基本信息</h4>
      <p>-------------------------------</p>
      <p>名称：{{name}}</p>
      <p>面积：{{output}}</p>
    </ul>
  </div>

引入依赖：

import 'ol/css';
import{ Overlay } from 'ol'

添加事件：

    getArea(){
      let _this = this;
      let sourceProj = this.map.getView().getProjection()//地图数据源投影坐标系4490
      let select = new Select();
      this.map.addInteraction(select);
      select.on('select',function(e){
        let area = Math.abs(getArea(e.selected[0].getGeometry(),{
          "projection": sourceProj,
          "radius": 6371008.8
        }))
        console.log(area);
        _this.output = _this.formatArea(area);
        console.log(_this.output);
        let elPopup = _this.$refs.popCon;
        let popup = new Overlay({
          element: elPopup, //挂载元素
          positioning:"center-center",
          stopEvent: false,
          offset:[0,-20]
        })
        _this.map.addOverlay(popup)
        let center = getCenter(e.selected[0].getGeometry().getExtent())
        if(center){
          _this.isShow = true
          popup.setPosition(center)
        }else{
          _this.isShow = false
        }
      })
    },

样式信息：

<style>
#popup{
  width: 200px;
  background-color: white;
  padding: 18px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgb(177,177,177);
}
#popup span{
  position: absolute;
  top: 0%;
  right: 0%;
}
#info{
  font-size: 14px;
  text-align: left;
}
</style>

运行结果：

dom下载链接：

Vue+Openlayers DOM 下载

到此这篇关于Vue结合Openlayers使用Overlay添加Popup弹窗实现的文章就介绍到这了,更多相关Vue Openlayers添加Popup弹窗内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • VUE + OPENLAYERS实现实时定位功能

    VUE + OPENLAYERS实现实时定位功能

    前言 本系列文章介绍一个简单的实时定位示例,示例的组成主要包括: 服务后端,使用 Java 语言编写,模拟生成 GeoJSON 数据. 前端展示,使用 Vue + OpenLayers ,负责定时向后端服务请求 GeoJSON 数据,并在以标签的形式展现定位数据. 实现的效果: 一.定义标签样式 var image = new CircleStyle({ radius: 5, fill: new Fill({ color: "rgba(255, 0, 0, 1)" }), stroke

  • Vue + OpenLayers 快速入门学习教程

    Vue + OpenLayers 快速入门学习教程

    Openlayers 是一个模块化.高性能并且功能丰富的WebGIS客户端的JavaScript包,用于显示地图及空间数据,并与之进行交互,具有灵活的扩展机制. 简单来说,使用 Openlayers(后面简称ol) 可以很灵活自由的做出各种地图和空间数据的展示.而且这个框架是完全免费和开源的. 前言 本文记录 Vue 使用 OpenLayers 入门,使用 OpenLayers 创建地图组件,分别使用 OpenLayers 提供的地图和本地图片做为地图. Overview OpenLayers

  • vue项目中openlayers绘制行政区划

    vue项目中openlayers绘制行政区划

    vue项目中openlayers画行政区划(区域范围),供大家参考,具体内容如下 原理 在地图上画需要的范围,实际上就是在地图上打上一圈点,然后依次将这些点用线连接,就形成了范围 引用相应的ol模块 import VectorLayer from 'ol/layer/Vector' import VectorSource from 'ol/source/Vector' import { Map, View, Feature } from 'ol' import { Style, Icon, St

  • Vue+Openlayers实现实时坐标点展示

    Vue+Openlayers实现实时坐标点展示

    本文实例为大家分享了Vue+Openlayers实现实时坐标点展示的具体代码,供大家参考,具体内容如下 直接上代码 <!--  * @Description: 实时坐标点  * @Author: Dragon  * @Date: 2020-12-18 10:08:40  * @LastEditTime: 2020-12-18 15:59:29  * @LastEditors: Dragon -->   <template>   <div id="map"&

  • vue+openlayers绘制省市边界线

    vue+openlayers绘制省市边界线

    本文实例为大家分享了vue+openlayers绘制省市边界线的具体代码,供大家参考,具体内容如下 1.创建项目 vue init webpack ol_vue 2.安装ol依赖包 npm install ol 3.引入axios npm install axios --save 文件目录:src/main.js import Vue from 'vue' import router from './router' import App from './App' import axios fro

  • vue使用openlayers实现移动点动画

    本文实例为大家分享了vue使用openlayers实现移动点动画的具体代码,供大家参考,具体内容如下 做项目时,本来打算仿照官网的Example中动画制作,引入vue中后,发现它引用的库函数一直报错,最后我去vue中安装的依赖库中去查找这个函数,果然没有.也就是说官方例子使用的库和我安装的OL库存在一定差异. 后来我还是用笨方法去解决了,最终效果如下: 总体思路是将移动目标实例一个Overlay对象,然后将如图5个经纬度点没两点之间分割成多个(200个),之后通过定时器不断setPositon.

  • Vue+Openlayers自定义轨迹动画

    本文实例为大家分享了Vue+Openlayers实现轨迹动画的具体代码,供大家参考,具体内容如下 <template> <div class="map-warp"> <h3> <a href="https://openlayers.org/en/latest/examples/feature-move-animation.html?q=polyline" target="_bank" >Openla

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

    本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码,供大家参考,具体内容如下 openlayers 这个效果是点击地图,弹出坐标信息. 点击地图边缘时,底图会跟着移动,使弹窗能完整显示出来. <template> <div class="vm"> <h2 class="h-title">弹窗 popup</h2> <div id="map" class="ma

  • vue使用openlayers创建地图

    vue使用openlayers创建地图

    vue项目中使用openlayers创建地图,供大家参考,具体内容如下 前期准备 安装node环境 安装cnpm 安装vue-cli 以上步骤网上都有很多教程 搭建vue项目 vue create vue-ol 按照提示一步步搭建vue项目 cd vue-ol npm run serve 浏览器打开 http://localhost:8080/ 就可以看到初始化的vue项目页面 vue项目安装openlayers cnpm i ol --s main.js中引入ol.css import 'ol

  • Vue结合Openlayers使用Overlay添加Popup弹窗实现

    Vue结合Openlayers使用Overlay添加Popup弹窗实现

    最近使用 Vue 和 Openlayers 写了一个简单的小 dom ,用到了 Overlay 的弹窗功能,记录一下! 实验数据:test.xls 项目运行效果 创建元素: <div ref="popCon" id="popup" v-show="isShow"><!-- 弹出信息框 --> <span class="iconfont icon-guanbi" @click="close

  • openlayers6之地图覆盖物overlay三种常用用法(popup弹窗marker标注text文本)

    openlayers6之地图覆盖物overlay三种常用用法(popup弹窗marker标注text文本)

    目录 1. 写在前面 2. overlay 实现popup弹窗 2.1 vue 页面 addPopup() 方法详解 2.2 autoPan 属性为false效果 3. overlay 实现 label标注信息 4 overlay 实现 text文本信息 5. 附上完整代码 1. 写在前面 常见的地图覆盖物为这三种类型,如:popup弹窗.label标注信息.text文本信息等. 上篇讲了overlay的一些属性方法事件等,这篇主要讲overlay三种最常用的案例.更多可以参考上篇内容openl

  • vue集成openlayers加载geojson并实现点击弹窗教程

    本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程,供大家参考,具体内容如下 第一步:安装vue-cli cnpm install -g @vue/cli 第二步:新建一个项目 1.新建项目 (vue-openlayers为项目名),并选择default模版 vue create vue-openlayers 2.安装openlayers cnpm i -S ol 第三步:写业务代码 1.删除掉HelloWorld.vue 新建 olmap.vue组件 comp

  • Vue利用openlayers实现点击弹窗的方法详解

    目录 解释 编写弹窗 引入 openlayer使用弹窗组件 点击事件 这个写的稍微简单一点就行了,其实呢,这个不是很难,主要是知道原理就可以了. 我想实现的内容是什么意思呢?就是说页面上有很多坐标点,点击坐标点的时候在相应的位置弹出一个框,然后框里显示出这个坐标点的相关数据. 解释 这个内容的其实就是添加一个弹窗图层,然后在点击的时候让他显示出来罢了. 编写弹窗 首先一点,我们这个弹窗需要自己写一下,具体的样式,展示的内容之类的,所以说写一个弹窗组件,然后在openlayer文件中引用加载. 比

  • Vue结合openlayers按照经纬度坐标实现锚地标记及绘制多边形区域

    Vue结合openlayers按照经纬度坐标实现锚地标记及绘制多边形区域

    目录 前言 1.安装openlayers 2.引入模块 3.地图与弹窗html样式 4.data数据定义 5.methods方法 6.mounted数据加载 7.锚地数据获取 前言 本文介绍vue结合openlayers实现根据返回的经纬度坐标完成锚地标记.绘制多边形区域: 注意点: 1.根据返回的经纬度取第一个坐标作为锚地图标位置: 2.根据返回的经纬度坐标数据,这里的后台数据需要处理(根据返回的数据处理成需要的格式),得到坐标数组渲染绘制区域画图显示在航道图层上. 3.关于数据渲染的问题:

  • 解决VantUI popup 弹窗不弹出或无蒙层的问题

    背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件: popup1show: true 即弹窗显示 <template> <div class="PopupTime"> <van-popup v-model="popup1show" position="bottom" :overlay="true" @click-overlay="clickOv

  • 动态创建Angular组件实现popup弹窗功能

    起步: 直接使用ngIf 把弹窗的DOM直接放在页面底下隐藏,通过ngIf这样的指令控制其显示. 改进: 封装成angular模块,通过服务控制其显示 直接使用ngIf的话,让人不爽的地方就在于不够通用,每个页面都得加DOM.改进的话可以把比较通用的一些DOM封装成组件,统一添加到全局页面中,并将显示的控制交给一个angular服务来控制其显示. 比如定义了两个组件(DialogComponent, AlertComponent),将他们都添加到AppComponent下,然后提供一个Popup

  • vue 实现一个简单的全局调用弹窗案例

    1.实现效果图 2.第一步,新建一个.vue文件 定义一个弹框的基本模板 style样式放在了文章的最底部,如果需要看效果,需要将样式放入这个vue文件里,样式是用less写的,需要你的项目引入less 注意:我这里的组件右上角关闭是一张图片 需要换成你自己本地的路径 <template> <div id="tip_alertModal"> <div class="t-alert-mask"></div> <di

  • vue利用openlayers加载天地图和高德地图

    vue利用openlayers加载天地图和高德地图

    目录 一.天地图部分 1.在vue中安装openlayers 二.高德地图部分 一.天地图部分 1.在vue中安装openlayers npm i --save ol 这里说的vue是基于脚手架构建的. 新建个页面,也就是vue文件,配置好路由.接着就是可以直接放入我的代码运行显示了. <template> <div class="wrapper"> <div>天地图</div> <div class="map"

随机推荐