chore: 通过ID 移除图层&fillimage 镜像问题

.changeset/true-lamps-repair.md

@@ -0,0 +1,11 @@
+---
+'@antv/l7-component': patch
+'@antv/l7-layers': patch
+'@antv/l7-source': patch
+'@antv/l7-core': patch
+'@antv/l7-maps': patch
+'@antv/l7-map': patch
+'@antv/l7': patch
+---
+
+相对坐标系支持

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",