Estoy tratando de permitir que mis zonas de Mapbox tengan estados de clic y de desplazamiento. Una vez que se ha hecho clic en algo, quiero que persista, permanezca en ese estado, incluso si luego paso el mouse sobre otro mosaico.
Sin embargo, al implementarlo, lo que sucede es que cuando hago clic, cambia al estado de clic, pero al mover el mouse sobre esa área u otro mosaico, cambia de hacer clic nuevamente a pasar el mouse.
Aquí hay una demostración de esto: https://codepen.io/hiven/pen/zYPbRNK
El bit clave de código está aquí:
if (hoveredStateId !== null) { map.setFeatureState( { source: "states", id: hoveredStateId }, { mystate: null } ); } if (hoveredStateId !== 2) { hoveredStateId = e.features[0].id; map.setFeatureState( { source: "states", id: hoveredStateId }, { mystate: 1 } ); }El estado 1 está suspendido, se hace clic en el estado 2. Con este código, pensé que solo establecería el estado para flotar si el mosaico no está en el estado en el que se hizo clic (2) ya. Sin embargo, esto no parece funcionar, ya que mover el mouse sobre un mosaico en el que se hizo clic lo cambia al estado de desplazamiento.
¿Dónde me he equivocado?
No incluiste suficiente código arriba. El bit clave del código es en realidad este:
map.on('mousemove', 'state-fills', (e) => { if (e.features.length > 0) { if (hoveredStateId !== null) { map.setFeatureState({ source: "states", id: hoveredStateId }, { mystate: null }); }Dice: cuando el mouse se mueve sobre cualquier cosa, borre el estado actual.
Además, esto es claramente incorrecto:
if (hoveredStateId !== 2) {Parece haber confundido el estado (nulo, 1 o 2) con la identificación de la función (cualquier número 0 o mayor).