How to fix map using leaflet run is very slow on F

问题:

I create a map using leaflet, it runs fine in Chrome but it not in Fifefox. In Firefox, the map run's very slow. This is my demo. How to fix it.

回答1:

The browser is slowed due to the amount of polygons that it is required to draw. Depending on the scale and complexity of the geometry, drawing county boundaries for the entire US (over 3000) can be quite taxing on browser resources. See the performance increase by commenting out the insertCountyData method.

 //  insertCountyData();

I would suggest implementing a different type of strategy that reduces the amount of data that the browser needs to render. Below I have listed a few strategies, the first two deal with reducing the amount of counties that are rendered at one time.

• Add county boundaries based off of the zoom level and location of the center of the map.

• Another option would be to add counties to a specific state when the user clicked on it. This would reduce the overall amount of polygons needed to be rendered.

• Render the data using TileMill. See this StackOverflow question previously answered, which is actually quite similar.

• Reduce the amount of data being loaded by converting your GeoJSON to TopoJSON.

I hope this helps. Client-side rendering of large amounts of polygons can be quite taxing and using these different strategies can help alleviate performance issues.

回答2:

Firefox seems not very good at rendering many SVG. One solution that worked for me is to switch the renderer to Canvas.

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

A link to the documentation