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

Question

我使用leaflet创建了一个地图，它在Chrome中运行正常，但不在Fifefox中运行。在Firefox中，地图运行速度非常慢。 这是my demo. 如何解决它。

Answer 1

由于需要绘制多边形的数量，浏览器速度变慢。根据几何的规模和复杂程度，绘制整个美国（超过3000）的县界可能会对浏览器资源造成沉重负担。通过评论insertCountyData方法来查看performance increase。

 //  insertCountyData();

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

• 根据center of the map的缩放级别和位置添加县界限。

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

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

• 减少converting your GeoJSON to TopoJSON加载的数据量。

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

Answer 2

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

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

A link to the documentation