谷歌地图绘制 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)
  }
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容