Evitar que Leaflet solicite baldosas personalizadas inexistentes

Question

He creado mosaicos personalizados utilizando TileMill . azulejos extraídos como imágenes png y añadirlos a la capa base. utilizando el siguiente código

var venu_map = new L.tileLayer('static/b18/{z}/{x}/{y}.png', {
               maxZoom:22,
              attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              }).addTo(map);

Funciona bien. Pero por cada cambio de nivel de zoom leaflet hace un número de (alrededor de 20 -30) solicitudes a los azulejos no existentes que resulta en "NetworkError: 404 NOT FOUND . El mensaje de error completo es "NetworkError: 404 NOT FOUND - http://127.0.0.1:8000/static/b18/16/47372/30375.png" . La imagen en cuestión no existe. Incluso después de configurar maxbounds aparece este error. ¿Alguna solución?

Answer 1

Configuración bounds para la capa resuelve el problema. Porque leaflet no intentará buscar tiles fuera del bounds

var southWest = L.latLng(13.02504085518189, 80.23609399795532),
northEast = L.latLng(13.026849183135116, 80.23797690868378),
bounds = L.latLngBounds(southWest, northEast);

L.tileLayer('static/b18/{z}/{x}/{y}.png', {
maxZoom:22,
bounds:bounds,
reuseTiles : true,
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Answer 2

He resuelto este problema de otra manera (se trata de un enfoque para mosaicos relativamente dispersos).

La primera vez que cargo los mosaicos, envío una llamada AJAX al servidor y recorro los directorios de mosaicos enviando de vuelta los mosaicos existentes en una lista. Este formato de lista coincide con la forma en que tu api solicita los mosaicos.

Entonces, antes de solicitar un azulejo determinado, miro en este archivo json (que se ha serializado en un objeto) para ver si el azulejo existe realmente.

Pasar esta carga al lado del cliente ha mejorado mucho el rendimiento.

Answer 3

El folleto funciona según lo previsto.

Es normal que intente descargar mosaicos al acercar y alejar la imagen.

Tienes que configurar minZoom y maxZoom en las opciones del mapa para que coincidan con los niveles de zoom de la carpeta static/b18/.

También puedes definir maxNativeZoom en las opciones de TileLayer ( http://leafletjs.com/reference.html#tilelayer ) para que el folleto amplíe las fichas existentes en caso de respuesta 404