如何处理 Bing 地图中的大量图钉答案

【问题标题】：How to handle large numbers of pushpins in Bing Maps如何处理 Bing 地图中的大量图钉
【发布时间】：2012-04-18 21:29:45
【问题描述】：

我正在使用带有 Ajax 的 Bing 地图，并且我有大约 80,000 个位置可以放置图钉。该功能的目的是允许用户搜索路易斯安那州的餐馆并单击图钉以查看健康检查信息。

显然，一次在地图上拥有 80,000 个图钉并没有多大用处，但我正在努力寻找解决此问题的最佳方法。另一个问题是这些地点之间的距离非常小（所有 80,000 人都在路易斯安那州）。我知道我可以使用聚类来避免地图混乱，但似乎这仍然会导致性能问题。

我目前正在尝试做的是在某个缩放级别之前不显示任何图钉，然后仅在当前视图中显示图钉。我目前尝试这样做的方式是使用 viewchangeend 事件来查找地图的缩放级别和边界，然后查询数据库（通过 Web 服务）以获取该范围内的任何点。

感觉好像我做错了。有没有更好的方法来管理如此大量的数据？最好先尝试加载所有点，然后在手头有数据，而不必在每次地图移动时都点击我的网络服务。如果是这样，我会怎么做？

我无法找到问题的答案，这通常意味着我问错了问题。如果有人能帮我找出正确的问题，将不胜感激。

【问题讨论】：

如果你想可视化那么多数据点，也许图钉不是最好的方法。您是否考虑过使用热图来代替？
感谢您的评论！我没有想到这一点，但是在检查之后，我认为它不适用于我的场景，因为用户需要能够选择一个单独的位置并被带到该位置的信息页面。我将编辑我的问题以使其更清楚。

标签： ajax bing-maps pushpin

【解决方案1】：

嗯，我已经实现了一个稍微不同的方法。这只是一个有趣的练习，但我正在使用 HTML5 画布在 Bing 地图中显示我的所有数据（大约 140.000 点）。

我之前将所有数据加载到客户端。然后，我对绘图过程进行了极大的优化，将其附加到“Viewchange”事件（在视图更改过程中一直触发）。

我已经写了一篇关于这个的博客。您可以查看here。

我的示例没有交互，但可以轻松完成（应该是博客文章的一个不错的主题）。因此，您必须手动处理事件并自己搜索相应的点，或者，如果要绘制的点数和/或缩放级别低于某个阈值，则显示常规图钉。

无论如何，如果您不限于 Bing 地图，另一种选择是使用 Leaflet 之类的。它允许您创建一个 Canvas 层，它是一个基于图块的层，但使用 HTML5 画布在客户端呈现。它开启了一系列新的可能性。检查例如this 映射到GisCloud。

还有一个选项，虽然更适合静态数据，但使用了一种称为 UTFGrid 的技术。开发它的小伙子们当然可以explain 它比我更好，但它可以根据你想要的分数进行缩放，并且表现出色。它包括一个带有您的信息的图块层，以及一个随附的 json 文件，其中包含描述图块上功能的“ascii-art”文件。然后，使用一个名为 wax 的库，它提供了完整的鼠标悬停、鼠标点击事件，而不会对性能产生任何影响。

我也已经blogged 讨论过。

【讨论】：

有趣的概念，我实际上为屋顶映射应用程序做了一些非常相似的事情，其中画布用于在地图顶部显示详细的尺寸（线条画样式长度、角度等）。然而，这种方法的问题在于，canvas 元素现在接收到所有用于访问地图的指针事件。 none 标准的 css 属性 pointer-events:none 可以解决这个问题，但某些浏览器不支持它，尤其是 IE。尝试在 javascript 中手动传递事件似乎一团糟。我很想知道你是否知道解决这个问题的方法。
其实事件直接去地图。你看过我展示的视频吗？所有的缩放和平移都由 Bing 地图直接处理。
啊，我明白你在做什么了。您将画布插入地图 div 本身，而我只是将它放在地图 div 的顶部。然而，即使采用您的方法，画布仍将位于其他地图元素之上，例如随后可能添加的图钉。我想人们可以做一些聪明的事情，比如尝试将画布插入地图图块的顶部，但在图钉或形状等其他地图元素的下方，但这听起来很难正确实现。无论如何+1 ;)
我同意，这将是一个巨大的痛苦。无论如何，我一直在使用 Leaflet 和 Canvas Layer 修复我的 HTML5 地图。它只是工作:)
哇！这是令人难以置信的。我得试试看。不幸的是，客户专门要求 Bing 地图，但如果 Leaflet 看起来更快，也许我可以动摇它们。感谢您的帮助！

【解决方案2】：

我认为，如果您能侥幸使用集群，那么集群将是您的最佳选择。您说您尝试使用集群，但仍然导致性能问题？我用V7 Interactive SDK 的 80000 个数据点对其进行了测试，它似乎表现良好。通过转到链接并更改 Load module - clustering 选项卡中的行自行测试：

TestDataGenerator.GenerateData(100,dataCallback);

到

TestDataGenerator.GenerateData(80000,dataCallback);

然后点击Run 按钮。有了这么多数据点，我的性能似乎可以接受。

【讨论】：

说实话，我没有测试过。我不仅关心在地图上绘制它的性能，还关心访问 Web 服务和从数据库加载。我在想我以错误的方式解决问题，但它实际上可能有效。谢谢您的帮助！（我是新来的，我还没有 15 点声望点，所以我不能 +1 你的答案......对不起）。