框架構建:
業務需求:地圖或者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,測試呼叫