- 地圖加載慢原因
使用百度地圖的自定義樣式。地圖會加載很多背景圖片，如圖一，據統計img加載80多個
打開這些小圖片（圖二）發現，圖片包含了背景，路段，文字。現在發現導致進入頁面出現白屏，加載慢就是因為大量的http請求加載圖片的問題。
圖一：
圖二：
- 百度個性化地圖
那么百度個性化地圖原理就是，用戶自定義配置的顏色樣式導成json文件，在使用中將這些json文件轉化為無數的小圖片作為背景。
-
優點
異步加載圖片，根據當前的視圖區加載對應的圖片,拖動或縮小繼續異步加載圖片。避免加載其他無用的圖片，造成浪費。
-
缺點
缺點也是顯而易見的，因為背景是圖片，首次加載出現白屏，當拖動或者縮小，超出的之前的可視區，還是會加載圖片，出現部分白屏。
解決方案
- 監聽地圖加載完成事件，添加loading
根據現有大屏地圖頁使用場景，每次進入前會展示芙蓉湖圖片歡迎頁。之后才會進入地圖頁。正好可以利用歡迎頁作為loading作用，進行優先加載地圖資源，當監聽地圖加載完成事出發，進入地圖頁會解決首次進入白屏原因。
// 監聽地圖加載完成 http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html
map.addEventListener('tilesloaded', () => {
if (!this.mapLoad) {
this.mapLoad = true
}
})
芙蓉湖歡迎頁，點擊進入按鈕添加加載中的狀態，加載完成可以進入。
-
優點：可以解決首次加載白屏問題，修改成本低。
-
缺點：
-
當拖動或者縮小時候還是會出線部分白屏的問題。
-
首次加載需要等待5~6秒 ，應該可以接受（每次演示需要提前打開歡迎頁，等領導看到歡迎頁，才會進入地圖頁）
- 替換成高德地圖，解決所有白屏問題
根據百度地圖和高德地圖對比，高德的個性地圖，背景顏色是根據主題設定的。打開network查看。如圖三，高德地圖的img請求只有14個，文字標注道路信息等，都是通過請求配置文件生成。相比百度地圖的背景圖片，減少多次圖片資源占用加載時間，將地圖文字道路信息，分離到配置文件，設置地圖原有的背景色，加快地圖加載時間。
-
優點：可以解決加載白屏問題，包含解決現有拖拽縮小的白屏。
-
缺點： 需要重構，將現有代碼拆分組件，考慮遠程操控是否保留，預警功能划分，視頻流替換等問題。
圖三：
圖四：
