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
2021-12-24 17:56:35 +08:00 · 2021-12-24 17:56:35 +08:00 · 214c039723
parent 5161d0852c
commit 214c039723
7 changed files with 135 additions and 26 deletions
--- a/packages/core/src/services/layer/ILayerService.ts
+++ b/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;
--- a/packages/layers/src/core/BaseLayer.ts
+++ b/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:
--- a/packages/layers/src/plugins/DataMappingPlugin.ts
+++ b/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) : [];
  }
 }
--- a/packages/layers/src/plugins/UpdateStyleAttributePlugin.ts
+++ b/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) ||
-      (shape && shape.needRegenerateVertices) // TODO:Shape 更新重新build
+      filter &&
+      filter.needRegenerateVertices // ||
+      // (shape && shape.needRegenerateVertices) // TODO:Shape 更新重新build
    ) {
      layer.layerModelNeedUpdate = true;
      attributes.forEach((attr) => (attr.needRegenerateVertices = false));
--- a/packages/three/src/core/baseLayer.ts
+++ b/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)';
+  }
 }
--- a/stories/Map/components/amap2demo_polygon.tsx
+++ b/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,
    // })
--- a/stories/customMap/components/Map.tsx
+++ b/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' })
-            .source(data)
-            .size(1)
-            .color('name', [
-              '#2E8AE6',
-              '#69D1AB',
-              '#DAF291',
-              '#FFD591',
-              '#FF7A45',
-              '#CF1D49',
-            ])
-            .shape('line')
-            .select(true)
-            .style({
-              opacity: 1.0,
-            });
+          layer.setBottomColor('#f00');
+
+          // let layer2 = new PolygonLayer({ blend: 'normal' })
+          //   .source(data)
+          //   .size(1)
+          //   .color('name', [
+          //     '#2E8AE6',
+          //     '#69D1AB',
+          //     '#DAF291',
+          //     '#FFD591',
+          //     '#FF7A45',
+          //     '#CF1D49',
+          //   ])
+          //   .shape('line')
+          //   .select(true)
+          //   .style({
+          //     opacity: 1.0,
+          //   });

          scene.addLayer(layer);
-          scene.addLayer(layer2);
+          // scene.addLayer(layer2);
        });
    });
  }