chore: 通过ID 移除图层&fillimage 镜像问题 (#2736)

* feat: 相对坐标模式

* feat: 支持相对坐标系

* chore: ci node 版本20

* fix: code formatting issues for CI

* fix: resolve GL native bindings and Jest memory issues

- Rebuild gl package native bindings to fix webgl.node missing error
- Configure Jest to run tests serially (maxWorkers: 1) to avoid GL context conflicts
- Add memory limits and Node.js heap size increase to prevent SIGABRT crashes
- Add missing @eslint/js dependency for ESLint configuration
- All 87 test suites now pass including citybuliding layer tests

Fixes GL context creation issues in Jest environment that were causing
worker processes to crash with SIGABRT errors due to memory limitations
and concurrent GL context creation.

* chore: 更新单测配置

* fix: prettier error

* chore: lint error

* chore: lint error

* test: update integration test snapshots

- Remove -actual suffix from snapshot files
- Update existing snapshot files to match current rendering output
- Clean up unused snapshot files

* chore: 添加变更集

* feat: add changeset for relative coordinate system support

- Add changeset for layer relative coordinate system feature
- Mark all L7 packages as minor version bump
- Update changeset description

* chore: 更新变更集

* chore: 更新变更集

* chore: 设置私有

* chore: 设置为私有

* chore: 优化layer 移除方法

* fix: 修复 fillImage 点图层图片镜像翻转问题

- 在着色器中对UV坐标进行X和Y轴翻转
- 解决图片绘制时的镜像翻转问题

Author: lzxue

examples/demos/point/fill-image.ts

@@ -12,6 +12,10 @@ export const fillImage: TestCase = async (options) => {
     },
   });
 
+  await scene.addImage(
+    'car',
+    'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*AtZnTYIlkbwAAAAAQGAAAAgAemJ7AQ/original',
+  );
   await scene.addImage(
     'marker',
     'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ',
@@ -23,7 +27,7 @@ export const fillImage: TestCase = async (options) => {
         {
           lng: 120,
           lat: 30,
-          name: 'marker',
+          name: 'car',
         },
       ],
       {
@@ -35,9 +39,9 @@ export const fillImage: TestCase = async (options) => {
       },
     )
     .style({
-      unit: 'meter',
+      rotation: 0,
     })
-    .shape('marker')
+    .shape('car')
     .size(36);
 
   const pointLayer2 = new PointLayer({ layerType: 'fillImage' })
@@ -58,10 +62,10 @@ export const fillImage: TestCase = async (options) => {
       },
     )
     .shape('marker')
-    .size(36)
+    .size(20)
     .active(true)
     .style({
-      rotation: 90,
+      rotation: 0,
     });
 
   scene.addLayer(pointLayer);

examples/index.html

@@ -29,11 +29,12 @@
     }
   </style>
   <script>
+    window.forceWebGL = true
     window._AMapSecurityConfig = {
       securityJsCode: '290ddc4b0d33be7bc9b354bc6a4ca614',
     };
   </script>
-  <script src="https://webapi.amap.com/maps?v=2.0&key=6f025e700cbacbb0bb866712d20bb35c"></script>
+  <script src="https://webapi.amap.com/maps?v=2.0.5&key=6f025e700cbacbb0bb866712d20bb35c"></script>
   <script type="module" src="./index.tsx"></script>
   <div id="root"></div>
 </html>

packages/core/src/services/layer/LayerService.ts

@@ -104,11 +104,19 @@ export default class LayerService extends EventEmitter<LayerServiceEvent> implem
   }
 
   public async remove(layer: ILayer, parentLayer?: ILayer): Promise<void> {
-    // Tip: layer.layerChildren 当 layer 存在子图层的情况
     if (parentLayer) {
-      parentLayer.layerChildren = parentLayer.layerChildren.filter((item) => item !== layer);
+      if (!parentLayer.layerChildren) {
+        parentLayer.layerChildren = [];
+      }
+      const index = parentLayer.layerChildren.findIndex((item) => item.id === layer.id);
+      if (index > -1) {
+        parentLayer.layerChildren.splice(index, 1);
+      }
     } else {
-      this.layers = this.layers.filter((item) => item !== layer);
+      const index = this.layers.findIndex((item) => item.id === layer.id);
+      if (index > -1) {
+        this.layers.splice(index, 1);
+      }
     }
     layer.destroy();
     this.reRender();

packages/layers/src/point/shaders/fillImage/fillImage_vert.glsl

@@ -23,6 +23,7 @@ out float v_opacity;
 void main() {
   vec3 extrude = a_Extrude;
   v_uv = (a_Extrude.xy + 1.0) / 2.0;
+  v_uv.x = 1.0 - v_uv.x;
   v_uv.y = 1.0 - v_uv.y;
   v_Iconuv = a_Uv;
   v_opacity = opacity;

packages/maps/src/amap-next/map.ts

@@ -22,6 +22,8 @@ import { MapTheme } from './theme';
 const AMAP_VERSION = '2.0';
 const AMAP_API_KEY = 'f59bcf249433f8b05caaee19f349b3d7';
 const ZOOM_OFFSET = 1;
+// @ts-ignore 高德地图强制使用 WebGL,否则支付宝端内无法使用
+window.forceWebGL = true;
 
 const AMapEventMapV2: Record<string, string> = {
   contextmenu: 'rightclick',

packages/test-utils/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@antv/l7-test-utils",
   "version": "2.22.6",
-  "private": false,
+  "private": true,
   "description": "Test utils for L7",
   "keywords": [],
   "homepage": "https://github.com/antvis/L7#readme",