Make code prettier
This updates ESLint and our shared eslint-config-openlayers to use Prettier. Most formatting changes were automatically applied with this:
npm run lint -- --fix
A few manual changes were required:
* In `examples/offscreen-canvas.js`, the `//eslint-disable-line` comment needed to be moved to the appropriate line to disable the error about the `'worker-loader!./offscreen-canvas.worker.js'` import.
* In `examples/webpack/exapmle-builder.js`, spaces could not be added after a couple `function`s for some reason. While editing this, I reworked `ExampleBuilder` to be a class.
* In `src/ol/format/WMSGetFeatureInfo.js`, the `// @ts-ignore` comment needed to be moved down one line so it applied to the `parsersNS` argument.
This commit is contained in:
+66
-25
@@ -3,20 +3,21 @@
|
||||
*/
|
||||
import {ERROR_THRESHOLD} from './common.js';
|
||||
|
||||
import EventType from '../events/EventType.js';
|
||||
import ImageBase from '../ImageBase.js';
|
||||
import ImageState from '../ImageState.js';
|
||||
import {listen, unlistenByKey} from '../events.js';
|
||||
import EventType from '../events/EventType.js';
|
||||
import {getCenter, getIntersection, getHeight, getWidth} from '../extent.js';
|
||||
import {calculateSourceResolution, render as renderReprojected} from '../reproj.js';
|
||||
import Triangulation from './Triangulation.js';
|
||||
|
||||
import {
|
||||
calculateSourceResolution,
|
||||
render as renderReprojected,
|
||||
} from '../reproj.js';
|
||||
import {getCenter, getHeight, getIntersection, getWidth} from '../extent.js';
|
||||
import {listen, unlistenByKey} from '../events.js';
|
||||
|
||||
/**
|
||||
* @typedef {function(import("../extent.js").Extent, number, number) : import("../ImageBase.js").default} FunctionType
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* @classdesc
|
||||
* Class encapsulating single reprojected image.
|
||||
@@ -32,25 +33,46 @@ class ReprojImage extends ImageBase {
|
||||
* @param {FunctionType} getImageFunction
|
||||
* Function returning source images (extent, resolution, pixelRatio).
|
||||
*/
|
||||
constructor(sourceProj, targetProj, targetExtent, targetResolution, pixelRatio, getImageFunction) {
|
||||
constructor(
|
||||
sourceProj,
|
||||
targetProj,
|
||||
targetExtent,
|
||||
targetResolution,
|
||||
pixelRatio,
|
||||
getImageFunction
|
||||
) {
|
||||
const maxSourceExtent = sourceProj.getExtent();
|
||||
const maxTargetExtent = targetProj.getExtent();
|
||||
|
||||
const limitedTargetExtent = maxTargetExtent ?
|
||||
getIntersection(targetExtent, maxTargetExtent) : targetExtent;
|
||||
const limitedTargetExtent = maxTargetExtent
|
||||
? getIntersection(targetExtent, maxTargetExtent)
|
||||
: targetExtent;
|
||||
|
||||
const targetCenter = getCenter(limitedTargetExtent);
|
||||
const sourceResolution = calculateSourceResolution(
|
||||
sourceProj, targetProj, targetCenter, targetResolution);
|
||||
sourceProj,
|
||||
targetProj,
|
||||
targetCenter,
|
||||
targetResolution
|
||||
);
|
||||
|
||||
const errorThresholdInPixels = ERROR_THRESHOLD;
|
||||
|
||||
const triangulation = new Triangulation(
|
||||
sourceProj, targetProj, limitedTargetExtent, maxSourceExtent,
|
||||
sourceResolution * errorThresholdInPixels, targetResolution);
|
||||
sourceProj,
|
||||
targetProj,
|
||||
limitedTargetExtent,
|
||||
maxSourceExtent,
|
||||
sourceResolution * errorThresholdInPixels,
|
||||
targetResolution
|
||||
);
|
||||
|
||||
const sourceExtent = triangulation.calculateSourceExtent();
|
||||
const sourceImage = getImageFunction(sourceExtent, sourceResolution, pixelRatio);
|
||||
const sourceImage = getImageFunction(
|
||||
sourceExtent,
|
||||
sourceResolution,
|
||||
pixelRatio
|
||||
);
|
||||
const state = sourceImage ? ImageState.IDLE : ImageState.EMPTY;
|
||||
const sourcePixelRatio = sourceImage ? sourceImage.getPixelRatio() : 1;
|
||||
|
||||
@@ -144,12 +166,23 @@ class ReprojImage extends ImageBase {
|
||||
const width = getWidth(this.targetExtent_) / this.targetResolution_;
|
||||
const height = getHeight(this.targetExtent_) / this.targetResolution_;
|
||||
|
||||
this.canvas_ = renderReprojected(width, height, this.sourcePixelRatio_,
|
||||
this.sourceImage_.getResolution(), this.maxSourceExtent_,
|
||||
this.targetResolution_, this.targetExtent_, this.triangulation_, [{
|
||||
extent: this.sourceImage_.getExtent(),
|
||||
image: this.sourceImage_.getImage()
|
||||
}], 0);
|
||||
this.canvas_ = renderReprojected(
|
||||
width,
|
||||
height,
|
||||
this.sourcePixelRatio_,
|
||||
this.sourceImage_.getResolution(),
|
||||
this.maxSourceExtent_,
|
||||
this.targetResolution_,
|
||||
this.targetExtent_,
|
||||
this.triangulation_,
|
||||
[
|
||||
{
|
||||
extent: this.sourceImage_.getExtent(),
|
||||
image: this.sourceImage_.getImage(),
|
||||
},
|
||||
],
|
||||
0
|
||||
);
|
||||
}
|
||||
this.state = sourceState;
|
||||
this.changed();
|
||||
@@ -167,14 +200,21 @@ class ReprojImage extends ImageBase {
|
||||
if (sourceState == ImageState.LOADED || sourceState == ImageState.ERROR) {
|
||||
this.reproject_();
|
||||
} else {
|
||||
this.sourceListenerKey_ = listen(this.sourceImage_,
|
||||
EventType.CHANGE, function(e) {
|
||||
this.sourceListenerKey_ = listen(
|
||||
this.sourceImage_,
|
||||
EventType.CHANGE,
|
||||
function (e) {
|
||||
const sourceState = this.sourceImage_.getState();
|
||||
if (sourceState == ImageState.LOADED || sourceState == ImageState.ERROR) {
|
||||
if (
|
||||
sourceState == ImageState.LOADED ||
|
||||
sourceState == ImageState.ERROR
|
||||
) {
|
||||
this.unlistenSource_();
|
||||
this.reproject_();
|
||||
}
|
||||
}, this);
|
||||
},
|
||||
this
|
||||
);
|
||||
this.sourceImage_.load();
|
||||
}
|
||||
}
|
||||
@@ -184,10 +224,11 @@ class ReprojImage extends ImageBase {
|
||||
* @private
|
||||
*/
|
||||
unlistenSource_() {
|
||||
unlistenByKey(/** @type {!import("../events.js").EventsKey} */ (this.sourceListenerKey_));
|
||||
unlistenByKey(
|
||||
/** @type {!import("../events.js").EventsKey} */ (this.sourceListenerKey_)
|
||||
);
|
||||
this.sourceListenerKey_ = null;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default ReprojImage;
|
||||
|
||||
+100
-56
@@ -3,21 +3,22 @@
|
||||
*/
|
||||
import {ERROR_THRESHOLD} from './common.js';
|
||||
|
||||
import EventType from '../events/EventType.js';
|
||||
import Tile from '../Tile.js';
|
||||
import TileState from '../TileState.js';
|
||||
import {listen, unlistenByKey} from '../events.js';
|
||||
import EventType from '../events/EventType.js';
|
||||
import {getArea, getIntersection} from '../extent.js';
|
||||
import {clamp} from '../math.js';
|
||||
import {calculateSourceExtentResolution, render as renderReprojected} from '../reproj.js';
|
||||
import Triangulation from './Triangulation.js';
|
||||
|
||||
import {
|
||||
calculateSourceExtentResolution,
|
||||
render as renderReprojected,
|
||||
} from '../reproj.js';
|
||||
import {clamp} from '../math.js';
|
||||
import {getArea, getIntersection} from '../extent.js';
|
||||
import {listen, unlistenByKey} from '../events.js';
|
||||
|
||||
/**
|
||||
* @typedef {function(number, number, number, number) : import("../Tile.js").default} FunctionType
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* @classdesc
|
||||
* Class encapsulating single reprojected tile.
|
||||
@@ -39,7 +40,7 @@ class ReprojTile extends Tile {
|
||||
* @param {number=} opt_errorThreshold Acceptable reprojection error (in px).
|
||||
* @param {boolean=} opt_renderEdges Render reprojection edges.
|
||||
* @param {object=} opt_contextOptions Properties to set on the canvas context.
|
||||
*/
|
||||
*/
|
||||
constructor(
|
||||
sourceProj,
|
||||
sourceTileGrid,
|
||||
@@ -122,12 +123,15 @@ class ReprojTile extends Tile {
|
||||
*/
|
||||
this.sourceZ_ = 0;
|
||||
|
||||
const targetExtent = targetTileGrid.getTileCoordExtent(this.wrappedTileCoord_);
|
||||
const targetExtent = targetTileGrid.getTileCoordExtent(
|
||||
this.wrappedTileCoord_
|
||||
);
|
||||
const maxTargetExtent = this.targetTileGrid_.getExtent();
|
||||
let maxSourceExtent = this.sourceTileGrid_.getExtent();
|
||||
|
||||
const limitedTargetExtent = maxTargetExtent ?
|
||||
getIntersection(targetExtent, maxTargetExtent) : targetExtent;
|
||||
const limitedTargetExtent = maxTargetExtent
|
||||
? getIntersection(targetExtent, maxTargetExtent)
|
||||
: targetExtent;
|
||||
|
||||
if (getArea(limitedTargetExtent) === 0) {
|
||||
// Tile is completely outside range -> EMPTY
|
||||
@@ -146,10 +150,15 @@ class ReprojTile extends Tile {
|
||||
}
|
||||
|
||||
const targetResolution = targetTileGrid.getResolution(
|
||||
this.wrappedTileCoord_[0]);
|
||||
this.wrappedTileCoord_[0]
|
||||
);
|
||||
|
||||
const sourceResolution = calculateSourceExtentResolution(
|
||||
sourceProj, targetProj, limitedTargetExtent, targetResolution);
|
||||
sourceProj,
|
||||
targetProj,
|
||||
limitedTargetExtent,
|
||||
targetResolution
|
||||
);
|
||||
|
||||
if (!isFinite(sourceResolution) || sourceResolution <= 0) {
|
||||
// invalid sourceResolution -> EMPTY
|
||||
@@ -158,16 +167,21 @@ class ReprojTile extends Tile {
|
||||
return;
|
||||
}
|
||||
|
||||
const errorThresholdInPixels = opt_errorThreshold !== undefined ?
|
||||
opt_errorThreshold : ERROR_THRESHOLD;
|
||||
const errorThresholdInPixels =
|
||||
opt_errorThreshold !== undefined ? opt_errorThreshold : ERROR_THRESHOLD;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {!import("./Triangulation.js").default}
|
||||
*/
|
||||
this.triangulation_ = new Triangulation(
|
||||
sourceProj, targetProj, limitedTargetExtent, maxSourceExtent,
|
||||
sourceResolution * errorThresholdInPixels, targetResolution);
|
||||
sourceProj,
|
||||
targetProj,
|
||||
limitedTargetExtent,
|
||||
maxSourceExtent,
|
||||
sourceResolution * errorThresholdInPixels,
|
||||
targetResolution
|
||||
);
|
||||
|
||||
if (this.triangulation_.getTriangles().length === 0) {
|
||||
// no valid triangles -> EMPTY
|
||||
@@ -181,9 +195,15 @@ class ReprojTile extends Tile {
|
||||
if (maxSourceExtent) {
|
||||
if (sourceProj.canWrapX()) {
|
||||
sourceExtent[1] = clamp(
|
||||
sourceExtent[1], maxSourceExtent[1], maxSourceExtent[3]);
|
||||
sourceExtent[1],
|
||||
maxSourceExtent[1],
|
||||
maxSourceExtent[3]
|
||||
);
|
||||
sourceExtent[3] = clamp(
|
||||
sourceExtent[3], maxSourceExtent[1], maxSourceExtent[3]);
|
||||
sourceExtent[3],
|
||||
maxSourceExtent[1],
|
||||
maxSourceExtent[3]
|
||||
);
|
||||
} else {
|
||||
sourceExtent = getIntersection(sourceExtent, maxSourceExtent);
|
||||
}
|
||||
@@ -193,7 +213,9 @@ class ReprojTile extends Tile {
|
||||
this.state = TileState.EMPTY;
|
||||
} else {
|
||||
const sourceRange = sourceTileGrid.getTileRangeForExtentAndZ(
|
||||
sourceExtent, this.sourceZ_);
|
||||
sourceExtent,
|
||||
this.sourceZ_
|
||||
);
|
||||
|
||||
for (let srcX = sourceRange.minX; srcX <= sourceRange.maxX; srcX++) {
|
||||
for (let srcY = sourceRange.minY; srcY <= sourceRange.maxY; srcY++) {
|
||||
@@ -223,14 +245,16 @@ class ReprojTile extends Tile {
|
||||
*/
|
||||
reproject_() {
|
||||
const sources = [];
|
||||
this.sourceTiles_.forEach(function(tile, i, arr) {
|
||||
if (tile && tile.getState() == TileState.LOADED) {
|
||||
sources.push({
|
||||
extent: this.sourceTileGrid_.getTileCoordExtent(tile.tileCoord),
|
||||
image: tile.getImage()
|
||||
});
|
||||
}
|
||||
}.bind(this));
|
||||
this.sourceTiles_.forEach(
|
||||
function (tile, i, arr) {
|
||||
if (tile && tile.getState() == TileState.LOADED) {
|
||||
sources.push({
|
||||
extent: this.sourceTileGrid_.getTileCoordExtent(tile.tileCoord),
|
||||
image: tile.getImage(),
|
||||
});
|
||||
}
|
||||
}.bind(this)
|
||||
);
|
||||
this.sourceTiles_.length = 0;
|
||||
|
||||
if (sources.length === 0) {
|
||||
@@ -241,14 +265,27 @@ class ReprojTile extends Tile {
|
||||
const width = typeof size === 'number' ? size : size[0];
|
||||
const height = typeof size === 'number' ? size : size[1];
|
||||
const targetResolution = this.targetTileGrid_.getResolution(z);
|
||||
const sourceResolution = this.sourceTileGrid_.getResolution(this.sourceZ_);
|
||||
const sourceResolution = this.sourceTileGrid_.getResolution(
|
||||
this.sourceZ_
|
||||
);
|
||||
|
||||
const targetExtent = this.targetTileGrid_.getTileCoordExtent(
|
||||
this.wrappedTileCoord_);
|
||||
this.canvas_ = renderReprojected(width, height, this.pixelRatio_,
|
||||
sourceResolution, this.sourceTileGrid_.getExtent(),
|
||||
targetResolution, targetExtent, this.triangulation_, sources,
|
||||
this.gutter_, this.renderEdges_, this.contextOptions_);
|
||||
this.wrappedTileCoord_
|
||||
);
|
||||
this.canvas_ = renderReprojected(
|
||||
width,
|
||||
height,
|
||||
this.pixelRatio_,
|
||||
sourceResolution,
|
||||
this.sourceTileGrid_.getExtent(),
|
||||
targetResolution,
|
||||
targetExtent,
|
||||
this.triangulation_,
|
||||
sources,
|
||||
this.gutter_,
|
||||
this.renderEdges_,
|
||||
this.contextOptions_
|
||||
);
|
||||
|
||||
this.state = TileState.LOADED;
|
||||
}
|
||||
@@ -266,30 +303,38 @@ class ReprojTile extends Tile {
|
||||
let leftToLoad = 0;
|
||||
|
||||
this.sourcesListenerKeys_ = [];
|
||||
this.sourceTiles_.forEach(function(tile, i, arr) {
|
||||
const state = tile.getState();
|
||||
if (state == TileState.IDLE || state == TileState.LOADING) {
|
||||
leftToLoad++;
|
||||
this.sourceTiles_.forEach(
|
||||
function (tile, i, arr) {
|
||||
const state = tile.getState();
|
||||
if (state == TileState.IDLE || state == TileState.LOADING) {
|
||||
leftToLoad++;
|
||||
|
||||
const sourceListenKey = listen(tile, EventType.CHANGE,
|
||||
function(e) {
|
||||
const state = tile.getState();
|
||||
if (state == TileState.LOADED ||
|
||||
state == TileState.ERROR ||
|
||||
state == TileState.EMPTY) {
|
||||
unlistenByKey(sourceListenKey);
|
||||
leftToLoad--;
|
||||
if (leftToLoad === 0) {
|
||||
this.unlistenSources_();
|
||||
this.reproject_();
|
||||
const sourceListenKey = listen(
|
||||
tile,
|
||||
EventType.CHANGE,
|
||||
function (e) {
|
||||
const state = tile.getState();
|
||||
if (
|
||||
state == TileState.LOADED ||
|
||||
state == TileState.ERROR ||
|
||||
state == TileState.EMPTY
|
||||
) {
|
||||
unlistenByKey(sourceListenKey);
|
||||
leftToLoad--;
|
||||
if (leftToLoad === 0) {
|
||||
this.unlistenSources_();
|
||||
this.reproject_();
|
||||
}
|
||||
}
|
||||
}
|
||||
}, this);
|
||||
this.sourcesListenerKeys_.push(sourceListenKey);
|
||||
}
|
||||
}.bind(this));
|
||||
},
|
||||
this
|
||||
);
|
||||
this.sourcesListenerKeys_.push(sourceListenKey);
|
||||
}
|
||||
}.bind(this)
|
||||
);
|
||||
|
||||
this.sourceTiles_.forEach(function(tile, i, arr) {
|
||||
this.sourceTiles_.forEach(function (tile, i, arr) {
|
||||
const state = tile.getState();
|
||||
if (state == TileState.IDLE) {
|
||||
tile.load();
|
||||
@@ -311,5 +356,4 @@ class ReprojTile extends Tile {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default ReprojTile;
|
||||
|
||||
+194
-89
@@ -1,11 +1,20 @@
|
||||
/**
|
||||
* @module ol/reproj/Triangulation
|
||||
*/
|
||||
import {boundingExtent, createEmpty, extendCoordinate, getArea, getBottomLeft, getBottomRight,
|
||||
getTopLeft, getTopRight, getWidth, intersects} from '../extent.js';
|
||||
import {modulo} from '../math.js';
|
||||
import {
|
||||
boundingExtent,
|
||||
createEmpty,
|
||||
extendCoordinate,
|
||||
getArea,
|
||||
getBottomLeft,
|
||||
getBottomRight,
|
||||
getTopLeft,
|
||||
getTopRight,
|
||||
getWidth,
|
||||
intersects,
|
||||
} from '../extent.js';
|
||||
import {getTransform} from '../proj.js';
|
||||
|
||||
import {modulo} from '../math.js';
|
||||
|
||||
/**
|
||||
* Single triangle; consists of 3 source points and 3 target points.
|
||||
@@ -14,7 +23,6 @@ import {getTransform} from '../proj.js';
|
||||
* @property {Array<import("../coordinate.js").Coordinate>} target
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Maximum number of subdivision steps during raster reprojection triangulation.
|
||||
* Prevents high memory usage and large number of proj4 calls (for certain
|
||||
@@ -24,7 +32,6 @@ import {getTransform} from '../proj.js';
|
||||
*/
|
||||
const MAX_SUBDIVISION = 10;
|
||||
|
||||
|
||||
/**
|
||||
* Maximum allowed size of triangle relative to world width. When transforming
|
||||
* corners of world extent between certain projections, the resulting
|
||||
@@ -35,14 +42,12 @@ const MAX_SUBDIVISION = 10;
|
||||
*/
|
||||
const MAX_TRIANGLE_WIDTH = 0.25;
|
||||
|
||||
|
||||
/**
|
||||
* @classdesc
|
||||
* Class containing triangulation of the given target extent.
|
||||
* Used for determining source data and the reprojection itself.
|
||||
*/
|
||||
class Triangulation {
|
||||
|
||||
/**
|
||||
* @param {import("../proj/Projection.js").default} sourceProj Source projection.
|
||||
* @param {import("../proj/Projection.js").default} targetProj Target projection.
|
||||
@@ -51,8 +56,14 @@ class Triangulation {
|
||||
* @param {number} errorThreshold Acceptable error (in source units).
|
||||
* @param {?number} opt_destinationResolution The (optional) resolution of the destination.
|
||||
*/
|
||||
constructor(sourceProj, targetProj, targetExtent, maxSourceExtent, errorThreshold, opt_destinationResolution) {
|
||||
|
||||
constructor(
|
||||
sourceProj,
|
||||
targetProj,
|
||||
targetExtent,
|
||||
maxSourceExtent,
|
||||
errorThreshold,
|
||||
opt_destinationResolution
|
||||
) {
|
||||
/**
|
||||
* @type {import("../proj/Projection.js").default}
|
||||
* @private
|
||||
@@ -74,7 +85,7 @@ class Triangulation {
|
||||
* @return {import("../coordinate.js").Coordinate} Transformed coordinate.
|
||||
* @private
|
||||
*/
|
||||
this.transformInv_ = function(c) {
|
||||
this.transformInv_ = function (c) {
|
||||
const key = c[0] + '/' + c[1];
|
||||
if (!transformInvCache[key]) {
|
||||
transformInvCache[key] = transformInv(c);
|
||||
@@ -111,24 +122,27 @@ class Triangulation {
|
||||
* @type {boolean}
|
||||
* @private
|
||||
*/
|
||||
this.canWrapXInSource_ = this.sourceProj_.canWrapX() &&
|
||||
!!maxSourceExtent &&
|
||||
!!this.sourceProj_.getExtent() &&
|
||||
(getWidth(maxSourceExtent) == getWidth(this.sourceProj_.getExtent()));
|
||||
this.canWrapXInSource_ =
|
||||
this.sourceProj_.canWrapX() &&
|
||||
!!maxSourceExtent &&
|
||||
!!this.sourceProj_.getExtent() &&
|
||||
getWidth(maxSourceExtent) == getWidth(this.sourceProj_.getExtent());
|
||||
|
||||
/**
|
||||
* @type {?number}
|
||||
* @private
|
||||
*/
|
||||
this.sourceWorldWidth_ = this.sourceProj_.getExtent() ?
|
||||
getWidth(this.sourceProj_.getExtent()) : null;
|
||||
this.sourceWorldWidth_ = this.sourceProj_.getExtent()
|
||||
? getWidth(this.sourceProj_.getExtent())
|
||||
: null;
|
||||
|
||||
/**
|
||||
* @type {?number}
|
||||
* @private
|
||||
*/
|
||||
this.targetWorldWidth_ = this.targetProj_.getExtent() ?
|
||||
getWidth(this.targetProj_.getExtent()) : null;
|
||||
this.targetWorldWidth_ = this.targetProj_.getExtent()
|
||||
? getWidth(this.targetProj_.getExtent())
|
||||
: null;
|
||||
|
||||
const destinationTopLeft = getTopLeft(targetExtent);
|
||||
const destinationTopRight = getTopRight(targetExtent);
|
||||
@@ -149,54 +163,93 @@ class Triangulation {
|
||||
* value by the right factor so that each 256x256 pixel area has
|
||||
* MAX_SUBDIVISION divisions.
|
||||
*/
|
||||
const maxSubdivision = MAX_SUBDIVISION + (opt_destinationResolution ?
|
||||
Math.max(0, Math.ceil(Math.log2(getArea(targetExtent) /
|
||||
(opt_destinationResolution * opt_destinationResolution * 256 * 256))))
|
||||
: 0);
|
||||
const maxSubdivision =
|
||||
MAX_SUBDIVISION +
|
||||
(opt_destinationResolution
|
||||
? Math.max(
|
||||
0,
|
||||
Math.ceil(
|
||||
Math.log2(
|
||||
getArea(targetExtent) /
|
||||
(opt_destinationResolution *
|
||||
opt_destinationResolution *
|
||||
256 *
|
||||
256)
|
||||
)
|
||||
)
|
||||
)
|
||||
: 0);
|
||||
|
||||
this.addQuad_(
|
||||
destinationTopLeft, destinationTopRight,
|
||||
destinationBottomRight, destinationBottomLeft,
|
||||
sourceTopLeft, sourceTopRight, sourceBottomRight, sourceBottomLeft,
|
||||
maxSubdivision);
|
||||
destinationTopLeft,
|
||||
destinationTopRight,
|
||||
destinationBottomRight,
|
||||
destinationBottomLeft,
|
||||
sourceTopLeft,
|
||||
sourceTopRight,
|
||||
sourceBottomRight,
|
||||
sourceBottomLeft,
|
||||
maxSubdivision
|
||||
);
|
||||
|
||||
if (this.wrapsXInSource_) {
|
||||
let leftBound = Infinity;
|
||||
this.triangles_.forEach(function(triangle, i, arr) {
|
||||
leftBound = Math.min(leftBound,
|
||||
triangle.source[0][0], triangle.source[1][0], triangle.source[2][0]);
|
||||
this.triangles_.forEach(function (triangle, i, arr) {
|
||||
leftBound = Math.min(
|
||||
leftBound,
|
||||
triangle.source[0][0],
|
||||
triangle.source[1][0],
|
||||
triangle.source[2][0]
|
||||
);
|
||||
});
|
||||
|
||||
// Shift triangles to be as close to `leftBound` as possible
|
||||
// (if the distance is more than `worldWidth / 2` it can be closer.
|
||||
this.triangles_.forEach(function(triangle) {
|
||||
if (Math.max(triangle.source[0][0], triangle.source[1][0],
|
||||
triangle.source[2][0]) - leftBound > this.sourceWorldWidth_ / 2) {
|
||||
const newTriangle = [[triangle.source[0][0], triangle.source[0][1]],
|
||||
[triangle.source[1][0], triangle.source[1][1]],
|
||||
[triangle.source[2][0], triangle.source[2][1]]];
|
||||
if ((newTriangle[0][0] - leftBound) > this.sourceWorldWidth_ / 2) {
|
||||
newTriangle[0][0] -= this.sourceWorldWidth_;
|
||||
}
|
||||
if ((newTriangle[1][0] - leftBound) > this.sourceWorldWidth_ / 2) {
|
||||
newTriangle[1][0] -= this.sourceWorldWidth_;
|
||||
}
|
||||
if ((newTriangle[2][0] - leftBound) > this.sourceWorldWidth_ / 2) {
|
||||
newTriangle[2][0] -= this.sourceWorldWidth_;
|
||||
}
|
||||
this.triangles_.forEach(
|
||||
function (triangle) {
|
||||
if (
|
||||
Math.max(
|
||||
triangle.source[0][0],
|
||||
triangle.source[1][0],
|
||||
triangle.source[2][0]
|
||||
) -
|
||||
leftBound >
|
||||
this.sourceWorldWidth_ / 2
|
||||
) {
|
||||
const newTriangle = [
|
||||
[triangle.source[0][0], triangle.source[0][1]],
|
||||
[triangle.source[1][0], triangle.source[1][1]],
|
||||
[triangle.source[2][0], triangle.source[2][1]],
|
||||
];
|
||||
if (newTriangle[0][0] - leftBound > this.sourceWorldWidth_ / 2) {
|
||||
newTriangle[0][0] -= this.sourceWorldWidth_;
|
||||
}
|
||||
if (newTriangle[1][0] - leftBound > this.sourceWorldWidth_ / 2) {
|
||||
newTriangle[1][0] -= this.sourceWorldWidth_;
|
||||
}
|
||||
if (newTriangle[2][0] - leftBound > this.sourceWorldWidth_ / 2) {
|
||||
newTriangle[2][0] -= this.sourceWorldWidth_;
|
||||
}
|
||||
|
||||
// Rarely (if the extent contains both the dateline and prime meridian)
|
||||
// the shift can in turn break some triangles.
|
||||
// Detect this here and don't shift in such cases.
|
||||
const minX = Math.min(
|
||||
newTriangle[0][0], newTriangle[1][0], newTriangle[2][0]);
|
||||
const maxX = Math.max(
|
||||
newTriangle[0][0], newTriangle[1][0], newTriangle[2][0]);
|
||||
if ((maxX - minX) < this.sourceWorldWidth_ / 2) {
|
||||
triangle.source = newTriangle;
|
||||
// Rarely (if the extent contains both the dateline and prime meridian)
|
||||
// the shift can in turn break some triangles.
|
||||
// Detect this here and don't shift in such cases.
|
||||
const minX = Math.min(
|
||||
newTriangle[0][0],
|
||||
newTriangle[1][0],
|
||||
newTriangle[2][0]
|
||||
);
|
||||
const maxX = Math.max(
|
||||
newTriangle[0][0],
|
||||
newTriangle[1][0],
|
||||
newTriangle[2][0]
|
||||
);
|
||||
if (maxX - minX < this.sourceWorldWidth_ / 2) {
|
||||
triangle.source = newTriangle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}.bind(this));
|
||||
}.bind(this)
|
||||
);
|
||||
}
|
||||
|
||||
transformInvCache = {};
|
||||
@@ -215,7 +268,7 @@ class Triangulation {
|
||||
addTriangle_(a, b, c, aSrc, bSrc, cSrc) {
|
||||
this.triangles_.push({
|
||||
source: [aSrc, bSrc, cSrc],
|
||||
target: [a, b, c]
|
||||
target: [a, b, c],
|
||||
});
|
||||
}
|
||||
|
||||
@@ -236,37 +289,42 @@ class Triangulation {
|
||||
* @private
|
||||
*/
|
||||
addQuad_(a, b, c, d, aSrc, bSrc, cSrc, dSrc, maxSubdivision) {
|
||||
|
||||
const sourceQuadExtent = boundingExtent([aSrc, bSrc, cSrc, dSrc]);
|
||||
const sourceCoverageX = this.sourceWorldWidth_ ?
|
||||
getWidth(sourceQuadExtent) / this.sourceWorldWidth_ : null;
|
||||
const sourceCoverageX = this.sourceWorldWidth_
|
||||
? getWidth(sourceQuadExtent) / this.sourceWorldWidth_
|
||||
: null;
|
||||
const sourceWorldWidth = /** @type {number} */ (this.sourceWorldWidth_);
|
||||
|
||||
// when the quad is wrapped in the source projection
|
||||
// it covers most of the projection extent, but not fully
|
||||
const wrapsX = this.sourceProj_.canWrapX() &&
|
||||
sourceCoverageX > 0.5 && sourceCoverageX < 1;
|
||||
const wrapsX =
|
||||
this.sourceProj_.canWrapX() &&
|
||||
sourceCoverageX > 0.5 &&
|
||||
sourceCoverageX < 1;
|
||||
|
||||
let needsSubdivision = false;
|
||||
|
||||
if (maxSubdivision > 0) {
|
||||
if (this.targetProj_.isGlobal() && this.targetWorldWidth_) {
|
||||
const targetQuadExtent = boundingExtent([a, b, c, d]);
|
||||
const targetCoverageX = getWidth(targetQuadExtent) / this.targetWorldWidth_;
|
||||
needsSubdivision = targetCoverageX > MAX_TRIANGLE_WIDTH ||
|
||||
needsSubdivision;
|
||||
const targetCoverageX =
|
||||
getWidth(targetQuadExtent) / this.targetWorldWidth_;
|
||||
needsSubdivision =
|
||||
targetCoverageX > MAX_TRIANGLE_WIDTH || needsSubdivision;
|
||||
}
|
||||
if (!wrapsX && this.sourceProj_.isGlobal() && sourceCoverageX) {
|
||||
needsSubdivision = sourceCoverageX > MAX_TRIANGLE_WIDTH ||
|
||||
needsSubdivision;
|
||||
needsSubdivision =
|
||||
sourceCoverageX > MAX_TRIANGLE_WIDTH || needsSubdivision;
|
||||
}
|
||||
}
|
||||
|
||||
if (!needsSubdivision && this.maxSourceExtent_) {
|
||||
if (isFinite(sourceQuadExtent[0]) &&
|
||||
isFinite(sourceQuadExtent[1]) &&
|
||||
isFinite(sourceQuadExtent[2]) &&
|
||||
isFinite(sourceQuadExtent[3])) {
|
||||
if (
|
||||
isFinite(sourceQuadExtent[0]) &&
|
||||
isFinite(sourceQuadExtent[1]) &&
|
||||
isFinite(sourceQuadExtent[2]) &&
|
||||
isFinite(sourceQuadExtent[3])
|
||||
) {
|
||||
if (!intersects(sourceQuadExtent, this.maxSourceExtent_)) {
|
||||
// whole quad outside source projection extent -> ignore
|
||||
return;
|
||||
@@ -277,21 +335,32 @@ class Triangulation {
|
||||
let isNotFinite = 0;
|
||||
|
||||
if (!needsSubdivision) {
|
||||
if (!isFinite(aSrc[0]) || !isFinite(aSrc[1]) ||
|
||||
!isFinite(bSrc[0]) || !isFinite(bSrc[1]) ||
|
||||
!isFinite(cSrc[0]) || !isFinite(cSrc[1]) ||
|
||||
!isFinite(dSrc[0]) || !isFinite(dSrc[1])) {
|
||||
if (
|
||||
!isFinite(aSrc[0]) ||
|
||||
!isFinite(aSrc[1]) ||
|
||||
!isFinite(bSrc[0]) ||
|
||||
!isFinite(bSrc[1]) ||
|
||||
!isFinite(cSrc[0]) ||
|
||||
!isFinite(cSrc[1]) ||
|
||||
!isFinite(dSrc[0]) ||
|
||||
!isFinite(dSrc[1])
|
||||
) {
|
||||
if (maxSubdivision > 0) {
|
||||
needsSubdivision = true;
|
||||
} else {
|
||||
// It might be the case that only 1 of the points is infinite. In this case
|
||||
// we can draw a single triangle with the other three points
|
||||
isNotFinite =
|
||||
((!isFinite(aSrc[0]) || !isFinite(aSrc[1])) ? 8 : 0) +
|
||||
((!isFinite(bSrc[0]) || !isFinite(bSrc[1])) ? 4 : 0) +
|
||||
((!isFinite(cSrc[0]) || !isFinite(cSrc[1])) ? 2 : 0) +
|
||||
((!isFinite(dSrc[0]) || !isFinite(dSrc[1])) ? 1 : 0);
|
||||
if (isNotFinite != 1 && isNotFinite != 2 && isNotFinite != 4 && isNotFinite != 8) {
|
||||
(!isFinite(aSrc[0]) || !isFinite(aSrc[1]) ? 8 : 0) +
|
||||
(!isFinite(bSrc[0]) || !isFinite(bSrc[1]) ? 4 : 0) +
|
||||
(!isFinite(cSrc[0]) || !isFinite(cSrc[1]) ? 2 : 0) +
|
||||
(!isFinite(dSrc[0]) || !isFinite(dSrc[1]) ? 1 : 0);
|
||||
if (
|
||||
isNotFinite != 1 &&
|
||||
isNotFinite != 2 &&
|
||||
isNotFinite != 4 &&
|
||||
isNotFinite != 8
|
||||
) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
@@ -306,10 +375,10 @@ class Triangulation {
|
||||
let dx;
|
||||
if (wrapsX) {
|
||||
const centerSrcEstimX =
|
||||
(modulo(aSrc[0], sourceWorldWidth) +
|
||||
modulo(cSrc[0], sourceWorldWidth)) / 2;
|
||||
dx = centerSrcEstimX -
|
||||
modulo(centerSrc[0], sourceWorldWidth);
|
||||
(modulo(aSrc[0], sourceWorldWidth) +
|
||||
modulo(cSrc[0], sourceWorldWidth)) /
|
||||
2;
|
||||
dx = centerSrcEstimX - modulo(centerSrc[0], sourceWorldWidth);
|
||||
} else {
|
||||
dx = (aSrc[0] + cSrc[0]) / 2 - centerSrc[0];
|
||||
}
|
||||
@@ -326,9 +395,27 @@ class Triangulation {
|
||||
const daSrc = this.transformInv_(da);
|
||||
|
||||
this.addQuad_(
|
||||
a, b, bc, da, aSrc, bSrc, bcSrc, daSrc, maxSubdivision - 1);
|
||||
a,
|
||||
b,
|
||||
bc,
|
||||
da,
|
||||
aSrc,
|
||||
bSrc,
|
||||
bcSrc,
|
||||
daSrc,
|
||||
maxSubdivision - 1
|
||||
);
|
||||
this.addQuad_(
|
||||
da, bc, c, d, daSrc, bcSrc, cSrc, dSrc, maxSubdivision - 1);
|
||||
da,
|
||||
bc,
|
||||
c,
|
||||
d,
|
||||
daSrc,
|
||||
bcSrc,
|
||||
cSrc,
|
||||
dSrc,
|
||||
maxSubdivision - 1
|
||||
);
|
||||
} else {
|
||||
// split vertically (left & right)
|
||||
const ab = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
|
||||
@@ -337,9 +424,27 @@ class Triangulation {
|
||||
const cdSrc = this.transformInv_(cd);
|
||||
|
||||
this.addQuad_(
|
||||
a, ab, cd, d, aSrc, abSrc, cdSrc, dSrc, maxSubdivision - 1);
|
||||
a,
|
||||
ab,
|
||||
cd,
|
||||
d,
|
||||
aSrc,
|
||||
abSrc,
|
||||
cdSrc,
|
||||
dSrc,
|
||||
maxSubdivision - 1
|
||||
);
|
||||
this.addQuad_(
|
||||
ab, b, c, cd, abSrc, bSrc, cSrc, cdSrc, maxSubdivision - 1);
|
||||
ab,
|
||||
b,
|
||||
c,
|
||||
cd,
|
||||
abSrc,
|
||||
bSrc,
|
||||
cSrc,
|
||||
cdSrc,
|
||||
maxSubdivision - 1
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
@@ -381,7 +486,7 @@ class Triangulation {
|
||||
calculateSourceExtent() {
|
||||
const extent = createEmpty();
|
||||
|
||||
this.triangles_.forEach(function(triangle, i, arr) {
|
||||
this.triangles_.forEach(function (triangle, i, arr) {
|
||||
const src = triangle.source;
|
||||
extendCoordinate(extent, src[0]);
|
||||
extendCoordinate(extent, src[1]);
|
||||
|
||||
Reference in New Issue
Block a user