Merge branch '2023.08.30-map-tiling' of github.com:juliangiebel/space…

…-station-14-map-viewer into 2023.08.30-map-tiling

js/AsyncImage.js

@@ -21,7 +21,7 @@ class AsyncImage {
 
     /**
      * 
-     * @param {(image: Image, data: any) => void} callback A function that gets executed when the image is loaded
+     * @param {(image: HTMLImageElement, data: any) => void} callback A function that gets executed when the image is loaded
      * @param {*} data additional data to pass to that function
      */
     executeOnLoad(callback, data) {
@@ -34,4 +34,4 @@ class AsyncImage {
     }
 }
 
-export default AsyncImage;
+export default AsyncImage;

js/MapLoader.js

@@ -8,6 +8,7 @@ import Config from "./Config.js";
 import TileLayer from "ol/layer/Tile.js";
 import {XYZ} from "ol/source.js";
 import TileGrid from "ol/tilegrid/TileGrid.js";
+import TileImagePreloader from "./TileImagePreloader.js";
 
 class MapLoader {
 	static async loadMap(mapName) {
@@ -66,6 +67,7 @@ class MapLoader {
 		const map = new Map({
 			layers: layers,
 			target: 'map',
+			maxTilesLoading: 20,
 			view: new View({
 				projection: projection,
 				center: getCenter([map0Extent.a.x, map0Extent.a.y, map0Extent.b.x, map0Extent.b.y]),
@@ -163,10 +165,10 @@ class MapLoader {
 			//console.log(gridLayer.url);
 
 			if (gridLayer.tiled) {
-				//TODO: Implement map tiling
 				mapLayer = new TileLayer({
-					//className: 'map',
 					extent: [extent.a.x, extent.a.y, extent.b.x, extent.b.y],
+					updateWhileInteracting: true,
+					updateWhileAnimating: true,
 					source: new XYZ({
 						attributions: data.attributions,
 						url: "https://" + gridLayer.url.replace(/https?:\/\//, "") + "/{x}/{y}/{z}",

js/TileImagePreloader.js

@@ -0,0 +1,26 @@
+import ImageTile from "ol/Tile";
+import AsyncImage from "./AsyncImage.js";
+import * as TileState from "ol/TileState.js";
+
+class TileImagePreloader
+{
+    /**
+     *
+     * @param tile { ImageTile }
+     * @param src { string }
+     */
+    static load(tile, src)
+    {
+        new AsyncImage(src + "?preload=true").executeOnLoad((image, data, isAsync) => {
+            tile.setImage(image);
+            const fullImage = new AsyncImage(src);
+            fullImage.executeOnLoad((image, data, isAsync) => {
+               tile.setImage(image);
+            }, null);
+
+            fullImage.promise.catch(e => tile.setState(TileState.ERROR));
+        }, null);
+    }
+}
+
+export default TileImagePreloader;