使用 Javascript 读出 KML 文件

2023-11-24

我有一个包含城市区的 KML 文件,想用 Javascript 读出它,以便在地图上显示这些叠加层(多边形)(Google Maps API v.3)此外,我想从 KML 文件中保存 GeoPoints 和对象中的区域名称。 但我不知道该怎么做。任何人都可以帮我解决这个问题。 谢谢


这是紧凑的 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 }

  }

output

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

polygons: Array(1)
0: Array(88)
0: {lat: -37.79825999283025, lng: 144.9165994157198}
...
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Javascript 读出 KML 文件 的相关文章

  • 声明为对象文字与函数的剔除视图模型之间的区别

    在knockout js中 我看到视图模型声明为 var viewModel firstname ko observable Bob ko applyBindings viewModel or var viewModel function
  • AJAX 安全问题

    我希望能够解决一些关于 AJAX 安全性的问题 这是我试图理解的一个场景 假设我正在使用 AJAX 向页面请求一些半敏感材料 例如 我将把用户的 ID 传递给一个 php 文件 并返回一些关于他们自己的信息 现在 是什么阻止人们模拟此 Ja
  • 在 Node.js 中生成带条形码的 pdf

    我在用https github com devongovett pdfkit https github com devongovett pdfkit生成 PDF 文件 我可以简单地使用类似的方法 app get get pdf req re
  • 有没有办法动态更改 jqGrid 的单元格值?

    这个问题可能已经被问过很多次了 但我想知道是否可以动态更改 jqgrid 的单元格值 我基本上有一个网格 它通过 JSON 字符串加载数据 在特定列的某些行上 该值可能为 null 因此 预先知道哪个行 ID 是一个问题 然后能够将 nul
  • JAVASCRIPT - 为什么这个对象没有改变?

    function myFunc theObject theObject make Ford model Focus year 2006 var mycar make Honda model Accord year 1998 var x my
  • Javascript 将对象推送为克隆

    我将 d3 用于交互式网络应用程序 我需要绑定的数据在交互过程中发生变化 并且由 JSON 变量中的一些选定对象组成 为此 我在 JSON 变量上使用了映射 并进行了一些查询来选择适当的对象 对象被推送到列表中 并且该列表被绑定为新数据 我
  • 如何在React Native的MapView中设置标记

    我想在React Native中的MapView上设置一个标记 但是通过官方文档找不到任何信息MapView https facebook github io react native docs mapview html content 如
  • 从选择 onChange 调用 javascript 函数 [重复]

    这个问题在这里已经有答案了 所以我有一个简单的 HTML 选择框和一个 javascript 警报功能 我希望选择框有一个 onchange 事件来调用 javascript 警报函数 这是我到目前为止所拥有的 HTML div Type
  • 如何捕获 Google 地图的 OverQuotaMapError?

    如果我的 javascript 代码尝试在一天内加载 Google 地图 API 超过 25 000 次 那么 Google 会将 OverQuotaMapError 写入 window console 看https developers
  • 更新存储在 chrome 扩展本地存储中的对象

    我正在开发一个 chrome 扩展 我将存储服务器发送的对象 例如 我将收到 命令 id 1 类型 A 大小 B 优先级 C 如果我有一个数据库 我会将其作为表中的一行插入commands 使用 chrome storage 我将这些对象的
  • 如何通过setTimeout函数定期打印数字?

    var i 0 function counter for i i lt 100 i setTimeout gt console log i 2000 counter 我想以 2 秒的间隔打印 i 但它立即打印 每次打印调用只需要几微秒 为什
  • websockets 如何处理同一浏览器的两个选项卡

    I have 1 个 PHP 服务器 提供 http 请求 和 1 node js 发布更新的数据消息 每个连接都带有 websocket php 服务器设置其 cookie 在一个浏览器中 此 cookie 可在所有选项卡中使用 当浏览器
  • .points 不透明度/大小在三个.js 内

    我回来回答有关 points 的第二个问题 这次想知道如何将不透明度从 0 更改为 1 然后又回到距发射器的特定像素距离内 var particleCount 14 particles new THREE Geometry pMateria
  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • Angular 4 Http POST 不起作用

    我希望每个人都做得很好 我最近开始使用 Angular 4 4 我一直在尝试将数据发布到我的 api 服务器 但不幸的是它不起作用 我花了大约两天的时间 但仍然没有成功 甚至已经尝试过 6 7 篇文章角 io https angular i
  • Chrome --app 相当于 Firefox\IE

    我有一个网络应用程序 客户要求单击不同按钮时更改浏览器窗口大小 我发现在那link https stackoverflow com questions 13436855 launch google chrome from the comma
  • 可以禁用幻灯片的触摸模拟但不能禁用滚动条(危险的滑动器)吗?

    我的页面上有一个危险的滑动器 它成功地模拟了幻灯片和随附滚动条上的触摸事件 允许单击鼠标并移动以向左或向右滑动幻灯片 这很好 但我现在在滑动器内的幻灯片上调用了可拖动 这意味着我需要停止此触摸模拟 拖动幻灯片并同时移动它们会引起混乱 但仅限
  • Angular JS - 使服务可以从控制器和视图全局访问

    假设我们有以下服务 myApp factory FooService function 然后 从控制器中 我会说 myApp controller FooCtrl scope FooService function scope FooSer
  • Firebase + Node.js:错误:找不到 XMLHttpRequest 兼容性库

    Firebase Node js On iOS 安装的 Node js npm 安装 firebase save 节点测试 js 其中 test js 是一个非常简单的连接到 Firebase 的脚本 var firebase requir
  • 当php脚本通过ajax运行时显示进度条

    我有一个通过 ajax 向服务器提交值的表单

随机推荐

  • 创建一个只有一个对角线的 UIView

    我需要创建一个左边框倾斜的 UIView45度我想知道 有没有办法以编程方式实现这一目标 做CA变换3D在这种情况下帮助我 因为它不是真正的 3D 旋转 Edit 这是一张图片 更多地解释了我所需的输出 如果您只想要没有内容的形状 那么您可
  • gmpxx.h:没有这样的文件或目录

    我刚刚安装了一个全新的 mingw 32 位 下载它来自官方项目页面来自 Sourceforge 我安装了包中的所有内容 所有编译器等等 然后我从下载hereMinGW 的 gmp 我将 gmp 5 0 1 1 mingw32 src ta
  • 显示用户窗体后将焦点设置回应用程序窗口

    当显示用户表单时 运行其Show方法 它不仅显示在屏幕上 而且还获取焦点 例如击键的目的地 比如说 用户窗体是一个定制的工具栏 它是Show开火Workbook Open 但表单本身的使用相对较少 因此我们希望焦点在其出现后立即返回到主应用
  • WPF 元素事件处理程序中的 UI 更新

    WPF 中的 UI 更新存在问题 我有这样的代码 private void ButtonClick EventHandler object sender RoutedEventArgs e Label Visibility Visibili
  • Grails / Groovy - 域对象 - 其属性映射

    如何获取我的域对象之一上仅用户定义属性的键 值的映射 问题是 如果我自己这样做 我会得到我的属性加上类 元类 约束 闭包等 我认为 Grails 可以相当容易地做到这一点 因为它是在脚手架代码中的某个级别完成的 对吗 我自己怎样才能做到这一
  • 循环 PHP 嵌套数组 - 将值提取到刀片视图中 (Laravel)

    我知道关于这个主题有很多问题 但没有一个完全解决这个问题 据我所知 我在 Laravel 项目中有一个 PHP 数组 仅供参考 是通过 Guzzle 响应返回的 PHP 数组 users array 2 error gt bool fals
  • ApplicationException 或创建自定义异常?

    在我的文件存储库中 当InsertFile 方法称为 当上传文件大小超过限制时 当超出存储容量时 目前我只是抛出一个ApplicationException与相关消息 public void InsertFile HttpPostedFil
  • 尽管已设置操作,但单击分段时仍显示 NSSegmentedControl 菜单

    我的 UI 上有一个带有 4 个按钮的 NSSegmentedControl 该控件连接到一个方法 该方法将根据单击的段调用不同的方法 IBAction performActionFromClick id sender NSInteger
  • 使用 AsyncTask 下载文件

    我正在尝试使用 asyncTask 下载文件 但无法正常工作 没有错误消息或什么也没有 只是不要下载文件 我尝试了所有方法 但似乎暂时没有输入 任何人都知道可以做什么是问题所在吗 我在手机上测试过 网址也可以 class DownloadF
  • 在 Matlab 中禁用绘图

    我有一些用 Matlab 编写的程序 由于某些原因我需要运行几次 调试 使用不同的输入进行测试等 但是 程序及其各种功能绘制了很多图表 因此每次运行程序时 我都必须等待所有图表显示出来 这是非常烦人且耗时的 尤其是当您使用小型笔记本电脑 程
  • ag-grid 在单元格渲染器之上渲染

    我已经尝试了我所知道的一切 让我的自定义下拉单元格渲染器显示为 agGrid 示例中最上面的 div 我玩过 z index 定位等 但没有运气 唯一做的事情就是转到其中一个有问题的行并取消选择该行的转换 但随后该行就消失了 欢迎任何想法
  • SVG 九切片缩放

    怎样才能获得九片缩放在 SVG 中 具体来说 我正在寻找一种方法来定义 SVG 对象 使其在调整大小时表现得像九切片对象 某些元素保持其尺寸 而其他元素随容器缩放 如果您打算将其应用于 svg 那么CSS3 边框和背景如果您引用 svg s
  • C# - 将文本文件加载为类

    有没有办法将 txt 文件作为类加载 然后我的主程序可以从中调用函数 我基本上试图向我的简单应用程序添加 mod 支持 用户可以从每个文件中选择选项 该文件遵循类似 但不相同 的格式 带有一堆在主程序中调用的空位 函数 我怎样才能做到这一点
  • Keras 用于多任务学习神经网络的顺序 API 与函数式 API

    我想为多任务深度学习任务设计一个神经网络 在 Keras API 中 我们可以使用 顺序 或 函数 方法来构建这样的神经网络 下面我提供了用于构建网络的代码 使用两种方法构建具有两个输出的网络 顺序 seq model Sequential
  • Android任务和进程、SingleTask和SingleInstance

    我已经阅读了 Google Android 开发者页面 但是任务的概念 http developer android com guide components tasks and back stack html 真让我困惑 当我读到 Sin
  • 如何使用 javascript 在 html 中截取屏幕截图?

    我是 html 和 javascript 的新手 我正在尝试截取我的 html 页面的屏幕截图并将其另存为jpg or png file Here is my html image 我想通过拖放来截取右侧的屏幕截图 灰色 divs按图像右上
  • CoreData:错误:(14) 数据库 I/O 错误

    在 XCode 中编译并运行项目时使用Core Data我收到一个以前从未见过的错误 2013 09 12 16 59 10 156 myapp 57811 70b CoreData error 14 I O error for datab
  • 使用反应式扩展进行数据库轮询

    我必须及时查询数据库以了解遗留系统的状态 我想过将查询包装在Observable 但我不知道正确的方法 基本上 每 5 秒就会出现相同的查询 但我担心我将不得不面对这些问题 如果查询执行需要 10 秒怎么办 我不想 如果前一个查询仍在处理中
  • 与 javascript 或 jquery 中的 .some() 方法等效吗?

    正在寻找 与 javascript 中的某些方法等效 和 如果在数组中则仅返回一个值 但只看到了确定变量类型的方式的答案 或者有太多不必要的答案 我绕过 html 中的所有输入 我想要这样的东西 goodsFilter find input
  • 使用 Javascript 读出 KML 文件

    我有一个包含城市区的 KML 文件 想用 Javascript 读出它 以便在地图上显示这些叠加层 多边形 Google Maps API v 3 此外 我想从 KML 文件中保存 GeoPoints 和对象中的区域名称 但我不知道该怎么做