谷歌地图多边形会减慢浏览器速度

2024-07-03

我有一个将多边形绘制到 Google 地图上的应用程序。我使用 Angular 作为前端,并使用 NodeJS api 来提供多边形数据。

现在,我加载了大约 300 个多边形,每个多边形大约有 10,000 个纬度坐标,但我对数据进行了分页,因此我只渲染多边形总量的十分之一。我在顶部使用一个名为的角度模块角度谷歌地图 https://angular-ui.github.io/angular-google-maps/#!/,考虑到 GitHub 问题页面,该项目本身似乎有点死了,但我认为这并不重要。

我已将可编辑标志设置为 false,但即使仅显示 30 个复杂多边形,浏览器的速度似乎也会显着减慢。当我根本不绘制多边形时,这种情况不会发生。

我发现 KML 或 Fusion 表得到了很多推荐,但我希望不必转换我的数据,因为数据量巨大。

有人遇到过类似的问题吗?


我过去处理过类似的问题。首先我想提一下,我没有使用任何 Google Maps JS API 包装器,例如 Angular Google Maps 或 NgMaps,因为我发现这些库没有包装 API 的许多有用功能,或者做得效率低下。

我正在使用google.maps.Data layer https://developers.google.com/maps/documentation/javascript/datalayer#sample_geojson显示多边形。我发现这种方法比使用方法具有更好的性能google.maps.Polygon。所以这是我给你的第一个建议data layer尝试代替正多边形。它不需要剧烈的数据转换,因为数据层已经addGeoJson(geoJsonObject)方法,因为您的数据形式为lat and lngs应该很容易生成GeoJSON Feature对象,它看起来像这样:

{
"type": "Feature",
"properties": { ... },
"geometry": {
    "type": "Polygon",
    "coordinates": [ [lng1, lat1], [lng2, lat2],  .. (your data) ]
    }
}

或者使用一些库为您生成它。优点data layer就是它提供了很多功能,比如自定义样式、鼠标事件交互等。我建议你看看我的BoundariesExample正在利用的示例DataLayer可用于Github https://github.com/matej-pavla/Google-Maps-Examples或这个回答SO https://stackoverflow.com/questions/10888958/country-boundries-using-google-map-api-v3/37092260#37092260。 (顺便说一句,您还可以添加一个多边形Data Layer很容易像这样:map.data.add({geometry: new google.maps.Data.Polygon([coords])})但我建议采用上述方法,因为我稍后会提到使用 GeoJSON 格式的库)

我当时在地图上显示了超过 30K 的多边形,其中很多都非常复杂。因此,如果您仍然遇到缓慢的情况,我有一些更多的优化建议给您:

1.在地图上显示多边形之前先简化多边形。也就是说,如果您不介意从多边形中删除一些顶点以换取更好的性能。您可以将所有多边形添加到单个 GeoJSON 对象中,然后利用地图塑造者 https://github.com/mbloch/mapshaper使用实用程序来简化它们专门的算法 https://github.com/mbloch/mapshaper/wiki/Command-Reference#-simplify(互动示例here https://bost.ocks.org/mike/simplify/)。我不确定该实用程序是否可以作为库包含在node.js项目,因为我将它作为 PHP 的外部实用程序运行,但它可以非常快速地简化您的多边形。对于 300 个多边形,我怀疑您将能够即时执行此操作,或者当然您可以缓存结果。如果可以的话,请使用简化,因为它是所有方法中对性能影响最大的。

2.合并多边形。我发现减少多边形数量(例如将它们压缩为一个)可以提高性能。如果您的多边形不必作为单独的实体存在(因此,如果它们都可以着色为相同的颜色,则单击时显示相同的弹出窗口...),您可以合并它们。mapshaper's dissolve命令可以帮助您。

3.添加多个数据层并仅加载地图上(部分)可见的多边形。因此,例如在更大的缩放级别上,用户甚至无法看到数据提供的详细信息,您可以使用方法 1 简化多边形,并在放大时隐藏上层并显示非简化的多边形,并且仅显示那些落在 (甚至部分)在您当前的地图视图中。因此,您将计算所有多边形的边界矩形,获取当前地图视图的边界矩形并仅加载重叠的边界矩形。用户移动地图后,您可以获取另一个地图。当它们再次缩小时,隐藏较低级别并显示较高级别。看来当数据层features(特征是多边形、线、点或它们的集合)被隐藏,它们不会影响性能。

当然,您可以组合应用上述技术。您还可以利用FusionLayer,但这有一些限制(列在docs https://developers.google.com/maps/documentation/javascript/fusiontableslayer#limits), with Data层你有更多的控制权。

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

谷歌地图多边形会减慢浏览器速度 的相关文章

  • 替换 observableArray 中的项目

    我正在尝试替换某个项目的所有内容observableArray有新内容 var oldLocation ko utils arrayFirst self locations function item return item id valu
  • JavaScript 阻止表单提交

    当我按下 JavaScript 对话框上的取消按钮时 我试图让我的表单不提交 我有这个代码 document ready function submit click function e e preventDefault var link
  • 无法使用 webpack 和 Laravel mix 加载 popper.js

    我在我的项目中使用 bootstrap 4 beta 和 Laravel 5 4 并使用 npm 和 laravel mix 加载我的 js 依赖项 到目前为止 一切都运行良好 除了当我尝试使用 booostrap js 方法时 它向我抛出
  • 内存模型中的词法作用域是什么样的?

    假设我们有一个函数 function foo var x 10 function bar var y 20 return x y return bar console log foo 这在内存模型中会是什么样子 到目前为止 这就是我想象的堆
  • 如何解决:console.error:“redux-persist 无法创建同步存储。回退到“noop”存储

    我正在尝试在 React Native 应用程序中设置 redux persist 但是我遇到了这个错误 console error redux persist 无法创建同步存储 下降 返回 noop 存储 我尝试将 src redux i
  • 无法更新firebase版本[重复]

    这个问题在这里已经有答案了 C Users Kashish gt npm install g firebase tools npm WARN optional SKIPPING OPTIONAL DEPENDENCY timed out 4
  • 使用 javascript 分割图像

    如何使用 javascript 获取单个图像的一部分并将其存储在数组中 然后在 html5 画布上随机显示 您可以使用drawImage 方法的剪切参数并将剪切的图像绘制到动态创建的画布上 一个例子可以是 function getClipp
  • .NET Core Web API 中的 IFormFile 对于 axios 和 ajax 文件上传为 null,但在 Postman 中有效

    介绍 因此 我有一个 API 可以使用以下签名将文件上传到 Azure public async Task
  • 使用 GruntJs 缩小脚本

    我有几个 js 文件 我似乎可以让 GruntJs 正确地连接 缩小它们 如果我单独做每一个 它们就会工作得很好 如果我单独组合然后尝试缩小组合文件 它也不起作用 Here is the error 有想法该怎么解决这个吗 或者也许是什么原
  • 使用 SVG 的部分边框/描边

    我正在使用 svg d3 创建由 矩形 元素组成的图表 为每个矩形添加部分边框 描边 仅在矩形顶部 的最佳方法是什么 Thanks 我不认为 SVG 支持仅描边矩形或路径的一部分 描边不像 CSS 边框 您还有其他一些选择 所有这些都需要一
  • 捕获node.js崩溃原因

    我有一个用 node js 编写的脚本 它使用 net 库并通过 tcp 与远程服务进行通信 该脚本使用 node script js gt gt log txt 命令启动 该脚本中使用 console log 函数记录的所有内容都会写入
  • 如何安装并开始使用 Vuetify 和 Vue.js 3

    我在哪里可以找到新的 Vuetify 版本与 Vue js 3 兼容的文档以及如何使用 Vue cli 安装和设置它 在 vue 2 中我们这样做 vue create project name then vue add vuetify 我
  • 使用 Phantom.js 将文件加载到 IMAGE 对象中

    我正在尝试加载图像并将其数据放入 HTMLImage元素但没有成功 var fs require fs var content fs read logo png 读取文件的内容后 我必须以某种方式将其转换为图像或将其打印到画布上 我试图使用
  • 如何检测安装的Chrome版本?

    我正在开发一个 Chrome 扩展程序 我想知道是否有一种方法可以检测用户正在使用哪个版本的 Chrome 获取 Chrome 的主要版本作为整数 function getChromeVersion var raw navigator us
  • sails-mongo 适配器,标准化错误消息

    我正在使用 sails mongo 适配器尝试 sailsJs 和 mongodb 将验证添加到模型后 当验证失败时 我会收到以下响应 Users js 模型 module exports schema true attributes na
  • 使用加载器 ts-node/esm.js 运行节点需要导入具有 .js 扩展名

    我正在尝试将我的 package json 设置为模块来运行节点 14 type module 如果我在打字稿文件上运行此命令 node loader ts node esm mjs experimental top level await
  • 获取此 contenteditable 元素中的当前行和行索引?

    我有一个这样的元素 span line 1 line 2 line 3 line 4 line 5 span 假设用户正在编辑 第 4 行 如何获取该 contenteditable 元素中的当前行和行索引 在插入符号位置 这是使用选择属性
  • nodejs npm 安装socket.io 错误

    我是新的 Node js 开发人员 我尝试简单的聊天项目 所以我想使用 NPM 安装 socket io 但出现此错误 我用的是ubuntu 12 04 ubuntu Ubuntu 1210 Masa st blog npm install
  • /lib64/libc.so.6:找不到版本“GLIBC_2.14”。为什么我会收到此错误?

    我在 Node js 中工作 我已经安装了鹰嘴豆泥包 它安装正确 我正在使用这个包来修改 pdf 文件 下载 pdf 时 我调用鹰嘴豆泥 单击下载时出现此错误 Error lib64 libc so 6 version GLIBC 2 14
  • 如何构建我的 PHP 项目?

    我即将开始另一个大型 PHP 项目 这次 我打算让项目文件夹变得整洁 所以我有几个关于保持我的项目干净和干燥的问题 如何区分 PHP 源文件和浏览器应访问的 PHP 文件 换句话说 我如何清楚哪些 PHP 文件提供输出 哪些提供函数或类定义

随机推荐

  • 如何创建“外部模块”打字稿定义文件以包含在 npm 包中?

    我最近添加了打字稿定义文件 https github com neilff redux ui router blob master index d ts对于开源 redux ui router 库 但我现在在 Typescript 1 7
  • 如何在 R 中将 mutate_at() 与两组变量一起使用

    使用 dplyr 我想将一列除以另一列 其中两列具有相似的模式 我有以下数据框 My data data frame var a 101 110 var b 201 210 number a 1 10 number b 21 30 我想创建
  • 如何在 R 中将 mutate_at() 与两组变量一起使用

    使用 dplyr 我想将一列除以另一列 其中两列具有相似的模式 我有以下数据框 My data data frame var a 101 110 var b 201 210 number a 1 10 number b 21 30 我想创建
  • Excel过滤公式用于数组中的多个条件和值

    我正在尝试从一个表中过滤一些信息 但我需要标准来查找数组内的一些信息 我将举一个例子来尝试解释我需要什么 我需要让每个人都从Array1 E2 E4列于TABLE1 A2 C4并且有Monday and Yes在各自的列上 希望这是有道理的
  • Excel过滤公式用于数组中的多个条件和值

    我正在尝试从一个表中过滤一些信息 但我需要标准来查找数组内的一些信息 我将举一个例子来尝试解释我需要什么 我需要让每个人都从Array1 E2 E4列于TABLE1 A2 C4并且有Monday and Yes在各自的列上 希望这是有道理的
  • QMAKE 中的 GNU make --jobs 选项

    我正在使用 qmake 为我们正在开发的小型 Qt C 应用程序生成 MinGW32 Makefiles 我的问题 所有这些双 四核 CPU 都闲置在那里 而只有一个线程正在进行构建 为了并行化 我尝试传递 jobs 4 来 make 但问
  • QMAKE 中的 GNU make --jobs 选项

    我正在使用 qmake 为我们正在开发的小型 Qt C 应用程序生成 MinGW32 Makefiles 我的问题 所有这些双 四核 CPU 都闲置在那里 而只有一个线程正在进行构建 为了并行化 我尝试传递 jobs 4 来 make 但问
  • Dart Set 如何比较项目? [复制]

    这个问题在这里已经有答案了 我刚刚塞了一堆MyClass里面一个Set在达特中 MyClass不实施Comparable 并且没有 运算符定义 它编译得很好 为了这Set为了正确检测重复项 我是否必须实施Comparable接口 或者只是覆
  • Dart Set 如何比较项目? [复制]

    这个问题在这里已经有答案了 我刚刚塞了一堆MyClass里面一个Set在达特中 MyClass不实施Comparable 并且没有 运算符定义 它编译得很好 为了这Set为了正确检测重复项 我是否必须实施Comparable接口 或者只是覆
  • do-while 循环的问题

    请注意 虽然我对 Java 很熟悉 但我并不是特别有天赋 也不知道所有的行话 所以请用很少的编码器行话和尽可能多的普通英语来解释你的答案 或者在使用后解释行话的含义 另外 这是我第一次使用 Stackoverflow 所以请告诉我这是否是一
  • do-while 循环的问题

    请注意 虽然我对 Java 很熟悉 但我并不是特别有天赋 也不知道所有的行话 所以请用很少的编码器行话和尽可能多的普通英语来解释你的答案 或者在使用后解释行话的含义 另外 这是我第一次使用 Stackoverflow 所以请告诉我这是否是一
  • 比较程序集名称导致不匹配:修订号

    我正在开发 ASP NET MVC4 应用程序 该应用程序在我的本地计算机上运行良好 但在应用程序服务器上不起作用并引发以下错误 无法加载文件或程序集 System Web Mvc 版本 2 0 0 0 Culture neutral Pu
  • 比较程序集名称导致不匹配:修订号

    我正在开发 ASP NET MVC4 应用程序 该应用程序在我的本地计算机上运行良好 但在应用程序服务器上不起作用并引发以下错误 无法加载文件或程序集 System Web Mvc 版本 2 0 0 0 Culture neutral Pu
  • 检查 Xamarin Android 中的互联网是否打开或关闭

    我正在开发 Xamarin Android 应用程序 在继续我的下一个片段之前 我想检查一下网络连接并通知用户 我该如何实现 以及如何在用户打开互联网后刷新整个片段 任何意见或建议将不胜感激 要获取网络状态 您可以在活动中使用以下方法 pu
  • 检查 Xamarin Android 中的互联网是否打开或关闭

    我正在开发 Xamarin Android 应用程序 在继续我的下一个片段之前 我想检查一下网络连接并通知用户 我该如何实现 以及如何在用户打开互联网后刷新整个片段 任何意见或建议将不胜感激 要获取网络状态 您可以在活动中使用以下方法 pu
  • MPI_(I)NEIGHBOR_ALLTOALLW() 中的 MPI_Aint 与 MPI_(I)ALLTOALLW() 中的 int

    随着MPI3 0引入邻里集体通信 其中 2 个 MPI NEIGHBOR ALLTOALLW and MPI INEIGHBOR ALLTOALLW 位移 sdispls and rdispls 是数组const MPI Aint 相反 相
  • MPI_(I)NEIGHBOR_ALLTOALLW() 中的 MPI_Aint 与 MPI_(I)ALLTOALLW() 中的 int

    随着MPI3 0引入邻里集体通信 其中 2 个 MPI NEIGHBOR ALLTOALLW and MPI INEIGHBOR ALLTOALLW 位移 sdispls and rdispls 是数组const MPI Aint 相反 相
  • 没有得到 Guzzle 的预期回应

    我正在尝试构建一个端点 使用 Slim PHP 框架将传递给它的数据转发到 API 但我在从 Guzzle 请求获取响应时遇到问题 app gt map api call method function method use app cli
  • 没有得到 Guzzle 的预期回应

    我正在尝试构建一个端点 使用 Slim PHP 框架将传递给它的数据转发到 API 但我在从 Guzzle 请求获取响应时遇到问题 app gt map api call method function method use app cli
  • 谷歌地图多边形会减慢浏览器速度

    我有一个将多边形绘制到 Google 地图上的应用程序 我使用 Angular 作为前端 并使用 NodeJS api 来提供多边形数据 现在 我加载了大约 300 个多边形 每个多边形大约有 10 000 个纬度坐标 但我对数据进行了分页