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/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',