es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cambiar propiedad de origen en Mapbox.

Quiero crear una capa de cluster con Mapbox, ¡sí, lo hice! 😀 Pero quiero poder desactivarla.

Así que estoy creando una fuente.

const source = {
    type: "geojson",
    data: {
        "type": "FeatureCollection",
        "features": []
    },
    cluster: true,
    clusterRadius: 10
}
this.map.addSource(id, source);

Ahora soy capaz de establecer los datos:

this.map.getSource(this.id).setData({
    "type": "FeatureCollection",
    "features": this.createInnerCircles()
})

Después de esto, estoy estableciendo las capas para los clusters y los círculos. Ahora el clustering está funcionando.

Pero ahora, ¿cómo puedo establecer cluster: true en false desde mi fuente? Bueno, tal vez podría descartar la fuente y hacer una nueva, pero eso es feo.

Así que la forma fea es:

const SOURCE = this.map.getSource(id);
SOURCE._options.cluster = false;
this.map.removeSource(id);
this.map.addSource(id, SOURCE._options);

¡Ups, eso no funciona, ahora obtengo:

“Source ‘test’ cannot be removed while layer ‘test-outer’ is using it.”

Actualización:

Fui capaz de habilitar/deshabilitar el clustering gracias a @Steve Bennett:

setCluster(isVisible, clusterRadius = 10) {
    const style = this.map.getStyle()
    style.sources.test.cluster = isVisable;
    if(isVisible) {
        style.sources.test.clusterRadius = clusterRadius;
    }
    this.map.setStyle(style)
}
Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Para desactivar el agrupamiento para una capa de Mapbox, puede actualizar la propiedad cluster en las opciones de la fuente. Una forma de hacerlo es acceder a las opciones de la fuente usando map.getStyle().sources[id], actualizar la propiedad cluster a false, y luego actualizar el estilo del mapa usando map.setStyle(). Aquí hay una función de ejemplo:

    function toggleCluster(map, id, isEnabled, clusterRadius = 10) {
      const style = map.getStyle();
      style.sources[id].cluster = isEnabled;
    
      if (isEnabled) {
        style.sources[id].clusterRadius = clusterRadius;
      }
    
      map.setStyle(style);
    }
    

    Puede llamar a esta función con su instancia de map, el id de su fuente de agrupamiento, un booleano que indique si se debe habilitar o deshabilitar el agrupamiento (true para habilitar, false para deshabilitar), y un valor opcional de clusterRadius (si se está habilitando el agrupamiento, se usará este valor de clusterRadius).

    Por ejemplo, si desea desactivar el agrupamiento para una fuente con ID test, puede llamar:

    toggleCluster(this.map, 'test', false);
    

    Y si desea habilitar el agrupamiento con un clusterRadius de 20, puede llamar:

    toggleCluster(this.map, 'test', true, 20);
    

Comments are closed.