terrain data support loadTileBitmap for custom terrain data (#2543)

Author: deyihu

packages/gl/src/layer/terrain/TerrainLayerRenderer.js

@@ -7,7 +7,7 @@ import skinWgslVert from './wgsl/terrain_skin_vert.wgsl';
 import skinWgslFrag from './wgsl/terrain_skin_frag.wgsl';
 import { getCascadeTileIds, getSkinTileScale, getSkinTileRes, createEmtpyTerrainHeights, EMPTY_TERRAIN_GEO } from './TerrainTileUtil';
 import { createMartiniData } from './util/martini';
-import { isNil, extend, pushIn } from '../util/util';
+import { isNil, extend, pushIn, isFunction } from '../util/util';
 import TerrainPainter from './TerrainPainter';
 import TerrainLitPainter from './TerrainLitPainter';
 import MaskRendererMixin from '../mask/MaskRendererMixin';
@@ -927,35 +927,60 @@ class TerrainLayerRenderer extends MaskRendererMixin(TileLayerRendererable(Layer
             cesiumIonTokenURL: layerOptions.cesiumIonTokenURL,
             error: error,
             colors: layerOptions.colors,
-            tileSize: tileSize ? [tileSize.width, tileSize.height] : [256, 256]
+            tileSize: tileSize ? [tileSize.width, tileSize.height] : [256, 256],
+            command: 'loadTile'
         };
-        this.workerConn.fetchTerrain(terrainUrl, options, (err, resource) => {
-            if (this._parentRequests) {
-                const reqKey = getParentRequestKey(tile.x, tile.y);
-                const childTiles = this._parentRequests[reqKey];
-                if (childTiles && childTiles.size) {
-                    this.tileCache.add(tile.id, { info: tile, image: terrainData });
-                    for (const tile of childTiles) {
-                        this.removeTileLoading(tile);
+
+        const fetchTerrain = () => {
+            this.workerConn.fetchTerrain(terrainUrl, options, (err, resource) => {
+                if (this._parentRequests) {
+                    const reqKey = getParentRequestKey(tile.x, tile.y);
+                    const childTiles = this._parentRequests[reqKey];
+                    if (childTiles && childTiles.size) {
+                        this.tileCache.add(tile.id, { info: tile, image: terrainData });
+                        for (const tile of childTiles) {
+                            this.removeTileLoading(tile);
+                        }
                     }
+                    delete this._parentRequests[reqKey];
                 }
-                delete this._parentRequests[reqKey];
-            }
-            if (err) {
-                if (err.canceled) {
+                if (err) {
+                    fetchError(err);
                     return;
                 }
-                console.warn(err);
-                this.onTileError(terrainData, tile);
+                maptalks.Util.extend(terrainData, resource);
+                terrainExaggeration(terrainData, this.layer.options.exaggeration);
+
+                // this.consumeTile(terrainData, tile);
+                tile.colorsTexture = terrainData.colorsTexture;
+                this.onTileLoad(terrainData, tile);
+            });
+        };
+        const fetchError = (err) => {
+            if (err && err.canceled) {
                 return;
             }
-            maptalks.Util.extend(terrainData, resource);
-            terrainExaggeration(terrainData, this.layer.options.exaggeration);
+            console.warn(err);
+            this.onTileError(terrainData, tile);
+            return;
+        }
+        if (this.loadTileBitmap && isFunction(this.loadTileBitmap)) {
+            this.loadTileBitmap(terrainUrl, tile, (err, bitmap) => {
+                if (err) {
+                    fetchError(err);
+                    return;
+                }
+                if (bitmap && bitmap instanceof ImageBitmap) {
+                    options.tileImage = bitmap;
+                    fetchTerrain();
+                } else {
+                    fetchError(new Error('bitmap is not ImageBitmap'));
+                }
+            }, options);
+        } else {
+            fetchTerrain();
+        }
 
-            // this.consumeTile(terrainData, tile);
-            tile.colorsTexture = terrainData.colorsTexture;
-            this.onTileLoad(terrainData, tile);
-        });
         return terrainData;
     }
 
@@ -1092,6 +1117,18 @@ class TerrainLayerRenderer extends MaskRendererMixin(TileLayerRendererable(Layer
     abortTileLoading(tileImage, tileInfo) {
         const layer = this.layer;
         const maxAvailableZoom = layer.options.maxAvailableZoom && (layer.options.maxAvailableZoom - layer.options.zoomOffset);
+
+        const abortTile = (url, tile) => {
+            if (this.loadTileBitmap && isFunction(this.loadTileBitmap)) {
+                this.loadTileBitmap(url, tile, () => {
+
+                }, {
+                    command: 'abortTile'
+                })
+            } else if (this.workerConn) {
+                this.workerConn.abortTerrain(url);
+            }
+        }
         if (tileInfo) {
             if (maxAvailableZoom && tileInfo.z > maxAvailableZoom) {
                 const { requests, key } = this._getParentTileRequest(tileInfo);
@@ -1100,16 +1137,12 @@ class TerrainLayerRenderer extends MaskRendererMixin(TileLayerRendererable(Layer
                     if (!requests.size) {
                         // 中止 maxAvailableZoom 瓦片的请求
                         delete this._parentRequests[key];
-                        if (this.workerConn) {
-                            this.workerConn.abortTerrain(requests.url);
-                        }
+                        abortTile(requests.url, tileInfo);
                     }
                 }
             } else {
                 if (tileInfo && tileInfo.url) {
-                    if (this.workerConn) {
-                        this.workerConn.abortTerrain(tileInfo.url);
-                    }
+                    abortTile(tileInfo.url, tileInfo);
                 }
             }
         }

packages/gl/src/layer/terrain/TerrainWorkerConnection.js

@@ -17,6 +17,7 @@ export default class TerrainWorkerConnection extends maptalks.worker.Actor {
 
     fetchTerrain(url, options, cb) {
         url = this.checkUrl(url);
+        const tileImage = options.tileImage;
         const data = {
             actorId: this.actorId,
             mapId: this.mapId,
@@ -30,10 +31,15 @@ export default class TerrainWorkerConnection extends maptalks.worker.Actor {
                 cesiumIonTokenURL: options.cesiumIonTokenURL,
                 error: options.error,
                 colors: options.colors,
-                tileSize: options.tileSize
+                tileSize: options.tileSize,
+                tileImage
             }
         };
-        this.send(data, null, (err, data) => {
+        const buffers = [];
+        if (tileImage) {
+            buffers.push(tileImage);
+        }
+        this.send(data, buffers, (err, data) => {
             if (err) {
                 cb(err);
                 return;

packages/gl/src/layer/terrain/worker/index.js

@@ -9,7 +9,7 @@ let workerId;
 let BITMAP_CANVAS = null;
 let BITMAP_CTX = null;
 const TEMP_RGB = [0, 0, 0];
-const DEFAULT_TILESIZE= [256, 256];
+const DEFAULT_TILESIZE = [256, 256];
 
 function checkBitMapCanvas() {
     try {
@@ -449,7 +449,14 @@ function generateMapboxTerrain(buffer) {
 }
 
 function loadTerrain(params, cb) {
-    const { url, origin, type, accessToken, terrainWidth, error } = params;
+    const { url, origin, type, accessToken, terrainWidth, error, tileImage } = params;
+    //custom loadTileImage and return mapbox terrain rgb data
+    if(tileImage&&tileImage.close){
+        const imageData = bitmapToImageData(tileImage);
+        const terrainData = mapboxBitMapToHeights(imageData, terrainWidth);
+        triangulateTerrain(error, terrainData, terrainWidth, tileImage, true, cb);
+        return;
+    }
     const headers = params.headers || requestHeaders[type];
     if (type === 'tianditu') {
         fetchTerrain(url, headers, type, terrainWidth, error, cb);