Reason for MapBox GL JS Performance Difference

Question

This question is for those who understand the insides of MapBox GL JS.

I use MapBox GL JS to render a geographic map of up to 40,000 polygons, each of which is colored based on the "owner" of this polygon. Usually there are many polygons per owner, and the "owner" of each polygon can change over time. The number of owners can vary from one to 1000. I have performance problems (which vary depending on how I approach it), so I tried several different strategies.

• Using data driven styles for "fill-color" where I have a single source and one layer. I tried both the polygon identifier and the owner identifier as a category for the data driven style.
• Using filtered layers, where I have a single source and a separate layer for each "owner". Again, I tried both the polygon identifier and the owner identifier as filter criteria.
• Using a separate source and level for each "owner".

Option 3 has the best drawing speed. Layers display very quickly when I zoom in and pan. But I have to call setData whenever I change the owner of the layer and setData of a memory leak, so I end up crashing the page. This question, 2607, has been closed as invalid, so I do not expect permission to do so.

Options one and two draw in order with the original zoom, but when I zoom in, they are very slow to re-draw the tiles. I was stuck looking at the jagged, low-detailed tiles until the rendering caught up in 20-30 seconds. Please note: if I use the identifier "owner" instead of the "polygon" id, I still need to call setData when the "owner" changes, which will lead to a memory leak. If I use the polygon identifier, I just need to update the layer filters or fill colors when changing the "owner". However, I do not see a noticeable difference in performance if I use the identifier "polygon", so I think that everything is in order.

So my question is why option 3 is rendered much faster when I zoom in? Does this relate to the number of workers assigned to paint? In variants one and two there is one source, does this mean that the picture is used only by one worker? If in the third option there is a separate source for each "owner", so I have several workers who make the drawing?

Answer 1

I recommend performing data-join using styles with categorical data. This allows you to separate your property data from geometry.

Check out the https://www.mapbox.com/mapbox-gl-js/example/data-join/ example of connecting JSON data in a browser to the geometry of a vector tile. It should scale to 100+ thousand functions.

Answer 2

I think you will need many methods to solve the problem, which is the level of detail (LOD) problem. I did a similar job involving the country's polyregions to indicate different areas within the state, and you need to scale the data according to the presentation.

The first thing I would recommend is to create different levels of detail for your regions. The first sweep can be performed automatically by removing the vertices of the region that are aligned (geographically) within a few degrees of a straight line with their neighboring points. Think about this by removing many small dots that do not add detail to the border of the region, since they are in a straight line. Since this can be an automatic (and even pre-saved) step, you can create different levels of detail based on the zoom level.

The second recommendation is to select a space-view. That is, if the region is not within the viewing port, do not do it! If you try to make this ideal vertex, you will have the same processor problems as before, so I recommend creating a Region bounding box (if you use only axis viewing, the suggestion is the easiest solution).

If you need non-axis-oriented areas, just create a bounding circle (with a radius based on the boundary vertex at the greatest distance from the geocentric region).

I would suggest that your various difficulties are derived from the complexity of the complexity of the scene. Solve this and you will have a much more efficient system to work with.

Good luck