Shihui (#980)

* feat: 增加 bloomPass1.0、修改渲染流程，让 multiPass 有正确的渲染顺序

* style: lint style

* feat: 取消 bloom 在 postprocessor 中的多次渲染（没有明显优化）

* feat: polygon extrude 模式支持配置固定高度

* style: lint style

* feat: 优化后处理 bloom 的效果

* feat: 修改交替绘制 bloom 的写法

* style: lint style

* feat: 完善 iconService 加载渲染和销毁

* style: lint style

* feat: 补全 mapbox 模式下等面积点

* style: lint style

* fix: 修复 pointLayer animate 模式 opacity 失效

* style: lint style

* feat: 拆分 pointLayer 的 shader

* style: lint sytle

* feat: 拆分 lineLayer 的 linear 模式

* style: lint style

* feat: 优化点击的拾取判断

* style: lint style

* feat: 取消圆柱 shader 中的三元表达式、增强健壮性

* feat: 点图层圆柱体支持固定高度配置 heightfixed

* feat: 点图层圆柱体支持拾取高亮颜色的光照计算

* style: lint style

* style: lint style

* feat: 拆分 lintLayer line 模式下的 dash line

* style: lint style

* feat: lineLayer simpleline 的 linear shader 代码拆分

* style: lint style

* feat: 拆分 lineLayer arcLine linear shader  代码

* style: line style

* feat: lineLayer arc line 在 shader 中移除 linear 部分计算

* feat: 拆分 lineLayer arc dash 虚线的 shader 代码

* style: lint style

* feat: 拆分 lineLayer arc3d linear 部分的 shader 代码

* style: lint style

* style: lint style

* feat: 完善 isMiniAli 的判断，兼容 smallfish H5+ 的模式

* style: lint style

* style: adjust mulpass demo

* feat: 提供 getScale 方法

* style: lint style

* feat:     修复支付宝小程序h5+开发模式下引入l7样式失效问题

* feat: 修改 l7hammerjs 的导入

* fix: 恢复原有的 picking shader 代码，解决移动端高亮存在冲突破面的情况

* feat: 重新设置 l7hammerjs 的导入方式

* fix: 修复 createTexture 的数据类型在 支付宝 环境中使用 Uint8ClampedArray 存在数据类型不兼容的现象

* style: lint style

* feat: 兼容高德地图 2.x 在部分安卓手机上点击拾取失效的情况

* style: lint style

packages/core/src/services/interaction/IInteractionService.ts

@@ -16,6 +16,7 @@ export interface IInteractionTarget {
 }
 
 export interface IInteractionService {
+  indragging: boolean;
   init(): void;
   destroy(): void;
   on(

packages/core/src/services/interaction/InteractionService.ts

@@ -20,6 +20,7 @@ const DragEventMap: { [key: string]: string } = {
 @injectable()
 export default class InteractionService extends EventEmitter
   implements IInteractionService {
+  public indragging: boolean = false;
   @inject(TYPES.IMapService)
   private readonly mapService: IMapService;
   // @ts-ignore
@@ -134,6 +135,9 @@ export default class InteractionService extends EventEmitter
   private onDrag = (target: any) => {
     const interactionTarget = this.interactionEvent(target);
     interactionTarget.type = DragEventMap[interactionTarget.type];
+    interactionTarget.type === 'dragging'
+      ? (this.indragging = true)
+      : (this.indragging = false);
     this.emit(InteractionEvent.Drag, interactionTarget);
   };
 

packages/core/src/services/interaction/PickingService.ts

@@ -166,8 +166,8 @@ export default class PickingService implements IPickingService {
       this.alreadyInPicking ||
       // TODO: this.layerService.alreadyInRendering 一个渲染序列中只进行一次拾取操作
       this.layerService.alreadyInRendering ||
-      // TODO: this.layerService.isMapDragging() 如果地图正在拖拽 则不进行拾取操作
+      // Tip: this.interactionService.dragging amap2 在点击操作的时候同时会触发 dragging 的情况（避免舍去）
-      this.layerService.isMapDragging() ||
+      this.interactionService.indragging ||
       // TODO: 判断当前 是都进行 shader pick 拾取判断
       !this.layerService.getShaderPickStat()
     ) {

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

@@ -419,7 +419,6 @@ export interface ILayerService {
   renderLayers(type?: string): void;
   setEnableRender(flag: boolean): void;
   getOESTextureFloat(): boolean;
-  isMapDragging(): boolean;
 
   destroy(): void;
 }

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

@@ -200,11 +200,6 @@ export default class LayerService implements ILayerService {
     return this.renderService.extensionObject.OES_texture_float;
   }
 
-  // TODO: 判断地图是否正在被拖动
-  public isMapDragging() {
-    return this.mapService.dragging;
-  }
-
   // 控制着色器颜色拾取计算
   public enableShaderPick() {
     this.shaderPicking = true;

packages/core/src/services/map/IMapService.ts

@@ -37,7 +37,6 @@ export interface IMapWrapper {
 export interface IMapService<RawMap = {}> {
   version?: string;
   map: RawMap;
-  dragging: boolean;
   bgColor: string;
   setBgColor(color: string): void;
   init(): void;

packages/maps/src/amap/map.ts

@@ -61,9 +61,6 @@ export default class AMapService
    */
   public map: AMap.Map & IAMapInstance;
 
-  // TODO: 判断地图是否正在拖拽
-  public dragging: boolean = false;
-
   // 背景色
   public bgColor: string = 'rgba(0, 0, 0, 0)';
 
@@ -412,16 +409,6 @@ export default class AMapService
       }
     });
 
-    // TODO: 判断地图是否正在被拖拽
-    this.map.on('dragstart', () => {
-      this.dragging = true;
-      return '';
-    });
-    this.map.on('dragend', () => {
-      this.dragging = false;
-      return '';
-    });
-
     this.viewport = new Viewport();
   }
 

packages/maps/src/amap2/map.ts

@@ -64,9 +64,6 @@ export default class AMapService
    */
   public map: AMap.Map & IAMapInstance;
 
-  // TODO: 判断地图是否正在拖拽
-  public dragging: boolean = false;
-
   /**
    * 用于 customCooords 数据的计算
    */
@@ -505,16 +502,6 @@ export default class AMapService
         }
       }
     });
-
-    // TODO: 判断地图是否正在被拖拽
-    this.map.on('dragstart', () => {
-      this.dragging = true;
-      return '';
-    });
-    this.map.on('dragend', () => {
-      this.dragging = false;
-      return '';
-    });
   }
 
   public meterToCoord(center: [number, number], outer: [number, number]) {

packages/maps/src/map/map.ts

@@ -42,9 +42,6 @@ export default class L7MapService implements IMapService<Map> {
   public version: string = Version.L7MAP;
   public map: Map;
 
-  // TODO: 判断地图是否正在拖拽
-  public dragging: boolean = false;
-
   // 背景色
   public bgColor: string = 'rgba(0.0, 0.0, 0.0, 0.0)';
 
@@ -282,16 +279,6 @@ export default class L7MapService implements IMapService<Map> {
     this.map.on('load', this.handleCameraChanged);
     this.map.on('move', this.handleCameraChanged);
 
-    // TODO: 判断地图是否正在被拖拽
-    this.map.on('dragstart', () => {
-      this.dragging = true;
-      return '';
-    });
-    this.map.on('dragend', () => {
-      this.dragging = false;
-      return '';
-    });
-
     // 不同于高德地图，需要手动触发首次渲染
     this.handleCameraChanged();
   }

packages/maps/src/mapbox/map.ts

@@ -50,9 +50,6 @@ export default class MapboxService
   public version: string = Version.MAPBOX;
   public map: Map & IMapboxInstance;
 
-  // TODO: 判断地图是否正在拖拽
-  public dragging: boolean = false;
-
   // 背景色
   public bgColor: string = 'rgba(0.0, 0.0, 0.0, 0.0)';
 
@@ -366,16 +363,6 @@ export default class MapboxService
     this.map.on('load', this.handleCameraChanged);
     this.map.on('move', this.handleCameraChanged);
 
-    // TODO: 判断地图是否正在被拖拽
-    this.map.on('dragstart', () => {
-      this.dragging = true;
-      return '';
-    });
-    this.map.on('dragend', () => {
-      this.dragging = false;
-      return '';
-    });
-
     // 不同于高德地图，需要手动触发首次渲染
     this.handleCameraChanged();
   }

stories/Map/components/amap2demo_text.tsx

@@ -22,16 +22,16 @@ export default class Amap2demo_text extends React.Component {
     //         src: url('${fontpath}') format('woff2')
     //     }`
     // document.getElementsByTagName('head')[0].appendChild(style)
-    var mask = [
+    // var mask = [
-      [
+    //   [
-        [
+    //     [
-          [110, 40],
+    //       [110, 40],
-          [130, 40],
+    //       [130, 40],
-          [130, 20],
+    //       [130, 20],
-          [110, 20],
+    //       [110, 20],
-        ],
+    //     ],
-      ],
+    //   ],
-    ];
+    // ];
 
     const scene = new Scene({
       id: 'map',
@@ -45,7 +45,7 @@ export default class Amap2demo_text extends React.Component {
       }),
     });
     this.scene = scene;
-    scene.addIconFont('icon1', '');
+    // scene.addIconFont('icon1', '');
     // scene.addIconFont("icon2", "")
 
     // scene.addIconFonts([
@@ -55,37 +55,37 @@ export default class Amap2demo_text extends React.Component {
 
     scene.addFontFace(fontFamily, fontPath);
     scene.on('loaded', () => {
-      fetch(
+      // fetch(
-        'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json',
+      //   'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json',
-      )
+      // )
-        .then((res) => res.json())
+      //   .then((res) => res.json())
-        .then((data) => {
+      //   .then((data) => {
-          const pointLayer = new PointLayer({})
+      //     const pointLayer = new PointLayer({})
-            .source(data.list, {
+      //       .source(data.list, {
-              parser: {
+      //         parser: {
-                type: 'json',
+      //           type: 'json',
-                x: 'j',
+      //           x: 'j',
-                y: 'w',
+      //           y: 'w',
-              },
+      //         },
-            })
+      //       })
-            .shape('icon', 'text')
+      //       .shape('icon', 'text')
-            .size(12)
+      //       .size(12)
-            .color('w', ['#f00', '#f00', '#0f0'])
+      //       .color('w', ['#f00', '#f00', '#0f0'])
-            .style({
+      //       .style({
-              textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+      //         textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-              textOffset: [-10, 0], // 文本相对锚点的偏移量 [水平, 垂直]
+      //         textOffset: [-10, 0], // 文本相对锚点的偏移量 [水平, 垂直]
-              spacing: 2, // 字符间距
+      //         spacing: 2, // 字符间距
-              padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+      //         padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-              stroke: '#ffffff', // 描边颜色
+      //         stroke: '#ffffff', // 描边颜色
-              strokeWidth: 0.3, // 描边宽度
+      //         strokeWidth: 0.3, // 描边宽度
-              strokeOpacity: 1.0,
+      //         strokeOpacity: 1.0,
-              fontFamily,
+      //         fontFamily,
-              // fontFamily: "Times New Roman",
+      //         // fontFamily: "Times New Roman",
-              iconfont: true,
+      //         iconfont: true,
-              // textAllowOverlap: true,
+      //         // textAllowOverlap: true,
-            });
+      //       });
-          scene.addLayer(pointLayer);
+      //     // scene.addLayer(pointLayer);
-        });
+      //   });
 
       fetch(
         'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json',

stories/Map/components/bugfix.tsx

@@ -0,0 +1,152 @@
+// @ts-nocheck
+import React from 'react';
+import { Scene, GaodeMap, GaodeMapV2, PointLayer } from '@antv/l7';
+
+const data = {
+  type: 'FeatureCollection',
+  features: [
+    {
+      type: 'Feature',
+      properties: {
+        s: '海南',
+        m: '东方',
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: [120.218258, 30.298216],
+      },
+    },
+    {
+      type: 'Feature',
+      properties: {
+        s: '海南',
+        m: '海口',
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: [120.137195, 30.304203],
+      },
+    },
+    {
+      type: 'Feature',
+      properties: {
+        s: '广东',
+        m: '珠海',
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: [120.052108, 30.296719],
+      },
+    },
+    {
+      type: 'Feature',
+      properties: {
+        s: '广东',
+        m: '徐闻',
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: [120.20906, 30.201379],
+      },
+    },
+    {
+      type: 'Feature',
+      properties: {
+        s: '海南',
+        m: '琼海',
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: [120.119373, 30.1824],
+      },
+    },
+  ],
+};
+
+const img = {
+  海南:
+    'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
+  广东:
+    'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
+};
+
+export default class Amap2demo extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMapV2({
+        center: [120.2, 30.2],
+        zoom: 9,
+      }),
+    });
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+      Object.keys(img).forEach((key) => {
+        scene.addImage(key, img[key]);
+      });
+      const imageLayer = new PointLayer({
+        name: 'image',
+      });
+
+      imageLayer
+        .source(data)
+        // @ts-ignore
+        .size(20)
+        // @ts-ignore
+        .shape('s', (s) => s)
+        .fitBounds();
+
+      const textLayer = new PointLayer({
+        name: 'image',
+      });
+
+      textLayer
+        .source(data)
+        // @ts-ignore
+        .size(20)
+        .color('#000000')
+        // @ts-ignore
+        .shape('m', 'text')
+        .style({
+          stroke: '#ffffff',
+          strokeWidth: 2,
+          textOffset: [0, -40],
+        });
+
+      scene.addLayer(textLayer);
+
+      scene.addLayer(imageLayer);
+
+      [textLayer, imageLayer].forEach((layer) => {
+        layer.on('click', () => {
+          alert();
+        });
+      });
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        ></div>
+      </>
+    );
+  }
+}

stories/Map/components/mapCenter.tsx

@@ -170,6 +170,11 @@ export default class GaodeMapComponent extends React.Component {
     //   opacity: 0.5
     // })
 
+    scene.addImage(
+      '00',
+      'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
+    );
+
     scene.on('loaded', () => {
       // scene.addLayer(layer);
 
@@ -205,6 +210,7 @@ export default class GaodeMapComponent extends React.Component {
             {
               lng: aspaceLnglat[0] + 0.0002,
               lat: aspaceLnglat[1],
+              name: '00',
             },
           ],
           {
@@ -216,13 +222,19 @@ export default class GaodeMapComponent extends React.Component {
           },
         )
         // .shape('100m', 'text')
-        .shape('circle')
+        // .shape('circle')
+        .shape('name', ['00'])
         .size(25)
-        .color('#0f0')
+        // .color('#0f0')
+        // .select(true)
         .style({
-          textOffset: [50, 20],
+          // textOffset: [50, 20],
         });
 
+      text.on('click', () => {
+        alert('***');
+      });
+
       scene.addLayer(text);
       // scene.addLayer(line);
 

stories/Map/map.stories.tsx

@@ -78,6 +78,7 @@ import Cluster from './components/cluster'
 import Hot from './components/hot'
 import Hot2 from './components/hot2'
 import Mask from './components/mask'
+import BugFix from './components/bugfix'
 
 // @ts-ignore
 storiesOf('地图方法', module)
@@ -160,3 +161,5 @@ storiesOf('地图方法', module)
         .add('Hot1', () => <Hot/>)
         .add('Hot2', () => <Hot2/>)
         .add('Mask', () => <Mask/>)
+
+        .add('BugFix', () => <BugFix/>)