Vue Openlayers添加Popup弹窗
不情不愿 人气:9最近使用 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下载链接:
加载全部内容