Merge pull request #6 from juliangiebel/2023.08.30-map-tiling

Implement basic 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

@@ -1,10 +1,14 @@
-import { Map, View } from "ol";
+import {ImageTile, Map, View} from "ol";
 import { getCenter } from "ol/extent";
 import Projection from "ol/proj/Projection";
 import Image from "ol/layer/Image"
 import ImageStatic from "ol/source/ImageStatic";
 import Parallax from "./ParallaxLayer";
 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) {
@@ -63,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]),
@@ -148,7 +153,7 @@ class MapLoader {
 				extent.a.y += baseGridExtent.b.y - baseGridOffset.y - 4.5 * gridLayer.offset.y;
 				extent.b.x -= /*4.12 **/ gridLayer.offset.x - extent.b.x;
 				extent.b.y += baseGridExtent.b.y - baseGridOffset.y - 4.5 * gridLayer.offset.y;
-				console.log(extent);
+				//console.log(extent);
 			}
 
 			/*const projection = new Projection({
@@ -157,27 +162,33 @@ class MapLoader {
 				extent: [extent.X1, extent.Y1, extent.X2, extent.Y2],
 			});*/
 
-			console.log(gridLayer.url);
+			//console.log(gridLayer.url);
 
 			if (gridLayer.tiled) {
-				//TODO: Implement map tiling
-				mapLayer = new Image({
-					//className: 'map',
-					source: new ImageStatic({
-						attributions: gridLayer.attributions,
-						url: gridLayer.url,
+				mapLayer = new TileLayer({
+					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}",
+						tileGrid: new TileGrid({
+							extent: [extent.a.x, extent.a.y, extent.b.x, extent.b.y],
+							maxZoom: 0,
+							resolutions: [1],
+							tileSize: [gridLayer.tileSize, gridLayer.tileSize],
+						}),
 						interpolate: false,
 						projection: projection,
-						imageExtent: [extent.a.x, extent.a.y, extent.b.x, extent.b.y],
-						imageSmoothing: false
-					}),
+						wrapX: false
+					})
 				});
 
 			} else {
 
 				mapLayer = new Image({
 					source: new ImageStatic({
-						attributions: gridLayer.attributions,
+						attributions: data.attributions,
 						url: gridLayer.url,
 						interpolate: false,
 						projection: projection,

js/Markers.js

@@ -5,7 +5,7 @@ import {Circle, Fill, Stroke, Style, Text} from 'ol/style';
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
 
-console.log(Ajv);
+//console.log(Ajv);
 
 const schema = {
     elements: {

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;

package.json

@@ -4,9 +4,9 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview --host"
   },
   "devDependencies": {
     "vite": "^4.3.9"