用Javascript读取KML文件
我有一个包含城市地区的KML文件,我想用Javascript读取它,以便在地图上显示这些覆盖(多边形)(Google Maps API v.3)。此外,我想保存KML文件中的地质点和对象中的地区名称。 但是我不知道怎么做。谁能帮我解决这个问题。用Javascript读取KML文件,javascript,google-maps-api-3,kml,Javascript,Google Maps Api 3,Kml,我有一个包含城市地区的KML文件,我想用Javascript读取它,以便在地图上显示这些覆盖(多边形)(Google Maps API v.3)。此外,我想保存KML文件中的地质点和对象中的地区名称。 但是我不知道怎么做。谁能帮我解决这个问题。 谢谢有两种方法可以将KML文件提供给Javascript 1) 用户上传KML文件。在这种情况下,您可以使用JS的文件和文件阅读器API。它仅在HTML5中可用。下面是一个在HTML5中读取文件的示例 2) 如果KML文件位于您的终端或任何其他第三方服
谢谢有两种方法可以将KML文件提供给Javascript 1) 用户上传KML文件。在这种情况下,您可以使用JS的文件和文件阅读器API。它仅在HTML5中可用。下面是一个在HTML5中读取文件的示例 2) 如果KML文件位于您的终端或任何其他第三方服务器上。使用Ajax从该服务器获取文件并读入JS代码。只需将此文件作为XML读取即可
var xmlDoc = new DOMParser().parseFromString(ajaxResponse,'text/xml');
在这两种情况下,在阅读KML文档时。您可以将Geopoints对象创建为JSON。据我所知,您正在寻找一个
解析器来解析Google API 3返回的KML
响应
如果是这样的话,请特别关注谷歌地图Javascript API第3版
从文档中可以看出,原始代码的灵感来自:
- Lance Dyas geoxml项目位于:()
- Sterling Udell geoxml3项目位于:
所以你也可以试试这个
希望您理解。这里是紧凑的KML解析器代码。
这仅适用于google.maps标记和多边形
html
输出
markers: Array(3)
0: {lat: 37.42390182131783, lng: -122.0914977709329}
...
polygons: Array(1)
0: Array(88)
0: {lat: -37.79825999283025, lng: 144.9165994157198}
...
我尝试了KMLApparser,但出现了一个错误:XMLHttpRequest无法加载file:///C:/Users/.../kml/neighborhoods.kml. 跨源请求仅支持HTTP。您的KML是否与您的地图来自同一域?如果没有,您将需要一个代理。目前,我的KML在Eclipse中的一个WebProject中,我在本地主机上的Tomcat服务器v7上运行它。如果KML在同一个域中(您可以使用相对URL),它应该可以工作,但不同的浏览器处理本地主机的方式不同。在这种情况下,使用实时Web服务器通常是有效的。
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}
...