Add mipmap support to allow zooming out

This commit is contained in:
Matthias Schiffer 2015-02-03 20:15:58 +01:00
parent 0162c236fa
commit 4d9f29afab
6 changed files with 190 additions and 54 deletions

View file

@ -1,7 +1,6 @@
var MinedMapLayer = L.GridLayer.extend({
initialize: function (info, regions, layer) {
this._info = info;
this._regions = regions;
initialize: function (mipmaps, layer) {
this._mipmaps = mipmaps;
this._layer = layer;
this.options.attribution = 'Generated by <a href="http://git.universe-factory.net/MinedMap/">MinedMap</a>';
@ -19,10 +18,19 @@ var MinedMapLayer = L.GridLayer.extend({
tile.alt = '';
if (coords.x >= this._info.minX && coords.x <= this._info.maxX &&
coords.y >= this._info.minZ && coords.y <= this._info.maxZ &&
this._regions[coords.y-this._info.minZ][coords.x-this._info.minX])
tile.src = 'data/'+this._layer+'/0/r.'+coords.x+'.'+coords.y+'.png';
var z = -coords.z;
if (z < 0)
z = 0;
var mipmap = this._mipmaps[z];
if (coords.x >= mipmap.info.minX && coords.x <= mipmap.info.maxX &&
coords.y >= mipmap.info.minZ && coords.y <= mipmap.info.maxZ &&
mipmap.regions[coords.y-mipmap.info.minZ][coords.x-mipmap.info.minX])
tile.src = 'data/'+this._layer+'/'+z+'/r.'+coords.x+'.'+coords.y+'.png';
if (coords.z >= 0)
L.DomUtil.addClass(tile, 'overzoomed');
return tile;
},
@ -70,24 +78,23 @@ window.createMap = function () {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
var res = JSON.parse(this.responseText),
info = res.info,
regions = res.regions,
mipmaps = res.mipmaps,
spawn = res.spawn;
var map = L.map('map', {
center: [-spawn.z, spawn.x],
zoom: 0,
minZoom: 0,
minZoom: -(mipmaps.length-1),
maxZoom: 3,
crs: L.CRS.Simple,
maxBounds: [
[-512*(info.maxZ+1), 512*info.minX],
[-512*info.minZ, 512*(info.maxX+1)],
[-512*(mipmaps[0].info.maxZ+1), 512*mipmaps[0].info.minX],
[-512*mipmaps[0].info.minZ, 512*(mipmaps[0].info.maxX+1)],
],
});
var mapLayer = new MinedMapLayer(info, regions, 'map');
var lightLayer = new MinedMapLayer(info, regions, 'light');
var mapLayer = new MinedMapLayer(mipmaps, 'map');
var lightLayer = new MinedMapLayer(mipmaps, 'light');
mapLayer.addTo(map);

View file

@ -22,7 +22,7 @@
background: #333;
}
img.leaflet-tile {
img.overzoomed {
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;