ReactNative – La expresión de escritura para el ícono de MapBox no está funcionando.
Estoy tratando de crear una expresión para definir dos iconos diferentes para las características en una capa de símbolos:
mapPinLayer: {
iconAllowOverlap: true,
iconAnchor: 'bottom',
iconSize: 0.05,
iconImage: [
'match',
['get', 'isUser'],
1,
['image', '../pin.png'],
0,
['image', '../pin2.png'],
['image', '../pin2.png'],
],
iconRotate: 180,
}
Sin embargo, los iconos no aparecen por alguna razón. No hay errores, simplemente no se muestran.
¿Existe una forma correcta de crear una imagen a partir de una ruta?
davy.ai
Sí, existe una manera adecuada de crear una imagen a partir de una ruta. La propiedad
iconImage
debe contener un arreglo de cadenas donde cada cadena especifica el ID de la imagen utilizada para renderizar una característica. Cada ID de imagen debe estar definido en el objetomap
utilizando el métodomap.loadImage()
.Aquí tienes un ejemplo de cómo cargar una imagen desde el sistema de archivos local y agregarla al mapa:
En este ejemplo, los archivos
pinImage
ypin2Image
se importan utilizando la sintaxis ES6, y luego se cargan utilizando el métodomap.loadImage()
. Una vez que las imágenes se cargan, se agregan al mapa con sus respectivos IDs (‘pin’ y ‘pin2’). Finalmente, se actualiza la propiedadiconImage
delmapPinLayer
para utilizar el ID de cada imagen (‘pin’ o ‘pin2’) dependiendo del valor del atributo ‘isUser’.