最近遇到一個新的工作需求奉芦，在Google Map 上繪制 kml 文件對應(yīng)的圖層多望。
需求分析:
1、Google map 繪制圖層
2爆安、需要解析kml 文件
經(jīng)過調(diào)研發(fā)現(xiàn)叛复，Google Map 本身就支持以kml 文件繪制圖層。
Google map api扔仓，請使用正確的上網(wǎng)方式打開褐奥。
相關(guān)實現(xiàn)代碼如下
var kmlLayer = new google.maps.KmlLayer();
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
使用Google Map api 的限制：
- google 要求提供的kml 文件存放在公網(wǎng)環(huán)境上，這樣google 服務(wù)器才可以訪問到kml 文件解析并加載
- google 要求kml 文件存放在公網(wǎng)環(huán)境上翘簇，會產(chǎn)生信息安全問題撬码，因為kml 文件可能包含用戶的部分信息，并不一定適合向google 公開
google 訪問kml 文件的安全性問題版保，那么就需要本地解析并繪制kml 文件到google map 上
解決方案：geoxml3 -- Apache License
具體實現(xiàn)：
- 本地下載geoxml3.js 文件
- geoxml 主要的繪制的方法有兩個：
- 實例化解析kml 對象 geoXML3.parser()
- kml 解析繪制函數(shù) parse()
geoXML3簡單的實現(xiàn)原理：
a. 通過xhr(Ajax 或者 Fetch)對象讀取到kml 文件
b. 拆分處理讀取到kml 字符串呜笑，生成dom 結(jié)構(gòu)，便于繪制window information
c. 處理字符串的通知彻犁，提取數(shù)據(jù)叫胁。調(diào)用google.maps.Marker / google.maps.Polyline 繪制marker 和多邊形，然后添加到google 實例對象上
如果需要自定義繪制 window info, 則需要修改
createInfoWindow(placemark, doc, gObj) {
// placemark 對象包含kml 各個節(jié)點的數(shù)據(jù)
// doc 解析生成的dom 節(jié)點總和
// 調(diào)用gobj 生成google map 組件的實例
// 點擊kml 文件打開window infor 事件
google.maps.event.addListener(gObj, "click", function (e) {
...
// 可以通過以上的參數(shù)提取出需要的數(shù)據(jù)汞幢，通過回調(diào)將數(shù)據(jù)傳遞出去驼鹅，自定義渲染的內(nèi)容
...
callback(featurData)
}
}
