vue overlay,vue+openlayers

　　本文主要介绍了某视频剪辑软件结合开放层使用覆盖物添加弹出弹窗实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

　　最近使用某视频剪辑软件和开放层写了一个简单的小多姆，用到了覆盖物的弹窗功能，记录一下！

　　实验数据：test.xls

　　项目运行效果

　　创建元素：

　　div ref= popCon id= popup v-show= is show ！-弹出信息框-

　　span class= icon font icon-Guan bi @ click= close pop /span

　　ul id=info

　　h4基本信息/h4

　　p - /p

　　p名称：{{name}}/p

　　p面积：{{output}}/p

　　/ul

　　/div

　　引入依赖：

　　导入”ol/CSS”；

　　从" ol "导入{覆盖}

　　添加事件：

　　getArea(){

　　让这个=这个

　　let sourceProj=this.map.getView().getProjection()//地图数据源投影坐标系4490

　　let Select=new Select()；

　　this.map.addInteraction(选择);

　　select.on(select ，函数(e){

　　设面积=数学。ABS(getArea(e . selected[0]).getGeometry()，{

　　“投影”:sourceProj

　　半径:6371008.8

　　}))

　　console.log(区域);

　　_这个。输出=_ this。格式区域(area)；

　　控制台。log(_ this。输出)；

　　让elPopup=_this .$ refs.popCon

　　let popup=new Overlay({

　　element: elPopup，//挂载元素

　　定位："中心-中心",

　　stopEvent: false，

　　偏移量：[0,-20]

　　})

　　_this.map.addOverlay(弹出)

　　let center=get center(e . selected[0]).getGeometry().getExtent())

　　如果（居中){

　　_this.isShow=true

　　popup.setPosition(居中)

　　}否则{

　　_this.isShow=false

　　}

　　})

　　},

　　样式信息：

　　风格

　　#popup{

　　宽度：200像素

　　背景色：白色；

　　填充：18px

　　边框半径：10px

　　box-shadow: 0 0 15px rgb(177，177，177)；

　　}

　　#弹出窗口范围{

　　位置：绝对；

　　top:0%；

　　右：0%;

　　}

　　#信息{

　　字体大小：14px

　　文本对齐：左对齐；

　　}

　　/风格

　　运行结果：

　　数字正射影像图下载链接：

　　Vue Openlayers DOM下载

　　到此这篇关于某视频剪辑软件结合开放层使用覆盖物添加弹出弹窗实现的文章就介绍到这了，更多相关某视频剪辑软件开放层添加弹出弹窗内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。