快捷導(dǎo)航

Vue利用openlayers實(shí)現(xiàn)點(diǎn)擊彈窗的方法詳解

更新時(shí)間：2022年06月21日 11:21:31 作者：王+V

點(diǎn)擊彈窗其實(shí)就是添加一個(gè)彈窗圖層，然后在點(diǎn)擊的時(shí)候讓他顯示出來罷了。本文將利用openlayers實(shí)現(xiàn)這一效果，快跟隨小編一起學(xué)習(xí)一下吧

我想實(shí)現(xiàn)的內(nèi)容是什么意思呢？就是說頁面上有很多坐標(biāo)點(diǎn)，點(diǎn)擊坐標(biāo)點(diǎn)的時(shí)候在相應(yīng)的位置彈出一個(gè)框，然后框里顯示出這個(gè)坐標(biāo)點(diǎn)的相關(guān)數(shù)據(jù)。

解釋

這個(gè)內(nèi)容的其實(shí)就是添加一個(gè)彈窗圖層，然后在點(diǎn)擊的時(shí)候讓他顯示出來罷了。

編寫彈窗

首先一點(diǎn)，我們這個(gè)彈窗需要自己寫一下，具體的樣式，展示的內(nèi)容之類的，所以說寫一個(gè)彈窗組件，然后在openlayer文件中引用加載。

比如我們創(chuàng)建一個(gè) msgModel.vue

<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>

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

openlayer使用彈窗組件

初始化地圖的時(shí)候，我們把這個(gè)彈窗加載到openlayer里面。

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

上面的代碼寫完之后，地圖是沒有彈窗的，因?yàn)槲覜]沒有設(shè)置他的位置。

然后實(shí)現(xiàn)點(diǎn)擊彈出來。

點(diǎn)擊事件

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

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

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

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

您可能感興趣的文章: