Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TileLayer tweaks for better user experience #2125

Merged
merged 3 commits into from
Nov 13, 2023
Merged

TileLayer tweaks for better user experience #2125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4d0cbae
TileLayer tweaks for better user experience, fix maptalks/issues#475
fuzhenn Nov 10, 2023
0b19e01
TileLayer tweaks
fuzhenn Nov 13, 2023
c54d808
TileLayer tweaks
fuzhenn Nov 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/layer/tile/TileLayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ const options = {
'tileLimitPerFrame': 0,

'tileStackStartDepth': 7,
'tileStackDepth': 5,
'tileStackDepth': 6,

'awareOfTerrain': true,
'bufferPixel': 0.5,
Expand Down Expand Up @@ -1407,5 +1407,5 @@ function distanceToRect(min, max, xyz) {


function sortingTiles(t0, t1) {
return t0.z - t1.z;
return t1.z - t0.z;
}
55 changes: 38 additions & 17 deletions src/renderer/layer/tilelayer/TileLayerCanvasRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,11 +185,11 @@ class TileLayerCanvasRenderer extends CanvasRenderer {
placeholders = [], placeholderKeys = {};
//visit all the tiles
const tileQueue = {};
const preLoadingCount = this.markTiles(),
loadingLimit = this._getLoadLimit();
const preLoadingCount = this.markTiles();
const loadingLimit = this._getLoadLimit();

const l = tileGrids.length;

const isFirstRender = this._tileZoom === undefined;
// main tile grid is the last one (draws on top)
this._tileZoom = tileGrids[0]['zoom'];

Expand All @@ -207,7 +207,7 @@ class TileLayerCanvasRenderer extends CanvasRenderer {
const gridTiles = tileGrid['tiles'];
const parents = tileGrid['parents'] || EMPTY_ARRAY;
const parentCount = parents.length;
const allTiles = parents.concat(gridTiles);
const allTiles = isFirstRender ? gridTiles : parents.concat(gridTiles);

let placeholder;
if (allTiles.length) {
Expand Down Expand Up @@ -425,20 +425,24 @@ class TileLayerCanvasRenderer extends CanvasRenderer {
}
}

const renderInGL = this.layer.options.renderer === 'gl' && (!this.isGL || this.isGL());

const context = { tiles, parentTiles: this._parentTiles, childTiles: this._childTiles, parentContext };
this.onDrawTileStart(context, parentContext);

if (drawBackground && this.layer.options['opacity'] === 1) {
this.layer._silentConfig = true;
const fadingAnimation = this.layer.options['fadeAnimation'];
this.layer.options['fadeAnimation'] = false;
// _hasOwnSR 时，瓦片之间会有重叠，会产生z-fighting，所以背景瓦片要后绘制
this.drawingChildTiles = true;
this._childTiles.forEach(t => this._drawTile(t.info, t.image, parentContext));
delete this.drawingChildTiles;
this.drawingParentTiles = true;
this._parentTiles.forEach(t => this._drawTile(t.info, t.image, parentContext));
delete this.drawingParentTiles;

if (renderInGL) {
this._drawChildTiles(childTiles, parentContext);
this._drawParentTiles(this._parentTiles, parentContext);
} else {
this._drawParentTiles(this._parentTiles, parentContext);
this._drawChildTiles(childTiles, parentContext);
}

this.layer.options['fadeAnimation'] = fadingAnimation;
this.layer._silentConfig = false;
}
Expand All @@ -454,12 +458,15 @@ class TileLayerCanvasRenderer extends CanvasRenderer {
this.layer._silentConfig = true;
const fadingAnimation = this.layer.options['fadeAnimation'];
this.layer.options['fadeAnimation'] = false;
this.drawingChildTiles = true;
this._childTiles.forEach(t => this._drawTile(t.info, t.image, parentContext));
delete this.drawingChildTiles;
this.drawingParentTiles = true;
this._parentTiles.forEach(t => this._drawTile(t.info, t.image, parentContext));
delete this.drawingParentTiles;

if (renderInGL) {
this._drawChildTiles(childTiles, parentContext);
this._drawParentTiles(this._parentTiles, parentContext);
} else {
this._drawParentTiles(this._parentTiles, parentContext);
this._drawChildTiles(childTiles, parentContext);
}

this.layer.options['fadeAnimation'] = fadingAnimation;
this.layer._silentConfig = false;
}
Expand All @@ -470,6 +477,19 @@ class TileLayerCanvasRenderer extends CanvasRenderer {

}

_drawChildTiles(childTiles, parentContext) {
// _hasOwnSR 时，瓦片之间会有重叠，会产生z-fighting，所以背景瓦片要后绘制
this.drawingChildTiles = true;
childTiles.forEach(t => this._drawTile(t.info, t.image, parentContext));
delete this.drawingChildTiles;
}

_drawParentTiles(parentTiles, parentContext) {
this.drawingParentTiles = true;
this._parentTiles.forEach(t => this._drawTile(t.info, t.image, parentContext));
delete this.drawingParentTiles;
}

onDrawTileStart() { }
onDrawTileEnd() { }

Expand Down Expand Up @@ -1166,6 +1186,7 @@ class TileLayerCanvasRenderer extends CanvasRenderer {
this.clear();
delete this.tileCache;
delete this._tilePlaceHolder;
delete this._tileZoom;
super.onRemove();
}

Expand Down
8 changes: 4 additions & 4 deletions src/renderer/layer/tilelayer/TileLayerGLRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ class TileLayerGLRenderer extends ImageGLRenderable(TileLayerCanvasRenderer) {

needToRedraw() {
const map = this.getMap();
if (this._gl() && !map.getPitch() && map.isZooming() && !map.isMoving() && !map.isRotating()) {
if (this.isGL() && !map.getPitch() && map.isZooming() && !map.isMoving() && !map.isRotating()) {
return true;
}
return super.needToRedraw();
Expand Down Expand Up @@ -81,7 +81,7 @@ class TileLayerGLRenderer extends ImageGLRenderable(TileLayerCanvasRenderer) {
if (tileInfo.cache !== false) {
this._bindGLBuffer(tileImage, w, h);
}
if (!this._gl()) {
if (!this.isGL()) {
// fall back to canvas 2D, which is faster
super.drawTile(tileInfo, tileImage);
return;
Expand Down Expand Up @@ -153,7 +153,7 @@ class TileLayerGLRenderer extends ImageGLRenderable(TileLayerCanvasRenderer) {
}

getCanvasImage() {
if (!this._gl() || !this.canvas2) {
if (!this.isGL() || !this.canvas2) {
return super.getCanvasImage();
}
const img = super.getCanvasImage();
Expand All @@ -165,7 +165,7 @@ class TileLayerGLRenderer extends ImageGLRenderable(TileLayerCanvasRenderer) {

// decide whether the layer is renderer with gl.
// when map is pitching, or fragmentShader is set in options
_gl() {
isGL() {
if (this.canvas.gl && this.canvas.gl.wrap) {
//in GroupGLLayer
return true;
Expand Down