feat:Optimize worker data transmission for VT feature geometry

packages/vt/src/common/Util.js

@@ -201,3 +201,66 @@ export function wrap(n, min, max) {
     const w = ((n - min) % d + d) % d + min;
     return w;
 }
+
+
+const encoder = new TextEncoder();
+const decoder = new TextDecoder();
+export function encodeJSON(json) {
+    try {
+        const str = JSON.stringify(json);
+        return encoder.encode(str);
+    } catch (error) {
+        console.error('encode JSON to Uint8Array error:', error);
+    }
+}
+
+export function decodeJSON(uint8Array) {
+    try {
+        const str = decoder.decode(uint8Array);
+        return JSON.parse(str);
+    } catch (error) {
+        console.error('decode Uint8Array to JSON error:', error);
+    }
+}
+
+export function wrapVTFeatureGeometryInfo(layerOptionsFeatures, tileCacheImage, dataList) {
+    // layer features is 0 or false
+    if (!layerOptionsFeatures) {
+        return;
+    }
+    if (!tileCacheImage || !dataList || !Array.isArray(dataList)) {
+        return;
+    }
+    const image = tileCacheImage;
+    const featuresTypeArray = image.featuresTypeArray;
+    //解码features的 typearray
+    if (featuresTypeArray && featuresTypeArray instanceof Uint8Array) {
+        image.featuresFullJSON = decodeJSON(featuresTypeArray);
+        delete image.featuresTypeArray;
+    }
+    const featuresFullJSON = image.featuresFullJSON;
+    if (featuresFullJSON) {
+        dataList = dataList || [];
+        for (let i = 0, len = dataList.length; i < len; i++) {
+            const feature = dataList[i].feature;
+            let featureId = feature;
+            const isObj = isObject(featureId);
+            if (isObj) {
+                featureId = featureId.id;
+            }
+            const featureJSON = featuresFullJSON[featureId];
+            if (featureJSON && isObj) {
+                // feature.properties = featureJSON.properties;
+                //把geometry信息补起来
+                if (!feature.geometry || !feature.geometry.coordinates) {
+                    feature.geometry = featureJSON.geometry;
+                    feature.geometry.isMVTCoordinates = true;
+                    if (!feature.geometry.type) {
+                        feature.geometry.type = featureJSON.type;
+                    }
+                }
+            }
+        }
+    }
+
+}

packages/vt/src/layer/layer/VectorTileLayer.ts

@@ -13,7 +13,7 @@ import type {
 import Color from 'color';
 import { getVectorPacker } from "../../packer/inject";
 import { compress, uncompress } from "./Compress";
-import { extend, hasOwn, isNil, isObject, isString, pushIn } from "../../common/Util";
+import { extend, hasOwn, isNil, isNumber, isObject, isString, pushIn } from "../../common/Util";
 
 import Ajax from "../../worker/util/Ajax";
 import VectorTileLayerRenderer from "../renderer/VectorTileLayerRenderer";
@@ -670,9 +670,6 @@ class VectorTileLayer extends maptalks.TileLayer {
             if (!feature || !tile || !geometry) {
                 continue;
             }
-            if (geometry.type) {
-                continue;
-            }
             const { x, y, res, extent } = tile;
             if (x !== tempX || y !== tempY || res !== tempRes) {
                 tempNW = tileConfig.getTilePointNW(x, y, res);
@@ -1642,13 +1639,15 @@ class VectorTileLayer extends maptalks.TileLayer {
             point.y * dpr,
             options
         );
-        if (
-            (this.options as any)["features"] &&
-            (this.options as any)["features"] !== "id"
-        ) {
-            // 将瓦片坐标转成经纬度坐标
-            results = this._convertPickedFeature(results);
-        }
+        // if (
+        //     (this.options as any)["features"] &&
+        //     (this.options as any)["features"] !== "id"
+        // ) {
+        //     // 将瓦片坐标转成经纬度坐标
+        //     results = this._convertPickedFeature(results);
+        // }
+        //always _convertPickedFeature
+        results = this._convertPickedFeature(results);
         if (options && options.filter) {
             return results.filter(g => options.filter(g));
         } else {
@@ -1687,6 +1686,7 @@ class VectorTileLayer extends maptalks.TileLayer {
                     extent,
                     res
                 );
+
                 // pick.data.feature.geometry = this._convertGeometryCoords(geometry, nw, extent, res);
             }
         }
@@ -1701,10 +1701,17 @@ class VectorTileLayer extends maptalks.TileLayer {
         extent: number,
         res: number
     ) {
+        //not mvt coordinates
+        if (!geometry.isMVTCoordinates) {
+            return geometry;
+        }
         //the geometry has convert
         if (geometry.type && geometry.coordinates) {
             return geometry;
         }
+        if (!isNumber(type)) {
+            type = geometry.type;
+        }
         let geoType: string, coordinates: any;
         if (type === 1) {
             if (geometry.length <= 1) {

packages/vt/src/layer/renderer/VectorTileLayerRenderer.js

@@ -4,7 +4,7 @@ import WorkerConnection from './worker/WorkerConnection';
 import { EMPTY_VECTOR_TILE } from '../core/Constant';
 import DebugPainter from './utils/DebugPainter';
 import TileStencilRenderer from './stencil/TileStencilRenderer';
-import { extend, pushIn, getCentiMeterScale, isNil, isFunction } from '../../common/Util';
+import { extend, pushIn, getCentiMeterScale, isNil, isFunction, wrapVTFeatureGeometryInfo } from '../../common/Util';
 import { default as convertToPainterFeatures, oldPropsKey } from './utils/convert_to_painter_features';
 import { isFunctionDefinition } from '@maptalks/function-type';
 import { meterToPoint } from '../plugins/Util';
@@ -649,7 +649,7 @@ class VectorTileLayerRenderer extends CanvasCompatible(TileLayerRendererable(Lay
                 continue;
             }
             const { info, image } = cache;
-            const features = findFeatures(image);
+            const features = findFeatures(this.layer, image);
             renderedFeatures.push({
                 tile: { id: info.id, x: info.x, y: info.y, z: info.z, url: info.url },
                 current: !!this.tilesInView[info.id],
@@ -1689,6 +1689,14 @@ class VectorTileLayerRenderer extends CanvasCompatible(TileLayerRendererable(Lay
                 hits.push(picked);
             }
         });
+        hits.forEach(item => {
+            const data = item.data || {};
+            const tile = data.tile;
+            if (tile) {
+                const tileCacheItem = this.tileCache.get(tile.id) || {};
+                wrapVTFeatureGeometryInfo(this.layer.options.features, tileCacheItem.image, [data])
+            }
+        });
         return hits;
     }
 
@@ -1697,6 +1705,8 @@ class VectorTileLayerRenderer extends CanvasCompatible(TileLayerRendererable(Lay
             return;
         }
         if (tile.image && !tile.image._empty) {
+            delete tile.image.featuresTypeArray;
+            delete tile.image.featuresFullJSON;
             const styleCounter = tile.image && tile.image.style;
             const plugins = this._getStylePlugins(styleCounter);
             if (plugins) {
@@ -2404,10 +2414,11 @@ function getTileViewport(tileSize) {
     };
 }
 
-function findFeatures(image) {
+function findFeatures(layer, image) {
     if (!image.cache) {
         return [];
     }
+
     for (const p in image.cache) {
         const data = image.cache[p];
         if (!data.geometry) {
@@ -2422,6 +2433,7 @@ function findFeatures(image) {
                 if (empty !== undefined) {
                     geometry.properties.features.empty = empty;
                 }
+                wrapVTFeatureGeometryInfo(layer.options.features, image, features);
                 return features;
             }
         }

packages/vt/src/layer/renderer/utils/convert_to_painter_features.js

@@ -1,6 +1,6 @@
 import * as maptalks from 'maptalks';
 import { KEY_IDX } from '../../../common/Constant';
-import { extend } from '../../../common/Util';
+import { extend, isObject } from '../../../common/Util';
 
 const KEY_IDX_NAME = (KEY_IDX + '').trim();
 
@@ -13,7 +13,8 @@ export default function convertToPainterFeatures(features, feaIndexes, layerId,
         for (let ii = 0, ll = data.length; ii < ll; ii++) {
             let feature = feaIndexes ? features[feaIndexes[ii]] : features[ii];
             if (layer.options['features'] === 'id' && layer.getFeature) {
-                feature = layer.getFeature(feature);
+                const featureId = isObject(feature) ? feature.id : feature;
+                feature = layer.getFeature(featureId);
                 feature.layer = layerId;
             }
             if (layer instanceof maptalks.TileLayer) {
@@ -46,11 +47,11 @@ export const oldPropsKey = '__original_properties';
 export const externalPropsKey = '__external_properties';
 
 const proxyGetter = {
-    get: function(obj, prop) {
+    get: function (obj, prop) {
         return prop in obj ? obj[prop] : (obj[oldPropsKey][prop] || obj[externalPropsKey] && obj[externalPropsKey][prop]);
     },
-    has: function(obj, prop) {
-        return (prop in obj) || (prop in obj[oldPropsKey])  || obj[externalPropsKey] && (prop in obj[externalPropsKey]);
+    has: function (obj, prop) {
+        return (prop in obj) || (prop in obj[oldPropsKey]) || obj[externalPropsKey] && (prop in obj[externalPropsKey]);
     }
 };