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使用Overlay添加Popup弹窗实现的文章就介绍到这了,更多相关Vue Openlayers添加Popup弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！