全域性地圖+router-view實現方式

渣渣大叔發表於2024-03-08

框架構建:

業務需求:地圖或者cesium為專案基本元件,且公用,在各個頁面中開發對應功能方法

實現:

1,構建layout

//原則上我們使用router-view控制頁面,即使用路由呼叫各個頁面
//在layout中我們需要給一個div掛載對應的地圖例項
//將router-view覆蓋於例項之上

//注意
//router-view的transform元件存在事件阻斷機制,在該層級中設定pointer-event:none;
//此時 地圖放大縮小及點選事件正常使用,但router-view中的各類事件被攔截失效
//在router-view外包裹一層div 在div層設定pointer-event:none,在router-view層設定pointer-event:auto,地圖互動可用,頁面互動可用
//當頁面內部採用div等塊級結構,會產生隱藏的寬度,導致滑鼠在移動到該塊及結構時事件被阻斷,無法觸發地圖互動
//此處 還是採用router-view設定css->pointer-event:none,而具體頁面的卡片皮膚中(卡片包裹層),設定pointer-event:auto,這樣路由可以用,地圖也能用

2,全域性掛載地圖

//掛載地圖例項到window,如window.地圖
//這樣每個頁面中 可直接透過window.地圖.api操作地圖互動



//注意
//外部引入地圖js問題
//在vue中 我們希望地圖為包或者外掛的形式存在,即能切實看到相應的實體構建程式碼,但實際情況中,我們會遇到地球只是一個外部js的情況
//此時 在vue的public公共檔案下的index.html中,我們可以以標籤的形式引入地圖
//<script src="http://xxxxxxxxxxx/test.js"><script>
//此時 相當於把test.js下所有內如引入到了vue中
//使用時 只需要this.test(自定義變數) = new test(引數)->這裡的new test(引數)就是test.js中提供的方法/類
//這樣其實也可以引入大多數類庫,只是名稱空間上可能會衝突導致不知道具體找的是哪一個

3,測試呼叫

相關文章