asp.net-mvc - 如何使用传单运行修复地图在 Firefox 浏览器上非常慢

Question

我使用创建地图leaflet，它在 Chrome 中运行良好，但在 Fifefox 中运行良好。在 Firefox 中，地图运行非常缓慢。这是我的演示。 如何修复它。

Answer 1

由于需要绘制的多边形数量，浏览器速度变慢。根据几何的规模和复杂性，为整个美国（超过 3000 个）绘制县边界可能会占用浏览器资源。通过注释掉该方法来查看性能提升。insertCountyData

 //  insertCountyData();

我建议实施一种不同类型的策略，以减少浏览器需要呈现的数据量。下面我列出了一些策略，前两个涉及减少一次渲染的县的数量。

• 根据地图中心的缩放级别和位置添加县边界。

• 另一种选择是在用户单击时将县添加到特定状态。这将减少需要渲染的多边形的总量。

• 使用TileMill渲染数据。请参阅之前回答的这个StackOverflow 问题，实际上非常相似。

• 通过将 GeoJSON 转换为 TopoJSON 来减少加载的数据量。

我希望这有帮助。大量多边形的客户端渲染可能非常费力，使用这些不同的策略可以帮助缓解性能问题。

Answer 2

Firefox 似乎不太擅长渲染许多 SVG。一种对我有用的解决方案是将渲染器切换到 Canvas。

var map = L.map('map', {
  renderer: L.canvas()
});

文档链接