【fix】视频地图叠加矢量要素，范围外的进行裁剪避免要素乱飞

AI-GEN: 70% Cursor

Author: luoxiao-supermap

src/mapboxgl/mapping/CoordTransfer.js

@@ -58,15 +58,26 @@ export default class CoordTransfer {
     if (this.rotationMatrix) {
       this.rotationMatrix.delete();
     }
+    if (this.rotationMat3) {
+      this.rotationMat3.delete();
+    }
     if (this.translationMatrix) {
       this.translationMatrix.delete();
     }
     if (this.k) {
       this.k.delete();
     }
     this.rotationMatrix = this.toRotationMatrix(pitch, roll, yaw);
+    this.rotationMat3 = new this.cv.Mat(3, 3, this.cv.CV_64FC1);
+    this.cv.Rodrigues(this.rotationMatrix, this.rotationMat3);
     this.translationMatrix = this.toTranslationMatrix(x, y, z);
     this.k = this.toCameraMatrix(fx, fy, centerX, centerY);
+    this._R = this.rotationMat3.data64F ? Array.from(this.rotationMat3.data64F) : null;
+    this._t = this.translationMatrix.data64F ? Array.from(this.translationMatrix.data64F) : null;
+    this._fx = fx;
+    this._fy = fy;
+    this._cx = centerX;
+    this._cy = centerY;
   }
 
   /**
@@ -170,25 +181,65 @@ export default class CoordTransfer {
   toCameraMatrix(fx, fy, centerX, centerY) {
     return this.cv.matFromArray(3, 3, this.cv.CV_64FC1, [fx, 0, centerX, 0, fy, centerY, 0, 0, 1]);
   }
+  /**
+   * @function CoordTransfer.prototype.toCameraCoordinate
+   * @description 将空间坐标转换到相机坐标系。Z > 0 表示在相机前方。
+   * @param {Array<number>} coord - 空间坐标 [x, y] 或 [x, y, z]（EPSG:3857）。
+   * @returns {Array<number>|null} 相机坐标 [Xc, Yc, Zc]。
+   */
+  toCameraCoordinate(coord) {
+    if (!this._R || this._R.length < 9 || !this._t || this._t.length < 3 || !coord || coord.length < 2) {
+      return null;
+    }
+    const x = coord[0];
+    const y = coord[1];
+    const z = coord.length > 2 ? coord[2] : 0;
+    const R = this._R;
+    const t = this._t;
+    return [
+      R[0] * x + R[1] * y + R[2] * z + t[0],
+      R[3] * x + R[4] * y + R[5] * z + t[1],
+      R[6] * x + R[7] * y + R[8] * z + t[2]
+    ];
+  }
+
+  /**
+   * @function CoordTransfer.prototype.projectCameraToVideo
+   * @description 将相机坐标投影为视频像素坐标。相机后方的点返回 null。
+   * @param {Array<number>} camera - 相机坐标 [Xc, Yc, Zc]。
+   * @param {number} [zNear=0.01] - 近裁剪面，单位与空间坐标一致。
+   * @returns {Array<number>|null} 视频像素坐标 [u, v]。
+   */
+  projectCameraToVideo(camera, zNear = 0.01) {
+    if (!camera || this._fx == null || this._fy == null) {
+      return null;
+    }
+    const depth = camera[2];
+    if (!(depth > zNear)) {
+      return null;
+    }
+    return [
+      this._fx * camera[0] / depth + this._cx,
+      this._fy * camera[1] / depth + this._cy
+    ];
+  }
+
   /**
    * @function CoordTransfer.prototype.toVideoCoordinate
-   * @description  转换视频像素坐标到空间地理坐标。
+   * @description  将空间地理坐标转换为视频像素坐标。相机后方的点 data64F 为空数组。
    * @param {Array} coord - 空间坐标。
-   * @returns {Array} 视频像素坐标。
+   * @returns {{data64F: Array<number>, depth: (number|null)}} 视频像素坐标及相机深度。
    */
   toVideoCoordinate(coord) {
-    if (!this.cv || !this.cv.Mat) {
-      return { data64F: [] };
+    const camera = this.toCameraCoordinate(coord);
+    if (!camera) {
+      return { data64F: [], depth: null };
     }
-    let emptyMat = new this.cv.Mat();
-    let point3 = this.cv.matFromArray(3, 1, this.cv.CV_64FC1, [coord[0], coord[1], 0]);
-    let point2 = new this.cv.Mat(2, 1, this.cv.CV_64FC1);
-    this.cv.projectPoints(point3, this.rotationMatrix, this.translationMatrix, this.k, emptyMat, point2);
-    const data64F = point2.data64F.length ? [point2.data64F[0], point2.data64F[1]] : [];
-    emptyMat.delete();
-    point3.delete();
-    point2.delete();
-    return { data64F };
+    const uv = this.projectCameraToVideo(camera);
+    return {
+      data64F: uv || [],
+      depth: camera[2]
+    };
   }
   /**
    * @function CoordTransfer.prototype.toSpatialCoordinate

src/mapboxgl/mapping/GeojsonSource.js

@@ -1,7 +1,5 @@
-import { featureEach, coordEach } from '@turf/meta';
 import cloneDeep from 'lodash.clonedeep';
-import { transformCoord } from './utils/VideoMapUtil';
-import proj4 from 'proj4';
+import { transformVideoMapGeoJSON } from './utils/clipVideoMapGeometry';
 
 /**
  * @class GeojsonSource
@@ -13,13 +11,7 @@ import proj4 from 'proj4';
 export default class GeojsonSource {
   constructor(videoMap) {
     this.videoMap = videoMap;
-    const { coordTransfer, originCoordsRightBottom, originCoordsLeftTop, videoWidth, videoHeight, map } = videoMap;
-    this.map = map;
-    this.coordTransfer = coordTransfer;
-    this.originCoordsRightBottom = originCoordsRightBottom;
-    this.originCoordsLeftTop = originCoordsLeftTop;
-    this.videoWidth = videoWidth;
-    this.videoHeight = videoHeight;
+    this.map = videoMap.map;
   }
 
   /**
@@ -49,31 +41,13 @@ export default class GeojsonSource {
   }
 
   _transformData(data) {
-    const { coordTransfer, originCoordsRightBottom, originCoordsLeftTop, videoWidth, videoHeight } = this.videoMap;
-    const newData = cloneDeep(data);
-    featureEach(newData, (currentFeature) => {
-      coordEach(currentFeature, (curCoords) => {
-        let transCurCoords = proj4('EPSG:4326', 'EPSG:3857', curCoords);
-        let transCoords = coordTransfer.toVideoCoordinate(transCurCoords);
-        curCoords.length = 0;
-        curCoords.push(
-          ...transformCoord({
-            videoPoint: transCoords.data64F,
-            videoWidth,
-            videoHeight,
-            originCoordsRightBottom,
-            originCoordsLeftTop
-          })
-        );
-      });
-    });
-    return newData;
+    return transformVideoMapGeoJSON(data, this.videoMap);
   }
+
   /**
    * @function GeojsonSource.prototype.remove
    * @description  移除数据源。
    * @param {Object} id - 数据源 id。
-   * @param {Object} source
    */
   remove() {
     if (this.id && this.map.getSource(this.id)) {

src/mapboxgl/mapping/layers/GeojsonLayer.js

@@ -1,7 +1,5 @@
-import { featureEach, coordEach } from '@turf/meta';
-import cloneDeep from 'lodash.clonedeep';
-import { transformCoord } from '../utils/VideoMapUtil';
-import proj4 from 'proj4';
+import { transformVideoMapGeoJSON } from '../utils/clipVideoMapGeometry';
+
 /**
  * @class GeojsonLayer
  * @version 11.2.0
@@ -11,14 +9,9 @@ import proj4 from 'proj4';
  */
 export default class GeojsonLayer {
   constructor(videoMap) {
-    const { coordTransfer, originCoordsRightBottom, originCoordsLeftTop, videoWidth, videoHeight, map } = videoMap;
-    this.map = map;
-    this.coordTransfer = coordTransfer;
+    this.videoMap = videoMap;
+    this.map = videoMap.map;
     this.layerId = null;
-    this.originCoordsRightBottom = originCoordsRightBottom;
-    this.originCoordsLeftTop = originCoordsLeftTop;
-    this.videoWidth = videoWidth;
-    this.videoHeight = videoHeight;
   }
 
   /**
@@ -33,8 +26,7 @@ export default class GeojsonLayer {
       return;
     }
     if (typeof source === 'object') {
-      const newData = this.eachData(cloneDeep(source.data));
-      layer.source.data = newData;
+      layer.source.data = this.eachData(source.data);
     }
 
     this.map.addLayer(layer, beforeId);
@@ -52,31 +44,13 @@ export default class GeojsonLayer {
   }
 
   /**
-   * @function GeojsonLayer.prototype.add
-   * @param {Array} features - Mapbox layer 地图对象。
+   * @function GeojsonLayer.prototype.eachData
+   * @param {Object} features - GeoJSON 数据。
    */
   eachData(features) {
-    if (!this.coordTransfer) {
-      return [];
+    if (!this.videoMap || !this.videoMap.coordTransfer) {
+      return features;
     }
-    featureEach(features, (currentFeature) => {
-      coordEach(currentFeature, (curCoords) => {
-        let transCurCoords = proj4('EPSG:4326', 'EPSG:3857', curCoords);
-        let transCoords = this.coordTransfer.toVideoCoordinate(transCurCoords);
-        curCoords.length = 0;
-        if (transCoords.data64F.length) {
-          curCoords.push(
-            ...transformCoord({
-              videoPoint: transCoords.data64F,
-              videoWidth: this.videoWidth,
-              videoHeight: this.videoHeight,
-              originCoordsRightBottom: this.originCoordsRightBottom,
-              originCoordsLeftTop: this.originCoordsLeftTop
-            })
-          );
-        }
-      });
-    });
-    return features;
+    return transformVideoMapGeoJSON(features, this.videoMap);
   }
 }