用Javascript讀出KML文件

Question

我有一個帶有城市地區的KML文件，並且想用Javascript讀出它，以便在地圖上顯示這些疊加層（多邊形）（Google Maps API v.3）。此外，我想從KML文件中保存GeoPoints，對象中的區域名稱。 但是我不知道該怎么做。 有人可以幫我解決這個問題。 謝謝

Answer 1

將KML文件提供給Javascript的方式有兩種。

1）用戶上傳KML文件。 在這種情況下，您可以將File和FileReader API用於JS。 僅在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。

Answer 2

據我了解，您正在尋找一種parser 來解析Google API 3返回的KML響應。

如果是這樣，請查看專門用於Google Maps Javascript API版本3的kmlmapparser 。

從文檔看來，原始代碼的靈感來自：

• Lance Dyas geoxml項目， 網址為： http : //code.google.com/p/geoxml/ （第3版 ）
• Sterling Udell geoxml3項目位於： http : //code.google.com/p/geoxml3/

所以您也可以嘗試一下。

希望你能理解。

Answer 3

這是緊湊的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}
...