<template>
  <div class="msg-div">
    <p class="msg-title">{{data.title}}</p>
  </div>
</template>
<script>
  export default {
    props: ['data'],
    data() {
      return {
        
      }
    },
    methods: {
      
    },
  }
</script>
<style scoped>
.msg-div {
  min-width: 200px;
  padding: 0px;
  background-color: #fff;
  padding-bottom: 5px;
}
.msg-title {
  margin: 0;
  padding-left: 5px;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #fff;
}
</style>

上邊是我自己隨便寫的DEMO，然后具體按照你自己的來。

引入

然后在openlayer文件引入。

import msgModel from '@/views/modules/wjw/demo/msgModel'

然后像正常使用子組件一樣加載一下就行。

    components: {
      msgModel,
    },

然后在界面加上。

<msg-model ref="msgForm" :data="data"></msg-model>

其中這個data是傳遞過去要展示的值。

openlayer使用彈窗組件

初始化地圖的時候，我們把這個彈窗加載到openlayer里面。

	overlayForm = new Overlay({  // 創(chuàng)建一個圖層
          element: this.$refs.msgForm.$el,   // 圖層綁定我們上邊的彈窗
          autoPan: true,
          autoPanAnimation: {
            duration: 250,
          }
        })
        overlayForm.setPosition(undefined)   // 設(shè)置彈窗位置，剛開始我們不讓他顯示，就是undefined就行
        map.addOverlay(overlayForm)  // 然后把彈窗的圖層加載到地圖上

上面的代碼寫完之后，地圖是沒有彈窗的，因為我沒沒有設(shè)置他的位置。

然后實現(xiàn)點擊彈出來。

點擊事件

比如說地圖上有坐標(biāo)點，我點擊坐標(biāo)點，然后彈出這個彈框，同時展示點擊坐標(biāo)點的數(shù)據(jù)信息。

	map.on('click', ev => {
          let pixel = ev.pixel   // 鼠標(biāo)點擊的位置，這個應(yīng)該是像素
          let mouse = ev.coordinate  // 鼠標(biāo)點擊的坐標(biāo)位置
          let feature = map.forEachFeatureAtPixel(pixel, (feature) => {
            return feature   // 查找出點擊的哪個坐標(biāo)
          })
          if (feature) {  // 如果是點擊了坐標(biāo)點
            this.data= feature.get('data')  // 獲取坐標(biāo)點的數(shù)據(jù)
            overlayForm.setPosition(mouse)  // 設(shè)置彈窗的位置
          } else {
            overlayForm.setPosition(undefined)  // 如果沒有點擊坐標(biāo)點，就隱藏彈窗
          }
        })

好了，上邊代碼基本上就實現(xiàn)了點擊坐標(biāo)點彈出信息框功能，就不截圖了，湊合看吧

到此這篇關(guān)于Vue利用openlayers實現(xiàn)點擊彈窗的方法詳解的文章就介紹到這了,更多相關(guān)Vue openlayers點擊彈窗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: