0
223
Views¿Por qué setPaintProperty con color de relleno y paradas agrega colores adicionales a las capas en mapbox-gl?
Estoy tratando de crear un mapa de coropletas basado en datos de un estado de EE. UU. usando mapbox-gl. El problema al que me enfrento es que solo tengo tres colores en mis paradas, pero puedo ver que el mapa se está haciendo con más de 3 colores, mi mejor suposición. es que la biblioteca está interpolando colores por sí misma, si ese es el caso, ¿cómo puedo evitar que lo haga?
detalles:
empiezo con paradas predeterminadas
[ [-1, "#FFF"], [-1, "#AFA"], [-1, "#FAF"], ]estos son solo valores de marcador de posición, después de que llegan los datos, construyo paradas nuevamente con valores reales
[ [ 19, "#afc5ff" ], [ 22, "#376eff" ], [ 28, "#1c3780" ] ]una vez que se calculan las paradas, agrego la fuente al mapa, agrego una capa y pinto la capa
map.current.addSource("counties", { type: "geojson", data, }); map.current.addLayer({ id: "county", type: "fill", source: "counties", }); map.current.setPaintProperty("county", "fill-color", { property: options.property, stops, });después de hacer todo el mapa que se muestra contiene colores que no están en mis paradas (marcados con números rojos en la imagen de abajo).
1 answers
Answer question0
Resuelto con la ayuda de la respuesta en el problema de github que abrí con respecto a esto.
Respuesta copiada:
Hola, @mfaizan1, tienes razón en que las paradas se interpolarán entre los valores. La expresión de paso debería funcionar mejor para usted. Este ejemplo en particular muestra cómo establecer el color de un círculo en una de tres opciones. Su código debería terminar luciendo algo como esto:
map.current.setPaintProperty("county", "fill-color", [ 'step', ['get', 'someCountableProperty'], '#afc5ff', // any item where `someCountableProperty` is <= 19 will be displayed with this color 19, '#376eff', // any item where `someCountableProperty` is <= 22 && > 19 will be displayed with this color 22, '#1c3780' // any item where `someCountableProperty` is > 22 will be displayed with this color ]);