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
2022-02-28 15:34:54 +08:00 · 2022-02-28 15:34:54 +08:00 · 173886ab45
parent 649cd3a8eb
commit 173886ab45
4 changed files with 89 additions and 111 deletions
--- a/packages/core/src/services/layer/ILayerService.ts
+++ b/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;
--- a/packages/layers/src/core/BaseLayer.ts
+++ b/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({
--- a/packages/layers/src/point/index.ts
+++ b/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') {
--- a/stories/Map/components/bugfix.tsx
+++ b/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,55 +13,64 @@ export default class Amap2demo extends React.Component {
  public async componentDidMount() {
    const scene = new Scene({
      id: 'map',
-      map: new GaodeMapV2({
-        center: [120.2, 30.2],
-        zoom: 9,
+      map: new GaodeMap({
+        center: [121.434765, 31.256735],
+        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) => {
-        scene.addImage(key, img[key]);
-      });
-      const imageLayer = new PointLayer({
-        name: 'image',
-      });
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          const imageLayer = new PointLayer()
+            .source(data, {
+              parser: {
+                type: 'json',
+                x: 'longitude',
+                y: 'latitude',
+              },
+            })
+            .shape('name', ['00'])
+            .size(10);

-      imageLayer
-        .source(data)
-        // @ts-ignore
-        .size(20)
-        // @ts-ignore
-        .shape('s', (s) => s)
-        .fitBounds();
+          let d = {
+            coordinates: (2)[(121.4318415, 31.25682515)],
+            count: 2,
+            id: '5011000005647',
+            latitude: 31.25682515,
+            longitude: 121.4318415,
+            name: '石泉路140弄',
+            unit_price: 52256.3,
+          };
+          const imageLayer1 = new PointLayer()
+            .source([], {
+              parser: {
+                type: 'json',
+                x: 'longitude',
+                y: 'latitude',
+              },
+            })
+            .shape('name', ['00'])
+            .size(25);

-      const textLayer = new PointLayer({
-        name: 'image',
-      });
+          scene.addLayer(imageLayer);
+          scene.addLayer(imageLayer1);

-      textLayer
-        .source(data)
-        // @ts-ignore
-        .size(20)
-        .color('#000000')
-        // @ts-ignore
-        .shape('m', 'text')
-        .style({
-          stroke: '#ffffff',
-          strokeWidth: 2,
-          textOffset: [0, -40],
+          imageLayer.on('click', (e) => {
+            // console.log(e);
+            // imageLayer1.setBlend('normal')
+            imageLayer1.setData([e.feature]);
+          });
        });
-
-      scene.addLayer(textLayer);
-
-      scene.addLayer(imageLayer);
-
-      [textLayer, imageLayer].forEach((layer) => {
-        layer.on('click', () => {
-          alert();
-        });
-      });
    });
  }