Shihui (#982)

* 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

* feat: 优化经典热力图显示效果

* style: lint style

* feat: 修改 setBlend 方法、返回当前的 layer 对象

* feat: 完善在点图层未传入数据的情况下判断 shape 类型

* style: lint style

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

@@ -209,7 +209,7 @@ export interface ILayer {
   getMinZoom(): number;
   getMaxZoom(): number;
   get(name: string): number;
-  setBlend(type: keyof typeof BlendType): void;
+  setBlend(type: keyof typeof BlendType): ILayer;
   // animate(field: string, option: any): ILayer;
   renderLayers(): void;
   render(): ILayer;

packages/layers/src/core/BaseLayer.ts

@@ -117,6 +117,11 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
 
   public layerModel: ILayerModel;
 
+  public shapeOption: {
+    field: any;
+    values: any;
+  };
+
   // TODO: 记录 sceneContainer 供创建子图层的时候使用 如 imageTileLayer
   public sceneContainer: Container | undefined;
   // TODO: 用于保存子图层对象
@@ -449,6 +454,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
       'shape',
     )?.scale?.field;
     const currentShape = field;
+    this.shapeOption = {
+      field,
+      values,
+    };
     this.updateStyleAttribute('shape', field, values, updateOptions);
     // TODO: 根据 shape 判断是否需要更新 model
     updateShape(this, lastShape, currentShape);
@@ -692,12 +701,13 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
         });
     }
   }
-  public setBlend(type: keyof typeof BlendType): void {
+  public setBlend(type: keyof typeof BlendType): ILayer {
     this.updateLayerConfig({
       blend: type,
     });
     this.layerModelNeedUpdate = true;
     this.reRender();
+    return this;
   }
   public show(): ILayer {
     this.updateLayerConfig({

packages/layers/src/point/index.ts

@@ -13,6 +13,32 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
   public rebuildModels() {
     this.models = this.layerModel.buildModels();
   }
+
+  /**
+   * 在未传入数据的时候判断点图层的 shape 类型
+   * @returns
+   */
+  public getModelTypeWillEmptyData(): PointType {
+    if (this.shapeOption) {
+      const { field, values } = this.shapeOption;
+      const { shape2d, shape3d } = this.getLayerConfig();
+
+      const iconMap = this.iconService.getIconMap();
+
+      if (field && shape2d?.indexOf(field as string) !== -1) {
+        return 'fill';
+      }
+
+      if (values) {
+        for (const v of values) {
+          if (iconMap.hasOwnProperty(values as string)) {
+            return 'image';
+          }
+        }
+      }
+    }
+    return 'normal';
+  }
   protected getConfigSchema() {
     return {
       properties: {
@@ -52,7 +78,8 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
       return fe.hasOwnProperty('shape');
     });
     if (!item) {
-      return 'normal';
+      // return 'normal';
+      return this.getModelTypeWillEmptyData();
     } else {
       const shape = item.shape;
       if (shape === 'dot') {

stories/Map/components/bugfix.tsx

@@ -2,74 +2,6 @@
 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;
@@ -81,53 +13,62 @@ export default class Amap2demo extends React.Component {
   public async componentDidMount() {
     const scene = new Scene({
       id: 'map',
-      map: new GaodeMapV2({
+      map: new GaodeMap({
-        center: [120.2, 30.2],
+        center: [121.434765, 31.256735],
-        zoom: 9,
+        zoom: 14.83,
       }),
     });
     this.scene = scene;
 
+    scene.addImage(
+      '00',
+      'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
+    );
+
     scene.on('loaded', () => {
-      Object.keys(img).forEach((key) => {
+      fetch(
-        scene.addImage(key, img[key]);
+        'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
-      });
+      )
-      const imageLayer = new PointLayer({
+        .then((res) => res.json())
-        name: 'image',
+        .then((data) => {
-      });
+          const imageLayer = new PointLayer()
+            .source(data, {
+              parser: {
+                type: 'json',
+                x: 'longitude',
+                y: 'latitude',
+              },
+            })
+            .shape('name', ['00'])
+            .size(10);
 
-      imageLayer
+          let d = {
-        .source(data)
+            coordinates: (2)[(121.4318415, 31.25682515)],
-        // @ts-ignore
+            count: 2,
-        .size(20)
+            id: '5011000005647',
-        // @ts-ignore
+            latitude: 31.25682515,
-        .shape('s', (s) => s)
+            longitude: 121.4318415,
-        .fitBounds();
+            name: '石泉路140弄',
-
+            unit_price: 52256.3,
-      const textLayer = new PointLayer({
+          };
-        name: 'image',
+          const imageLayer1 = new PointLayer()
-      });
+            .source([], {
-
+              parser: {
-      textLayer
+                type: 'json',
-        .source(data)
+                x: 'longitude',
-        // @ts-ignore
+                y: 'latitude',
-        .size(20)
+              },
-        .color('#000000')
+            })
-        // @ts-ignore
+            .shape('name', ['00'])
-        .shape('m', 'text')
+            .size(25);
-        .style({
-          stroke: '#ffffff',
-          strokeWidth: 2,
-          textOffset: [0, -40],
-        });
-
-      scene.addLayer(textLayer);
 
           scene.addLayer(imageLayer);
+          scene.addLayer(imageLayer1);
 
-      [textLayer, imageLayer].forEach((layer) => {
+          imageLayer.on('click', (e) => {
-        layer.on('click', () => {
+            // console.log(e);
-          alert();
+            // imageLayer1.setBlend('normal')
+            imageLayer1.setData([e.feature]);
           });
         });
     });