我有一个包含城市区域的 KML 文件,并想用 Javascript 将其读取出来,以便在地图上显示这些叠加层(多边形)(Google Maps API v.3)此外,我想从 KML 文件中保存 GeoPoints 和对象中的区域名称。但我不知道该怎么做。谁能帮我解决这个问题。谢谢
问问题
14857 次
3 回答
8
这是紧凑的 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}
...
于 2018-11-07T05:12:28.350 回答
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。
于 2013-08-03T12:07:32.440 回答
3
根据我的理解,您正在寻找一个来解析Google API 3 返回的响应。parser
KML
如果是这样,请查看专门针对 Google Maps Javascript API 版本 3的kmlmapparser 。
从文档看来,原始代码的灵感来自:
- Lance Dyas geoxml 项目位于: http ://code.google.com/p/geoxml/ (v3 版本)
- Sterling Udell geoxml3 项目位于:http ://code.google.com/p/geoxml3/
所以你也可以试试这个。
希望你能理解。
于 2013-08-03T12:07:51.273 回答