Performance on changing colour of big geojson by using data-driven (comparing to using setPaintProperty)

1
votes

I have been rendering a FeatureCollection of polygons into the Map (in one GeoJSONLayer). The size of each polygon is big (5mb, 10mb). With user interactions, the colours of polygons would be re-calculated & changed constantly. We are using data-driven method and keeping the data in properties of each feature. So GeoJSONLayer has to call .setData(geojson) everytime the data and colours changed (they are kept in properties). I find above approach is lead to performance issue since the size of geojsons is big and calling .setData() is expensive. I'm thinking of separating the geojson source and the data, style, colouring and calling direct function (setPaintProperty) whenever colours changed would be better than.

Someone told me that .setData and .setPaintProperty would do the same thing, both 2 will trigger re-rendering whole polygons.

Kindly need help to advice on this matter

Thanks a lot!

1
mapbox-gl-jsmapbox-gl

1 Answers

1
votes

If I understand you correctly, you're asking which of these two is faster:

map.setData(mylayer, mygeojson)

map.setPaintProperty(mylayer, 'fill-color', ...mydatadrivenproperty)

I haven't tested, but I'd assume the second is faster, because the first one has to:

  1. Parse the GeoJSON
  2. Convert it to vector tiles
  3. Repaint

whereas the second just has to parse the property repaint. Try them both out to see.

You may also consider a third way, which is to have a second layer which is a highlight, which you update by calling map.setFilter(mylayer, ...).