X-Git-Url: https://git-public.kairo.at//?a=blobdiff_plain;f=js%2Fmap.js;h=caa457c6f79a93fa8bbd3c1963ad2a4e89e30230;hb=dc047338ebcbf66d668276bbde2d0ec284229bdd;hp=e999fb85176c8ad123aaeae020efbd5e3a05121e;hpb=b9707ee0b1b3aa200085539b2894a811bf67f650;p=lantea.git diff --git a/js/map.js b/js/map.js index e999fb8..caa457c 100644 --- a/js/map.js +++ b/js/map.js @@ -203,7 +203,6 @@ var gMap = { glResolutionAttr: null, glMapTexture: null, glTextures: {}, - glTextureKeys: {}, activeMap: "osm_mapnik", tileSize: 256, @@ -292,7 +291,7 @@ var gMap = { gMap.gl.enableVertexAttribArray(gMap.glTextureCoordAttr); gMap.gl.vertexAttribPointer(gMap.glTextureCoordAttr, 2, gMap.gl.FLOAT, false, 0, 0); - gMap.loadImageToTexture(gLoadingTile, 0, "loading::0,0,0"); + gMap.loadImageToTexture(gLoadingTile, getTileKey("loading", {x: 0, y: 0, z: 0})); gMap.gl.uniform2f(gMap.glResolutionAttr, gGLMapCanvas.width, gGLMapCanvas.height); @@ -307,18 +306,13 @@ var gMap = { gAction.dispatchEvent(throwEv); }, - draw: function(aPixels, aOverdraw) { - gMap.assembleGL(aPixels); + draw: function() { + gMap.assembleGL(); drawTrack(); }, - assembleGL: function(aPixels) { + assembleGL: function() { if (!gMap.gl) { return; } - // aPixels is an object with left/right/top/bottom members telling how many - // pixels on the borders should actually be drawn. - if (!aPixels) - aPixels = {left: gMap.gl.drawingBufferWidth, right: gMap.gl.drawingBufferWidth, - top: gMap.gl.drawingBufferHeight, bottom: gMap.gl.drawingBufferHeight}; document.getElementById("zoomLevel").textContent = gMap.pos.z; gMap.zoomFactor = Math.pow(2, gMap.maxZoom - gMap.pos.z); @@ -334,40 +328,27 @@ var gMap = { if (gMapPrefsLoaded && mainDB) gPrefs.set("position", gMap.pos); - var tiles = {left: Math.ceil((xMin + aPixels.left * gMap.zoomFactor) / size) - - (aPixels.left ? 0 : 1), - right: Math.floor((xMax - aPixels.right * gMap.zoomFactor) / size) - - (aPixels.right ? 1 : 0), - top: Math.ceil((yMin + aPixels.top * gMap.zoomFactor) / size) - - (aPixels.top ? 0 : 1), - bottom: Math.floor((yMax - aPixels.bottom * gMap.zoomFactor) / size) - - (aPixels.bottom ? 1 : 0)}; - // Go through all the tiles in the map, find out if to draw them and do so. for (var x = Math.floor(xMin / size); x < Math.ceil(xMax / size); x++) { for (var y = Math.floor(yMin / size); y < Math.ceil(yMax / size); y++) { // slow script warnings on the tablet appear here! - // Only go to loading step if we need to fetch the image for this tile. - if (x < tiles.left || x > tiles.right || - y < tiles.top || y > tiles.bottom) { + // Only go to loading step if we haven't loaded the texture. + var coords = {x: x, y: y, z: gMap.pos.z}; + var tileKey = getTileKey(gMap.activeMap, normalizeCoords(coords)); + if (!gMap.glTextures[tileKey]) { // Initiate loading/drawing of the actual tile. - gTileService.get(gMap.activeMap, {x: x, y: y, z: gMap.pos.z}, + gTileService.get(gMap.activeMap, coords, function(aImage, aStyle, aCoords, aTileKey) { - // Only load if this applies for the current view. + // Only actually load if this still applies for the current view. if ((aStyle == gMap.activeMap) && (aCoords.z == gMap.pos.z)) { - var txIndex = gMap.glTextureKeys[aTileKey]; - if (!txIndex) { - var URL = window.URL; - var imgURL = URL.createObjectURL(aImage); - var imgObj = new Image(); - imgObj.onload = function() { - var txNr = 1; - while (gMap.glTextures["tx" + txNr]) { txNr++; } - gMap.loadImageToTexture(imgObj, txNr, aTileKey); - requestAnimationFrame(function(aTimestamp) { gMap.drawGL() }); - URL.revokeObjectURL(imgURL); - } - imgObj.src = imgURL; + var URL = window.URL; + var imgURL = URL.createObjectURL(aImage); + var imgObj = new Image(); + imgObj.onload = function() { + gMap.loadImageToTexture(imgObj, aTileKey); + requestAnimationFrame(function(aTimestamp) { gMap.drawGL() }); + URL.revokeObjectURL(imgURL); } + imgObj.src = imgURL; } }); } @@ -386,7 +367,6 @@ var gMap = { var xMax = gMap.pos.x + wid / 2; var yMax = gMap.pos.y + ht / 2; - var txIndexList = []; // Go through all the tiles in the map, find out if to draw them and do so. for (var x = Math.floor(xMin / size); x < Math.ceil(xMax / size); x++) { for (var y = Math.floor(yMin / size); y < Math.ceil(yMax / size); y++) { // slow script warnings on the tablet appear here! @@ -394,16 +374,15 @@ var gMap = { // and the performance sucks (more than expected). var xoff = Math.round((x * size - xMin) / gMap.zoomFactor); var yoff = Math.round((y * size - yMin) / gMap.zoomFactor); - // Draw the tile, first find out the index of the texture to use. + // Draw the tile, first find out the actual texture to use. var norm = normalizeCoords({x: x, y: y, z: gMap.pos.z}); var tileKey = getTileKey(gMap.activeMap, norm); - var txIndex = gMap.glTextureKeys[tileKey]; - if (!txIndex) { txIndex = 0; } - txIndexList.push(txIndex); - gMap.drawTileGL(xoff, yoff, txIndex); + if (!gMap.glTextures[tileKey]) { + tileKey = getTileKey("loading", {x: 0, y: 0, z: 0}); + } + gMap.drawTileGL(xoff, yoff, tileKey); } } - console.log("Used Indexes: " + txIndexList.join(",")); }, resizeAndDraw: function() { @@ -427,9 +406,9 @@ var gMap = { } }, - drawTileGL: function(aLeft, aRight, aTextureIndex) { + drawTileGL: function(aLeft, aRight, aTileKey) { gMap.gl.activeTexture(gMap.gl.TEXTURE0); - gMap.gl.bindTexture(gMap.gl.TEXTURE_2D, gMap.glTextures["tx" + aTextureIndex]); + gMap.gl.bindTexture(gMap.gl.TEXTURE_2D, gMap.glTextures[aTileKey]); // Set uImage to refer to TEXTURE0 gMap.gl.uniform1i(gMap.gl.getUniformLocation(gMap.glShaderProgram, "uImage"), 0); var x_start = aLeft; @@ -450,12 +429,11 @@ var gMap = { gMap.gl.drawArrays(gMap.gl.TRIANGLES, 0, 6); }, - loadImageToTexture: function(aImage, aTextureIndex, aTileKey) { + loadImageToTexture: function(aImage, aTileKey) { // TODO: Get rid of old textures. - gMap.glTextureKeys[aTileKey] = aTextureIndex; // Create and bind texture. - gMap.glTextures["tx" + aTextureIndex] = gMap.gl.createTexture(); - gMap.gl.bindTexture(gMap.gl.TEXTURE_2D, gMap.glTextures["tx" + aTextureIndex]); + gMap.glTextures[aTileKey] = gMap.gl.createTexture(); + gMap.gl.bindTexture(gMap.gl.TEXTURE_2D, gMap.glTextures[aTileKey]); // Set params for how the texture minifies and magnifies (wrap params are not needed as we're power-of-two). gMap.gl.texParameteri(gMap.gl.TEXTURE_2D, gMap.gl.TEXTURE_MIN_FILTER, gMap.gl.NEAREST); gMap.gl.texParameteri(gMap.gl.TEXTURE_2D, gMap.gl.TEXTURE_MAG_FILTER, gMap.gl.NEAREST); @@ -754,22 +732,7 @@ var mapEvHandler = { var dY = y - gLastMouseY; gMap.pos.x -= dX * gMap.zoomFactor; gMap.pos.y -= dY * gMap.zoomFactor; - if (false) { // use optimized path - /* TODO: investigate optimized path for GL - code below was 2D. - var mapData = gMapContext.getImageData(0, 0, - gMapCanvas.width, - gMapCanvas.height); - gMapContext.clearRect(0, 0, gMapCanvas.width, gMapCanvas.height); - gMapContext.putImageData(mapData, dX, dY); - gMap.draw({left: (dX > 0) ? dX : 0, - right: (dX < 0) ? -dX : 0, - top: (dY > 0) ? dY : 0, - bottom: (dY < 0) ? -dY : 0}); - */ - } - else { - gMap.draw(false, true); - } + gMap.draw(); showUI(); } gLastMouseX = x; @@ -890,22 +853,7 @@ var mapEvHandler = { if (dX || dY) { gMap.pos.x -= dX * gMap.zoomFactor; gMap.pos.y -= dY * gMap.zoomFactor; - if (false) { // use optimized path - /* TODO: investigate optimized path for GL - code below was 2D. - var mapData = gMapContext.getImageData(0, 0, - gMapCanvas.width, - gMapCanvas.height); - gMapContext.clearRect(0, 0, gMapCanvas.width, gMapCanvas.height); - gMapContext.putImageData(mapData, dX, dY); - gMap.draw({left: (dX > 0) ? dX : 0, - right: (dX < 0) ? -dX : 0, - top: (dY > 0) ? dY : 0, - bottom: (dY < 0) ? -dY : 0}); - */ - } - else { - gMap.draw(false, true); - } + gMap.draw(); } break; }