使用Javascript读取KML文件

Question

使用Javascript读取KML文件

7

我有一个包含城市区域的KML文件，希望使用Javascript读取它，并在地图（Google Maps API v.3）上显示这些覆盖层（多边形）。此外，我还想将KML文件中的地理点和区域名称保存在一个对象中。但我不知道该怎么做。请问是否可以帮我解决这个问题。

谢谢！

- hannes

3个回答

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格式。

- Deepak Gangore

3

根据我的理解，您正在寻找一个解析Google API 3返回的KML响应的解析器。

如果是这样，请查看kmlmapparser，特别适用于Google Maps Javascript API版本3。

从文档中可以看出，原始代码受以下项目启发：

- Lance Dyas的geoxml项目：http://code.google.com/p/geoxml/（v3版本） - Sterling Udell的geoxml3项目：http://code.google.com/p/geoxml3/ 所以您也可以尝试使用这个。

希望您能理解。

- Praveen

我尝试了KmlMapParser，但出现了错误：XMLHttpRequest无法加载文件：///C:/Users/.../kml/neighborhoods.kml。跨域请求仅支持HTTP。 - hannes

你的KML文件是否与地图来自同一域名？如果不是，你需要使用代理。 - geocodezip

目前我的KML文件在Eclipse的Web项目中，并在本地Tomcat Server v7上运行。 - hannes

如果KML在同一域中（您可以使用相对URL），它应该可以工作，但不同的浏览器会以不同的方式处理localhost。在这种情况下，通常使用实时Web服务器可以解决问题。 - geocodezip

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- John · Accepted Answer

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

html

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

脚本，我使用typescript，但它与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}
...