谷歌地图绘制 kml 文件

最近遇到一个新的工作需求，在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 主要的绘制的方法有两个：
  1. 实例化解析kml 对象 geoXML3.parser()
  2. 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)
  }
}