New image tile source

config/tsconfig-strict.json

@@ -220,6 +220,7 @@
     "../src/ol/source/ImageMapGuide.js",
     "../src/ol/source/ImageStatic.js",
     "../src/ol/source/ImageWMS.js",
+    "../src/ol/source/ImageTile.js",
     "../src/ol/source/mapguide.js",
     "../src/ol/source/OGCMapTile.js",
     "../src/ol/source/ogcTileUtil.js",

examples/clusters-dynamic.js

@@ -1,5 +1,6 @@
 import Feature from '../src/ol/Feature.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
+import ImageTile from '../src/ol/source/ImageTile.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {
@@ -10,7 +11,7 @@ import {
   Style,
   Text,
 } from '../src/ol/style.js';
-import {Cluster, Vector as VectorSource, XYZ} from '../src/ol/source.js';
+import {Cluster, Vector as VectorSource} from '../src/ol/source.js';
 import {LineString, Point, Polygon} from '../src/ol/geom.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {createEmpty, extend, getHeight, getWidth} from '../src/ol/extent.js';
@@ -210,7 +211,7 @@ const clusterCircles = new VectorLayer({
 });
 
 const raster = new TileLayer({
-  source: new XYZ({
+  source: new ImageTile({
     attributions:
       'Base map: <a target="_blank" href="https://basemap.at/">basemap.at</a>',
     url: 'https://maps{1-4}.wien.gv.at/basemap/bmapgrau/normal/google3857/{z}/{y}/{x}.png',

examples/data-tiles.js

@@ -9,7 +9,7 @@ const canvas = document.createElement('canvas');
 canvas.width = size;
 canvas.height = size;
 
-const context = canvas.getContext('2d');
+const context = canvas.getContext('2d', {willReadFrequently: true});
 context.strokeStyle = 'white';
 context.textAlign = 'center';
 context.font = '24px sans-serif';
@@ -30,9 +30,7 @@ const map = new Map({
           context.fillText(`x: ${x}`, half, half);
           context.fillText(`y: ${y}`, half, half + lineHeight);
           context.strokeRect(0, 0, size, size);
-          const data = context.getImageData(0, 0, size, size).data;
-          // converting to Uint8Array for increased browser compatibility
-          return new Uint8Array(data.buffer);
+          return context.getImageData(0, 0, size, size).data;
         },
         // disable opacity transition to avoid overlapping labels during tile loading
         transition: 0,

examples/drag-and-drop-image-vector.js

@@ -1,3 +1,4 @@
+import ImageTile from '../src/ol/source/ImageTile.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {
@@ -9,7 +10,7 @@ import {
   Tile as TileLayer,
   VectorImage as VectorImageLayer,
 } from '../src/ol/layer.js';
-import {Vector as VectorSource, XYZ} from '../src/ol/source.js';
+import {Vector as VectorSource} from '../src/ol/source.js';
 
 const dragAndDropInteraction = new DragAndDrop({
   formatConstructors: [GPX, GeoJSON, IGC, KML, TopoJSON],
@@ -24,7 +25,7 @@ const map = new Map({
   interactions: defaultInteractions().extend([dragAndDropInteraction]),
   layers: [
     new TileLayer({
-      source: new XYZ({
+      source: new ImageTile({
         attributions: attributions,
         url:
           'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,

examples/drag-and-drop.js

@@ -1,9 +1,10 @@
 import DragAndDrop from '../src/ol/interaction/DragAndDrop.js';
+import ImageTile from '../src/ol/source/ImageTile.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {Vector as VectorSource, XYZ} from '../src/ol/source.js';
+import {Vector as VectorSource} from '../src/ol/source.js';
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
 const attributions =
@@ -13,7 +14,7 @@ const attributions =
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new XYZ({
+      source: new ImageTile({
         attributions: attributions,
         url:
           'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,

examples/feature-move-animation.js

@@ -1,10 +1,10 @@
 import Feature from '../src/ol/Feature.js';
+import ImageTile from '../src/ol/source/ImageTile.js';
 import Map from '../src/ol/Map.js';
 import Point from '../src/ol/geom/Point.js';
 import Polyline from '../src/ol/format/Polyline.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
-import XYZ from '../src/ol/source/XYZ.js';
 import {
   Circle as CircleStyle,
   Fill,
@@ -31,7 +31,7 @@ const map = new Map({
   }),
   layers: [
     new TileLayer({
-      source: new XYZ({
+      source: new ImageTile({
         attributions: attributions,
         url: 'https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=' + key,
         tileSize: 512,

examples/full-screen-drag-rotate-and-zoom.js

@@ -1,7 +1,7 @@
+import ImageTile from '../src/ol/source/ImageTile.js';
 import Map from '../src/ol/Map.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import View from '../src/ol/View.js';
-import XYZ from '../src/ol/source/XYZ.js';
 import {
   DragRotateAndZoom,
   defaults as defaultInteractions,
@@ -18,7 +18,7 @@ const map = new Map({
   interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
   layers: [
     new TileLayer({
-      source: new XYZ({
+      source: new ImageTile({
         attributions: attributions,
         url:
           'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,

examples/full-screen.js

@@ -1,7 +1,7 @@
+import Layer from '../src/ol/layer/WebGLTile.js';
 import Map from '../src/ol/Map.js';
-import TileLayer from '../src/ol/layer/Tile.js';
+import Source from '../src/ol/source/ImageTile.js';
 import View from '../src/ol/View.js';
-import XYZ from '../src/ol/source/XYZ.js';
 import {FullScreen, defaults as defaultControls} from '../src/ol/control.js';
 
 const view = new View({
@@ -17,8 +17,8 @@ const attributions =
 const map = new Map({
   controls: defaultControls().extend([new FullScreen()]),
   layers: [
-    new TileLayer({
-      source: new XYZ({
+    new Layer({
+      source: new Source({
         attributions: attributions,
         url:
           'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,

examples/gpx.js

@@ -1,8 +1,8 @@
 import GPX from '../src/ol/format/GPX.js';
+import ImageTile from '../src/ol/source/ImageTile.js';
 import Map from '../src/ol/Map.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
-import XYZ from '../src/ol/source/XYZ.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
@@ -12,7 +12,7 @@ const attributions =
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const raster = new TileLayer({
-  source: new XYZ({
+  source: new ImageTile({
     attributions: attributions,
     url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
     maxZoom: 20,

examples/icon-sprite-webgl.js

@@ -1,11 +1,11 @@
 import Feature from '../src/ol/Feature.js';
+import ImageTile from '../src/ol/source/ImageTile.js';
 import Map from '../src/ol/Map.js';
 import Point from '../src/ol/geom/Point.js';
 import TileLayer from '../src/ol/layer/WebGLTile.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
 import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js';
-import XYZ from '../src/ol/source/XYZ.js';
 import {fromLonLat} from '../src/ol/proj.js';
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
@@ -16,11 +16,10 @@ const attributions =
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new XYZ({
+      source: new ImageTile({
         attributions: attributions,
         url:
           'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
-        tileSize: 512,
       }),
     }),
   ],

examples/image-filter.js

@@ -1,7 +1,7 @@
+import ImageTile from '../src/ol/source/ImageTile.js';
 import Map from '../src/ol/Map.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import View from '../src/ol/View.js';
-import XYZ from '../src/ol/source/XYZ.js';
 import {fromLonLat} from '../src/ol/proj.js';
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
@@ -10,7 +10,7 @@ const attributions =
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const imagery = new TileLayer({
-  source: new XYZ({
+  source: new ImageTile({
     attributions: attributions,
     url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
     maxZoom: 20,

examples/kml.js

@@ -1,8 +1,8 @@
+import ImageTile from '../src/ol/source/ImageTile.js';
 import KML from '../src/ol/format/KML.js';
 import Map from '../src/ol/Map.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
-import XYZ from '../src/ol/source/XYZ.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
@@ -11,7 +11,7 @@ const attributions =
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const raster = new TileLayer({
-  source: new XYZ({
+  source: new ImageTile({
     attributions: attributions,
     url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
     maxZoom: 20,

examples/layer-opacity.js

@@ -1,19 +1,18 @@
+import ImageTile from '../src/ol/source/ImageTile.js';
 import Map from '../src/ol/Map.js';
 import OSM from '../src/ol/source/OSM.js';
 import TileLayer from '../src/ol/layer/WebGLTile.js';
 import View from '../src/ol/View.js';
-import XYZ from '../src/ol/source/XYZ.js';
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
 
 const imagery = new TileLayer({
   className: 'ol-layer-imagery',
-  source: new XYZ({
+  source: new ImageTile({
     attributions:
       '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ',
     url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
     maxZoom: 20,
-    crossOrigin: '',
   }),
 });