Shihuidev (#898)

* feat: 增加着色器的拾取计算控制、完善 arcmini

* feat: 完善 enableShaderPick/disableShaderPick 功能

* style: lint style

* feat: 补充调用高德地图公交线路查询 demo

* style: lint style

* feat: 优化弧线的纹理动画

* style: lint style

* feat: 去除greatCircle 的纹理动画优化

* feat: 扩展点图层圆柱效果

* feat: 增加几何体的径向渐变配置

* style: lint style

* fix: 修复bug 图层触发的事件跟图层设置的zIndex无关，只跟插入图层先后顺序有关

* style: lint style

* feat: 补全挤出几何体拾取颜色的光照配置

* style: lint style

* fix: 修复圆柱 cull 问题 mapbox amap 不同

* feat: 图层销毁时的内存泄漏

* style: lint style

* feat: 平面弧线新增弧线偏移量的数据映射能力

* style: lint style

* fix: 修复重复销毁bug

* style: lint style

* feat: 修复 texture 重复销毁问题

* style: lint style

* fix: 修复图层叠加模式下的拾取失效问题

* style: lint style

* fix: 修复纹理贴图在 zoom 大于 12 时存在的问题

* fix: 修复水波点颜色偏暗

* feat: 优化点图层的渲染效果，叠加渲染效果

* style: lint style

* fix: 修复 layer contextmenu 事件丢失

* fix: 修复 map 类型 resize 失效

* style: lint style

* feat: 增加瓦片地图的请求节流

* style: lint style

* feat: 优化热力图在 radius 数值比较大时热力点边缘发生裁剪的现象

* style: lint style

* fix: 修复resize 后 picking shiqu 拾取失败的问题

* feat: 优化 marker/popup 在容器边缘的表现

* feat: 增加 setEnableRender 方法

* style: lint style

* feat: 增加城市图层扫光特效

* style: lint style

* feat: 补全拾取色混合配置

* style: lint style

* feat: 增加高德地图的面积大小点

* style: lint style

* feat: 点优化边缘锯齿

* fix: 修复pointLayer stroke 变暗问题

* fix: 修复混合导致的拾取错误

* feat: add simple point 1.0

* style: lint style

* feat: simple point support stroke

* style: lint style

* feat: 优化 simple point 边缘的锯齿

* style: lint style

* feat: add point cylinder raising animate

* style: lint style

* feat: 优化点图层 icon 在小尺寸下的锯齿问题

* style: lint style

* feat: 修复 layer destroy 报错、未清理、未重绘、补充触发 destroy 事件

* fix: 修复 marker 在 cluster getMakers 失效

* style: lint style

* feat: 清除 marker layer cluster fix

* style: lint style

* fix: 修复 markerLayer hide show 方法缺少 cluster 模式下的控制

* style: lint style

* feat: 取消在 shape 方法执行后的暴力更新

* style: lint style

* feat: 增加图层保底颜色设置

* style: lint style

* feat: 将兜底颜色改为 bottomColor

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

@@ -141,6 +141,8 @@ export interface ILayer {
   getShaderPickStat: () => boolean;
   needPick(type: string): boolean;
   getLayerConfig(): Partial<ILayerConfig & ISceneConfig>;
+  setBottomColor(color: string): void;
+  getBottomColor(): string;
   getContainer(): Container;
   setContainer(container: Container, sceneContainer: Container): void;
   setCurrentPickId(id: number | null): void;

packages/layers/src/core/BaseLayer.ts

@@ -186,6 +186,9 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
 
   private aniamateStatus: boolean = false;
 
+  // TODO: layer 保底颜色
+  private bottomColor = 'rgba(0, 0, 0, 0)';
+
   // private pickingPassRender: IPass<'pixelPicking'>;
 
   constructor(config: Partial<ILayerConfig & ChildLayerStyleOptions> = {}) {
@@ -237,6 +240,14 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     return this.container;
   }
 
+  public setBottomColor(color: string) {
+    this.bottomColor = color;
+  }
+
+  public getBottomColor() {
+    return this.bottomColor;
+  }
+
   public addPlugin(plugin: ILayerPlugin): ILayer {
     // TODO: 控制插件注册顺序
     // @example:

packages/layers/src/plugins/DataMappingPlugin.ts

@@ -49,6 +49,7 @@ export default class DataMappingPlugin implements ILayerPlugin {
       if (layer.layerModelNeedUpdate) {
         return;
       }
+      const bottomColor = layer.getBottomColor();
       const attributes = styleAttributeService.getLayerStyleAttributes() || [];
       const filter = styleAttributeService.getLayerStyleAttribute('filter');
       const { dataArray } = layer.getSource().data;
@@ -59,13 +60,15 @@ export default class DataMappingPlugin implements ILayerPlugin {
       // 数据过滤完 再执行数据映射
       if (filter?.needRemapping && filter?.scale) {
         filterData = dataArray.filter((record: IParseDataItem) => {
-          return this.applyAttributeMapping(filter, record)[0];
+          return this.applyAttributeMapping(filter, record, bottomColor)[0];
         });
       }
       if (attributesToRemapping.length) {
         // 过滤数据
         if (filter?.needRemapping) {
-          layer.setEncodedData(this.mapping(attributes, filterData));
+          layer.setEncodedData(
+            this.mapping(attributes, filterData, undefined, bottomColor),
+          );
           filter.needRemapping = false;
         } else {
           layer.setEncodedData(
@@ -73,6 +76,7 @@ export default class DataMappingPlugin implements ILayerPlugin {
               attributesToRemapping,
               filterData,
               layer.getEncodedData(),
+              bottomColor,
             ),
           );
         }
@@ -87,6 +91,7 @@ export default class DataMappingPlugin implements ILayerPlugin {
       styleAttributeService,
     }: { styleAttributeService: IStyleAttributeService },
   ) {
+    const bottomColor = layer.getBottomColor();
     const attributes = styleAttributeService.getLayerStyleAttributes() || [];
     const filter = styleAttributeService.getLayerStyleAttribute('filter');
     const { dataArray } = layer.getSource().data;
@@ -94,16 +99,19 @@ export default class DataMappingPlugin implements ILayerPlugin {
     // 数据过滤完 再执行数据映射
     if (filter?.scale) {
       filterData = dataArray.filter((record: IParseDataItem) => {
-        return this.applyAttributeMapping(filter, record)[0];
+        return this.applyAttributeMapping(filter, record, bottomColor)[0];
       });
     }
-    layer.setEncodedData(this.mapping(attributes, filterData));
+    layer.setEncodedData(
+      this.mapping(attributes, filterData, undefined, bottomColor),
+    );
   }
 
   private mapping(
     attributes: IStyleAttribute[],
     data: IParseDataItem[],
     predata?: IEncodeFeature[],
+    minimumColor?: string,
   ): IEncodeFeature[] {
     // console.log('data', data)
     const mappedData = data.map((record: IParseDataItem, i) => {
@@ -119,7 +127,11 @@ export default class DataMappingPlugin implements ILayerPlugin {
         .forEach((attribute: IStyleAttribute) => {
           // console.log('attribute', attribute)
           // console.log('record', record)
-          let values = this.applyAttributeMapping(attribute, record);
+          let values = this.applyAttributeMapping(
+            attribute,
+            record,
+            minimumColor,
+          );
           // console.log('values', values)
           attribute.needRemapping = false;
 
@@ -183,6 +195,7 @@ export default class DataMappingPlugin implements ILayerPlugin {
   private applyAttributeMapping(
     attribute: IStyleAttribute,
     record: { [key: string]: unknown },
+    minimumColor?: string,
   ) {
     if (!attribute.scale) {
       return [];
@@ -201,7 +214,12 @@ export default class DataMappingPlugin implements ILayerPlugin {
     });
     // console.log('params', params)
     // console.log('attribute', attribute)
-    // console.log('mapping',attribute.mapping ? attribute.mapping(params) : [])
+    if (attribute.name === 'color') {
+      if (params.length === 0 || params[0] === '') {
+        return [minimumColor];
+      }
+    }
+
     return attribute.mapping ? attribute.mapping(params) : [];
   }
 }

packages/layers/src/plugins/UpdateStyleAttributePlugin.ts

@@ -44,8 +44,9 @@ export default class UpdateStyleAttributePlugin implements ILayerPlugin {
     const filter = styleAttributeService.getLayerStyleAttribute('filter');
     const shape = styleAttributeService.getLayerStyleAttribute('shape');
     if (
-      (filter && filter.needRegenerateVertices) ||
+      filter &&
-      (shape && shape.needRegenerateVertices) // TODO:Shape 更新重新build
+      filter.needRegenerateVertices // ||
+      // (shape && shape.needRegenerateVertices) // TODO:Shape 更新重新build
     ) {
       layer.layerModelNeedUpdate = true;
       attributes.forEach((attr) => (attr.needRegenerateVertices = false));

packages/three/src/core/baseLayer.ts

@@ -216,4 +216,12 @@ export default class ThreeJSLayer
   public addAnimateMixer(mixer: AnimationMixer) {
     this.animateMixer.push(mixer);
   }
+
+  public setBottomColor(color: string): void {
+    console.warn('empty function');
+  }
+
+  public getBottomColor() {
+    return 'rgba(0, 0, 0, 0)';
+  }
 }

stories/Map/components/amap2demo_polygon.tsx

@@ -92,6 +92,64 @@ export default class Amap2demo_polygon extends React.Component {
       ],
     };
 
+    const data2 = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          properties: {
+            testOpacity: 0.4,
+          },
+          geometry: {
+            type: 'MultiPolygon',
+            coordinates: [
+              [
+                [
+                  [110.5224609375, 32.731840896865684],
+                  [113.0712890625, 32.731840896865684],
+                  [113.0712890625, 34.56085936708384],
+                  [110.5224609375, 34.56085936708384],
+                  [110.5224609375, 32.731840896865684],
+                ],
+                [
+                  [111.26953125, 33.52307880890422],
+                  [111.26953125, 34.03445260967645],
+                  [112.03857421875, 34.03445260967645],
+                  [112.03857421875, 33.52307880890422],
+                  [111.26953125, 33.52307880890422],
+                ],
+              ],
+            ],
+          },
+        },
+        {
+          type: 'Feature',
+          properties: {
+            testOpacity: 0.8,
+          },
+          geometry: {
+            type: 'Polygon',
+            coordinates: [
+              [
+                [113.8623046875, 30.031055426540206],
+                [116.3232421875, 30.031055426540206],
+                [116.3232421875, 31.090574094954192],
+                [113.8623046875, 31.090574094954192],
+                [113.8623046875, 30.031055426540206],
+              ],
+              [
+                [117.26806640625, 32.13840869677249],
+                [118.36669921875, 32.13840869677249],
+                [118.36669921875, 32.47269502206151],
+                [117.26806640625, 32.47269502206151],
+                [117.26806640625, 32.13840869677249],
+              ],
+            ],
+          },
+        },
+      ],
+    };
+
     const layer = new PolygonLayer({
       autoFit: true,
     })
@@ -104,6 +162,15 @@ export default class Amap2demo_polygon extends React.Component {
       });
     scene.addLayer(layer);
 
+    setTimeout(() => {
+      layer
+        .setData(data2)
+        .shape('fill')
+        .color('#0f0');
+
+      scene.render();
+    }, 1000);
+
     // const layer2 = new PolygonLayer({
     //   autoFit: true,
     // })

stories/customMap/components/Map.tsx

@@ -25,7 +25,7 @@ export default class ScaleComponent extends React.Component {
           let layer = new PolygonLayer({ blend: 'normal' }) // autoFit: true
             .source(data)
             .size('name', [0, 10000, 50000, 30000, 100000])
-            .color('name', [
+            .color('name1', [
               '#2E8AE6',
               '#69D1AB',
               '#DAF291',
@@ -43,25 +43,27 @@ export default class ScaleComponent extends React.Component {
               },
             });
 
-          let layer2 = new PolygonLayer({ blend: 'normal' })
+          layer.setBottomColor('#f00');
-            .source(data)
+
-            .size(1)
+          // let layer2 = new PolygonLayer({ blend: 'normal' })
-            .color('name', [
+          //   .source(data)
-              '#2E8AE6',
+          //   .size(1)
-              '#69D1AB',
+          //   .color('name', [
-              '#DAF291',
+          //     '#2E8AE6',
-              '#FFD591',
+          //     '#69D1AB',
-              '#FF7A45',
+          //     '#DAF291',
-              '#CF1D49',
+          //     '#FFD591',
-            ])
+          //     '#FF7A45',
-            .shape('line')
+          //     '#CF1D49',
-            .select(true)
+          //   ])
-            .style({
+          //   .shape('line')
-              opacity: 1.0,
+          //   .select(true)
-            });
+          //   .style({
+          //     opacity: 1.0,
+          //   });
 
           scene.addLayer(layer);
-          scene.addLayer(layer2);
+          // scene.addLayer(layer2);
         });
     });
   }