Si mi servidor les dice a los clientes cuándo y qué mosaico recargar/actualizar, ¿cómo puedo recargar/actualizar el mosaico enviado desde el servidor? Estoy usando L.CRS.Simple CRS. Y no tengo niveles de zoom en un mapa de juego personalizado.
Aquí está mi código:
var map = L.map('map', { crs: L.CRS.Simple, attributionControl: false }).setView([0, 0], 2) L.tileLayer('/chunks/{x}.{y}.png', { maxNativeZoom: 1, minNativeZoom: 1, }).addTo(map) function ReloadTile(x,y){ // UPDATE TILE HERE Request for example /chunks/{1}.{1}.png depending on input }Primero, escuche los eventos de carga y tileunload de L.TileLayer de tileload para tomar referencias a los mosaicos a medida que se cargan (y liberar esas referencias a medida que se descargan), por ejemplo
let myTileLayer = L.tileLayer(...); let tileRefs = {}; myTileLayer.on('tileload', function(ev) { tileRefs[ ev.coords.x + ',' + ev.coords.y ] = ev.tile; }); myTileLayer.on('tileunload', function(ev) { delete tileRefs[ ev.coords.x + ',' + ev.coords.y ]; });...así que cada vez que desee actualizar un mosaico, solo tiene que buscarlo en la estructura de datos.
Recuerde que para recargar un HTMLImageElement , debe cambiar su propiedad src , por ejemplo:
function ReloadTile(x,y){ const tile = tileRefs[x + ',' + y]; if (!tile) { // Tile is not currently loaded on the screen return; } tile.src = "/chunks/{1}.{1}.png"; }Tenga cuidado de solicitar una URL que su navegador haya almacenado en caché. Haga su tarea con respecto a la prevención de caché y los encabezados HTTP relevantes.
Tenga en cuenta que estoy usando un Object JavaScript como estructura de datos de valor clave y concatenación de cadenas para crear una clave única por mosaico. Puede usar otras estructuras de datos (como Map ) y cualquier otro método para indexar los mosaicos (como una estructura de datos de doble profundidad para xy, o triple profundidad para xyz, o indexación por URL de mosaico). También tenga en cuenta que el código de muestra usa solo las coordenadas X e Y del mosaico, ya que su TileLayer parece tener solo un nivel de zoom.
¡Gracias por la ayuda!
Mi código final:
var map = L.map('map', { crs: L.CRS.Simple, attributionControl: false }).setView([0, 0], 2) const path = '/chunks/{x}.{y}.png?cash={time}' const layer = L.tileLayer(path, { maxNativeZoom: 1, minNativeZoom: 1, time: 0 }).addTo(map) function VectorToString(vector) { return vector.x + "." + vector.y } class TileHandler { constructor(layer){ this.layer = layer this.layers = {} this.layer.on('tileload', (tile) => { this.layers[VectorToString(tile.coords)] = tile }) this.layer.on('tileunload', (tile) => { delete this.layers[VectorToString(tile.coords)] }) } update(position){ const tile = this.layers[VectorToString(position)] const url = L.Util.template(tile.target._url, { ...position, time: new Date().getTime() }) if (!tile) return tile.tile.src = url } }