用 Javascript 读出 KML 文件答案

【问题标题】：read out KML FIle with Javascript用 Javascript 读出 KML 文件
【发布时间】：2013-08-04 15:29:43
【问题描述】：

我有一个包含城市区域的 KML 文件，并希望使用 Javascript 将其读取出来，以便在地图上显示这些叠加层（多边形）（Google Maps API v.3）此外，我还想从KML 文件和对象中的地区名称。但我不知道该怎么做。任何人都可以帮我解决这个问题。谢谢

【问题讨论】：

标签： javascript google-maps-api-3 kml

【解决方案1】：

这是紧凑的 KML 解析器代码。这仅适用于 google.maps 标记和多边形。

html

<input type='file' accept=".kml,.kmz" onchange="fileChanged()">

脚本，我用的是打字稿，但和javascript差不多

  file: any
  fileChanged(e) {
    this.file = e.target.files[0]
    this.parseDocument(this.file)
  }
  parseDocument(file) {
    let fileReader = new FileReader()
    fileReader.onload = async (e: any) => {
      let result = await this.extractGoogleCoords(e.target.result)

      //Do something with result object here
      console.log(result)

    }
    fileReader.readAsText(file)
  }

  async extractGoogleCoords(plainText) {
    let parser = new DOMParser()
    let xmlDoc = parser.parseFromString(plainText, "text/xml")
    let googlePolygons = []
    let googleMarkers = []

    if (xmlDoc.documentElement.nodeName == "kml") {

      for (const item of xmlDoc.getElementsByTagName('Placemark') as any) {
        let placeMarkName = item.getElementsByTagName('name')[0].childNodes[0].nodeValue.trim()
        let polygons = item.getElementsByTagName('Polygon')
        let markers = item.getElementsByTagName('Point')

        /** POLYGONS PARSE **/        
        for (const polygon of polygons) {
          let coords = polygon.getElementsByTagName('coordinates')[0].childNodes[0].nodeValue.trim()
          let points = coords.split(" ")

          let googlePolygonsPaths = []
          for (const point of points) {
            let coord = point.split(",")
            googlePolygonsPaths.push({ lat: +coord[1], lng: +coord[0] })
          }
          googlePolygons.push(googlePolygonsPaths)
        }

        /** MARKER PARSE **/    
        for (const marker of markers) {
          var coords = marker.getElementsByTagName('coordinates')[0].childNodes[0].nodeValue.trim()
          let coord = coords.split(",")
          googleMarkers.push({ lat: +coord[1], lng: +coord[0] })
        }
      }
    } else {
      throw "error while parsing"
    }

    return { markers: googleMarkers, polygons: googlePolygons }

  }

输出

markers: Array(3)
0: {lat: 37.42390182131783, lng: -122.0914977709329}
...

polygons: Array(1)
0: Array(88)
0: {lat: -37.79825999283025, lng: 144.9165994157198}
...

【讨论】：

【解决方案2】：

据我了解，您正在寻找一个 parser 来解析 Google API 3 返回的 KML 响应.

如果是这样，请查看 kmlmapparser 专门针对 Google Maps Javascript API 版本 3。

从文档看来，原始代码的灵感来自：

Lance Dyas geoxml 项目位于：http://code.google.com/p/geoxml/ (v3 version)
Sterling Udell geoxml3 项目位于：http://code.google.com/p/geoxml3/

所以你也可以试试这个。

希望你能理解。

【讨论】：

我尝试了 kmlmapparser，但出现错误：XMLHttpRequest cannot load file:///C:/Users/.../kml/neighborhoods.kml。只有 HTTP 支持跨源请求。
您的 KML 是否与您的地图来自同一个域？如果没有，您将需要一个代理。
目前我的 KML 在 Eclipse 的一个 WebProject 中，我在本地主机上的 Tomcat Server v7 上运行它
如果 KML 在同一个域中（您可以使用相对 URL），它应该可以工作，但不同的浏览器处理 localhost 的方式不同。在这种情况下，使用实时网络服务器通常可以工作。

【解决方案3】：

有两种方法可以将 KML 文件提供给 Javascript。

1) 用户上传 KML 文件。在这种情况下，您可以使用 JS 的 File 和 FileReader API。它仅在 HTML5 中可用。这是一个在 HTML5 中读取文件的示例。

http://www.html5rocks.com/en/tutorials/file/dndfiles/

2) 如果 KML 文件位于您的终端或任何其他第三方服务器上。使用 Ajax 从该服务器获取文件并读入您的 JS 代码。只需将此文件作为 XML 读取即可。

var xmlDoc = new DOMParser().parseFromString(ajaxResponse,'text/xml');

在这两种情况下，同时阅读 KML 文档。您可以将 Geopoints 对象创建为 JSON。

【讨论】：