Date: Fri, 25 Jun 2021 12:42:49 +0100
Subject: [PATCH 4/7] handle synchronous loading correctly
---
src/ol/reproj/Tile.js | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/ol/reproj/Tile.js b/src/ol/reproj/Tile.js
index 02fe5c75db..a44fcba169 100644
--- a/src/ol/reproj/Tile.js
+++ b/src/ol/reproj/Tile.js
@@ -334,15 +334,15 @@ class ReprojTile extends Tile {
}.bind(this)
);
- this.sourceTiles_.forEach(function (tile, i, arr) {
- const state = tile.getState();
- if (state == TileState.IDLE) {
- tile.load();
- }
- });
-
if (leftToLoad === 0) {
setTimeout(this.reproject_.bind(this), 0);
+ } else {
+ this.sourceTiles_.forEach(function (tile, i, arr) {
+ const state = tile.getState();
+ if (state == TileState.IDLE) {
+ tile.load();
+ }
+ });
}
}
}
From d8a5b91ad5203bc0f6032cd5ffc7c81ce4f71984 Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Fri, 25 Jun 2021 12:42:52 +0100
Subject: [PATCH 5/7] Make setImage() synchronous
---
src/ol/ImageTile.js | 12 ++++--------
1 file changed, 4 insertions(+), 8 deletions(-)
diff --git a/src/ol/ImageTile.js b/src/ol/ImageTile.js
index 741982fac3..b7f440afa2 100644
--- a/src/ol/ImageTile.js
+++ b/src/ol/ImageTile.js
@@ -78,14 +78,10 @@ class ImageTile extends Tile {
* @api
*/
setImage(element) {
- // asynchronous to accomodate reprojection listeners
- const tile = this;
- setTimeout(function () {
- tile.image_ = element;
- tile.state = TileState.LOADED;
- tile.unlistenImage_();
- tile.changed();
- }, 0);
+ this.image_ = element;
+ this.state = TileState.LOADED;
+ this.unlistenImage_();
+ this.changed();
}
/**
From f7bd8102c53e1eca463da788d56c79fc93ca2224 Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Tue, 29 Jun 2021 11:01:30 +0100
Subject: [PATCH 6/7] Add Show tile coordinates option
---
examples/reprojection-by-code.html | 28 ++++++++++++++----------
examples/reprojection-by-code.js | 34 +++++++++++++++++-------------
2 files changed, 36 insertions(+), 26 deletions(-)
diff --git a/examples/reprojection-by-code.html b/examples/reprojection-by-code.html
index df386d4864..d09702f50f 100644
--- a/examples/reprojection-by-code.html
+++ b/examples/reprojection-by-code.html
@@ -10,18 +10,24 @@ tags: "reprojection, projection, proj4js, epsg.io, graticule"
---
+
diff --git a/examples/reprojection-by-code.js b/examples/reprojection-by-code.js
index 2926a94486..2e169c1340 100644
--- a/examples/reprojection-by-code.js
+++ b/examples/reprojection-by-code.js
@@ -2,7 +2,7 @@ import Graticule from '../src/ol/layer/Graticule.js';
import Map from '../src/ol/Map.js';
import OSM from '../src/ol/source/OSM.js';
import Stroke from '../src/ol/style/Stroke.js';
-import TileImage from '../src/ol/source/TileImage.js';
+import TileDebug from '../src/ol/source/TileDebug.js';
import TileLayer from '../src/ol/layer/Tile.js';
import View from '../src/ol/View.js';
import proj4 from 'proj4';
@@ -10,6 +10,16 @@ import {applyTransform} from '../src/ol/extent.js';
import {get as getProjection, getTransform} from '../src/ol/proj.js';
import {register} from '../src/ol/proj/proj4.js';
+const osmSource = new OSM();
+
+const debugLayer = new TileLayer({
+ source: new TileDebug({
+ tileGrid: osmSource.getTileGrid(),
+ projection: osmSource.getProjection(),
+ }),
+ visible: false,
+});
+
const graticule = new Graticule({
// the style to use for the lines, optional.
strokeStyle: new Stroke({
@@ -25,8 +35,9 @@ const graticule = new Graticule({
const map = new Map({
layers: [
new TileLayer({
- source: new OSM(),
+ source: osmSource,
}),
+ debugLayer,
graticule,
],
target: 'map',
@@ -41,6 +52,7 @@ const queryInput = document.getElementById('epsg-query');
const searchButton = document.getElementById('epsg-search');
const resultSpan = document.getElementById('epsg-result');
const renderEdgesCheckbox = document.getElementById('render-edges');
+const showTilesCheckbox = document.getElementById('show-tiles');
const showGraticuleCheckbox = document.getElementById('show-graticule');
function setProjection(code, name, proj4def, bbox) {
@@ -125,22 +137,14 @@ searchButton.onclick = function (event) {
};
/**
- * Handle checkbox change event.
+ * Handle checkbox change events.
*/
renderEdgesCheckbox.onchange = function () {
- map.getLayers().forEach(function (layer) {
- if (layer instanceof TileLayer) {
- const source = layer.getSource();
- if (source instanceof TileImage) {
- source.setRenderReprojectionEdges(renderEdgesCheckbox.checked);
- }
- }
- });
+ osmSource.setRenderReprojectionEdges(renderEdgesCheckbox.checked);
+};
+showTilesCheckbox.onchange = function () {
+ debugLayer.setVisible(showTilesCheckbox.checked);
};
-
-/**
- * Handle checkbox change event.
- */
showGraticuleCheckbox.onchange = function () {
graticule.setVisible(showGraticuleCheckbox.checked);
};
From be6c757ff60d0a06c0351ebe19732047c09a3377 Mon Sep 17 00:00:00 2001
From: Andreas Hocevar
Date: Tue, 29 Jun 2021 14:19:58 +0200
Subject: [PATCH 7/7] Don't add setImage to the API
---
src/ol/ImageTile.js | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/ol/ImageTile.js b/src/ol/ImageTile.js
index b7f440afa2..a2fce7f973 100644
--- a/src/ol/ImageTile.js
+++ b/src/ol/ImageTile.js
@@ -75,7 +75,6 @@ class ImageTile extends Tile {
/**
* Sets an HTML image element for this tile (may be a Canvas or preloaded Image).
* @param {HTMLCanvasElement|HTMLImageElement} element Element.
- * @api
*/
setImage(element) {
this.image_ = element;