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

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

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

解釋

這個內容的其實就是添加一個彈窗圖層，然后在點擊的時候讓他顯示出來罷了。

編寫彈窗

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

比如我們創(chuàng)建一個 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>

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

openlayer使用彈窗組件

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

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

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

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

點擊事件

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

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

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

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

您可能感興趣的文章:

vue3響應式Object代理對象的讀取示例詳解
這篇文章主要為大家介紹了vue3響應式Object代理對象的讀取示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
vue實現(xiàn)豎屏滾動公告效果
這篇文章主要為大家詳細介紹了vue實現(xiàn)豎屏滾動公告效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue發(fā)布到nginx下請求后臺404問題及解決
這篇文章主要介紹了vue發(fā)布到nginx下請求后臺404問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue.js表單控件綁定示例盤點
這篇文章主要為大家介紹了一些Vue.js表單控件綁定示例盤點，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-07-07
VUE實現(xiàn)日歷組件功能
本篇文章主要介紹了VUE實現(xiàn)日歷組件功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
Element Cascader 級聯(lián)選擇器的使用示例
這篇文章主要介紹了Element Cascader 級聯(lián)選擇器的使用示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07
詳解vuelidate 對于vueJs2.0的驗證解決方案
本篇文章主要介紹了vuelidate 對于vueJs2.0的驗證解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-03-03
Vue項目中input框focus時不調出鍵盤問題的解決
這篇文章主要介紹了Vue項目中input框focus時不調出鍵盤問題的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue3如何自定義js文件(插件或配置)
這篇文章主要介紹了vue3如何自定義js文件(插件或配置)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue實現(xiàn)導航欄菜單
這篇文章主要為大家詳細介紹了Vue實現(xiàn)導航欄菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08