最近遇到一个新的工作需求，在Google Map 上绘制 kml 文件对应的图层。
需求分析:
1、Google map 绘制图层
2、需要解析kml 文件
经过调研发现，Google Map 本身就支持以kml 文件绘制图层。
Google map api，请使用正确的上网方式打开。
相关实现代码如下
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 文件存放在公网环境上，这样google 服务器才可以访问到kml 文件解析并加载
- google 要求kml 文件存放在公网环境上，会产生信息安全问题，因为kml 文件可能包含用户的部分信息，并不一定适合向google 公开
google 访问kml 文件的安全性问题，那么就需要本地解析并绘制kml 文件到google map 上
解决方案：geoxml3 -- Apache License
具体实现：
- 本地下载geoxml3.js 文件
- geoxml 主要的绘制的方法有两个：
- 实例化解析kml 对象 geoXML3.parser()
- kml 解析绘制函数 parse()
geoXML3简单的实现原理：
a. 通过xhr(Ajax 或者 Fetch)对象读取到kml 文件
b. 拆分处理读取到kml 字符串，生成dom 结构，便于绘制window information
c. 处理字符串的通知，提取数据。调用google.maps.Marker / google.maps.Polyline 绘制marker 和多边形，然后添加到google 实例对象上
如果需要自定义绘制 window info, 则需要修改
createInfoWindow(placemark, doc, gObj) {
// placemark 对象包含kml 各个节点的数据
// doc 解析生成的dom 节点总和
// 调用gobj 生成google map 组件的实例
// 点击kml 文件打开window infor 事件
google.maps.event.addListener(gObj, "click", function (e) {
...
// 可以通过以上的参数提取出需要的数据，通过回调将数据传递出去，自定义渲染的内容
...
callback(featurData)
}
}
