Estoy creando una aplicación que representará un mapa con un gran conjunto de GeoJSON (alrededor de 3 MB). El mapa es una coropleta, y los diferentes polígonos de GeoJSON están destinados a ser coloreados de manera diferente según los datos que "contengan".

El problema con el que me encuentro es que no estoy seguro de cómo separar GeoJSON (por ejemplo, datos de polígonos) de los datos reales. Digamos que configuramos los datos de esta manera (o como recomienda Mapbox, solo a través de la URL a una fuente de datos):

 const { data } = await axios.post(sourceUrl, settings); map.current.addSource("states", { type: "geojson", data, }

Los datos subyacentes en este mapa deberán actualizarse con frecuencia con la interacción del usuario. Sin embargo, en este momento GeoJSON contiene tanto los datos de los polígonos (coordenadas) como las propiedades (los datos en sí).

Por ejemplo, el usuario puede hacer clic en una casilla de verificación o escribir un parámetro de búsqueda. Esto actualmente hace un GET a nuestra base de datos, que ejecuta una consulta y devuelve los nuevos datos. Podríamos devolver un nuevo objeto GeoJSON con estos datos agregados dentro de él y llamar a .getSource("source").setData(newData) con todos los nuevos GeoJSON, pero eso sería terriblemente ineficiente. Los polígonos no cambian, solo cambian los datos que contienen.

He investigado el estilo basado en datos, pero tampoco parece ser lo que necesito. Nuestro conjunto de datos subyacente para el mapa es demasiado grande para incluirlo en una sola capa de GeoJSON, no podemos transferir cientos de MB a través de la red para aplicar estilos basados en datos en el cliente.

¿Cómo podemos representar los polígonos de GeoJSON en el mapa solo una vez y luego actualizar sus colores de relleno dependiendo de cómo se cambie un conjunto de datos diferente?