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="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弹窗内容请搜索北冥有鱼以前的文章或继续浏览下面的相关文章希望大家以后多多支持北冥有鱼！

您可能感兴趣的文章:

• Vue利用openlayers实现点击弹窗的方法详解
• Vue使用openlayers实现绘制圆形和多边形
• vue使用openlayers创建地图
• Vue+Openlayers实现实时坐标点展示
• vue利用openlayers加载天地图和高德地图
• Vue + OpenLayers 快速入门学习教程
• VUE + OPENLAYERS实现实时定位功能
• vue+openlayers绘制省市边界线
• Vue openLayers实现图层数据切换与加载流程详解