vue+openlayers,
点击弹出窗口其实就是添加一个弹出层，然后让它在点击的时候显示出来。本文将使用openlayers来实现这一效果。跟边肖学吧。
目录
说明使用弹出组件编写弹出窗口、引入openlayer和点击事件稍微容易一些。其实这个并不是很难，只需要知道原理就可以了。
我想实现什么？也就是说，页面上有很多坐标点。点击坐标点时，相应位置会弹出一个框，然后这个坐标点的相关数据会显示在框中。
解释
这个内容的目的其实就是添加一个弹出层，然后让它在点击的时候显示出来。
编写弹窗
首先我们需要自己写这个弹窗，具体的样式，显示的内容等等，所以写一个弹窗组件，然后在openlayer文件中引用加载。
例如，让我们创建一个msgModel.vue
模板
div class=msg-div
p class= msg-title“{ data . title } }/p
/div
/模板
脚本
导出默认值{
道具：[数据]，
data() {
返回{
}
},
方法：{
},
}
/脚本
样式范围。msg-div {
最小宽度：200像素；
填充：0px
背景色：# fff
垫底：5px
}。消息标题{
边距：0；
左填充：5px
高度：30px
行高：30px
字体大小：13px
颜色：# fff
}
/风格
以上是我自己随机演示的，然后跟着你自己的。
引入
然后在openlayer文件中介绍。
从“@/views/modules/wjw/demo/msgModel”导入msg model
然后像普通子组件一样加载它。
组件：{
msgModel，
},
然后添加到界面。
msg-model ref= msg form :data= data /msg-model
其中该数据是过去要显示的值。
openlayer使用弹窗组件
初始化地图时，我们将这个弹出窗口加载到openlayer中。
OverlayForm=new Overlay({ //创建层
元素：这个。$ refs.msgform.el，//图层绑定我们上方的弹出窗口。
autoPan:没错，
自动映射：{
时长：250，
}
})
overlay form . Set position(undefined)//设置弹出位置。一开始我们不让他展示，只是未定义。
Map.addOverlay(overlayForm) //然后在地图上加载弹出图层。
上面的代码写完后，地图上没有弹出窗口，因为我没有设置他的位置。
然后点击弹出。
点击事件
比如地图上有坐标点，我点击坐标点，然后这个弹出框显示被点击坐标点的数据信息。
map.on(click ，ev={
像素=ev.pixel//where鼠标点击，这应该是一个像素
mouse=ev . coordinate//鼠标点击的坐标位置
let feature=map . foreachfeatureatpixel(pixel，(feature)={
返回特征//找出你点击了哪个坐标。
})
If (feature) {//如果单击坐标点
this . data=feature . Get( data )//获取坐标点的数据
overlay form . Set position(mouse)//设置弹出窗口的位置。
}否则{
overlay form . set position(undefined)//如果不点击坐标点，弹出窗口会被隐藏。
}
})
好了，上面的代码基本实现了点击坐标点弹出信息框的功能，就不截图了。我们将就一下吧。
关于Vue如何使用openlayers点击弹出窗口的这篇文章到此结束。有关Vue openlayers点击弹出窗口的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。