JavaScript - leaflet ayuda con sobre carga de marker.bindTooltip

leaflet ayuda con sobre carga de marker.bindTooltip

Publicado por hugo (8 intervenciones) el 12/01/2023 04:11:47

Buenas tengo una capa con 3 mil propiedades y cuando uso la propiedad marker.bindTooltip para mostrar un dato se satura mucho y me tarda en responder

me gustaria limitar que me muestre una cantidad o solo lo que vez la camara

marker.bindTooltip( feature.properties.ccpp, { permanent: 'true', opacity: 1 ,className: "barco"} );

esto es lo que uso ya trate de ocultarlo hasta cierto zoom pero igual se sigue cargando cuando se acerca el zoom

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

leaflet ayuda de algun especialista

Publicado por hugo (8 intervenciones) el 12/01/2023 23:39:14

dejo mi correo [email protected] para quien tenga conocimientos sobre leaflet me ayude desde ya muchas gracias

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 45

Val: 40

leaflet ayuda con sobre carga de marker.bindTooltip

Publicado por Marlon (90 intervenciones) el 13/01/2023 21:24:17

Hola, nunca he utilizado la libreria Leaft pero encontré un problema similar en Github te dejo el enlace y la respuesta:

https://stackoverflow.com/questions/979841256/leaft-library-zoom-saturation

El ejemplo que muestran alli:

//creas una variable para guardar los markers

var markers = L.markerClusterGroup();

//iteras los datos

for (var i = 0; i < data.length; i++) {

    //creas el marker

    var marker = L.marker(new L.LatLng(data[i].lat, data[i].lng));

    //agregas el tooltip

    marker.bindPopup(data[i].name);

    //agregas el marker al cluster

    markers.addLayer(marker);

//agregas el cluster al mapa

map.addLayer(markers);

//función para filtrar los markers

function filterMarkers(zoom) {

    markers.clearLayers();

    for (var i = 0; i < data.length; i++) {

        if (data[i].zoom <= zoom) {

            var marker = L.marker(new L.LatLng(data[i].lat, data[i].lng));

            marker.bindPopup(data[i].name);

            markers.addLayer(marker);

//evento que se ejecuta cada vez que se cambia el zoom

map.on('zoomend', function() {

    var zoom = map.getZoom();

    filterMarkers(zoom);

});

Se está utilizando el plugin de clustering de leaflet para agrupar los marcadores cercanos en un solo marcador. Se está iterando sobre los datos y creando un marcador para cada punto de datos. Se agrega un tooltip a cada marcador y se agrega el marcador al cluster. Luego se agrega el cluster al mapa.

La función filterMarkers se encarga de filtrar los marcadores en función del nivel de zoom actual. Se limpia el cluster, se itera sobre los datos y se crean marcadores solo para los puntos de datos que cumplen con el criterio de zoom.

Finalmente, se establece un evento en el mapa que se ejecuta cada vez que se cambia el zoom, y se llama a la función filterMarkers para actualizar los marcadores mostrados en el mapa.

Valora esta respuesta

Comentar