fix: 修复更新图层属性 bug (#1356)

* fix: 修复 featureScale 错误 * style: lint style * fix: remove featureScalePlugin async * chore: add fix demo * fix: 修复样式更新的状态问题 * style: lint style Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>
2022-09-27 20:45:37 +08:00 · 2022-09-27 20:45:37 +08:00 · 8d0f0f7742
parent 54bdd69811
commit 8d0f0f7742
21 changed files with 173 additions and 72 deletions
--- a/dev-demos/features/fix/demos/fix.tsx
+++ b/dev-demos/features/fix/demos/fix.tsx
@ -0,0 +1,129 @@
+// @ts-ignore
+import { Scene, PolygonLayer } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+
+    const scene = new Scene({
+      id: "map",
+      map: new GaodeMap({
+        center: [120, 30],
+        zoom: 4
+      })
+    });
+    
+    const dataList = [
+      { name: "杭州", data: '#f00' },
+      { name: "北京", data: '#ff0' }
+    ];
+    const dataList2 = [{ name: "杭州", data: '#0f0' }];
+    
+    const geo = {
+      type: "FeatureCollection",
+      features: [
+        {
+          type: "Feature",
+          properties: {
+            color: "#f00",
+            name: "杭州"
+          },
+          geometry: {
+            type: "Polygon",
+            coordinates: [
+              [
+                [113.8623046875, 31.031055426540206],
+                [116.3232421875, 32.031055426540206],
+                [116.3232421875, 32.590574094954192]
+              ]
+            ]
+          }
+        },
+        {
+          type: "Feature",
+          properties: {
+            color: "#ff0",
+            name: "北京"
+          },
+          geometry: {
+            type: "Polygon",
+            coordinates: [
+              [
+                [111.8623046875, 30.031055426540206],
+                [112.3232421875, 30.031055426540206],
+                [113.3232421875, 31.090574094954192]
+              ]
+            ]
+          }
+        }
+      ]
+    };
+
+    const geo2 = {
+      type: "FeatureCollection",
+      features: [
+        {
+          type: "Feature",
+          properties: {
+            color: "#f00",
+            name: "杭州"
+          },
+          geometry: {
+            type: "Polygon",
+            coordinates: [
+              [
+                [113.8623046875, 31.031055426540206],
+                [116.3232421875, 32.031055426540206],
+                [116.3232421875, 32.590574094954192]
+              ]
+            ]
+          }
+        },
+      ]
+    };
+    
+    const layer = new PolygonLayer()
+      .source(geo, {
+        transforms: [
+          {
+            type: "join",
+            sourceField: "name", //data1 对应字段名
+            targetField: "name", // data 对应字段名 绑定到的地理数据
+            data: dataList
+          }
+        ]
+      })
+      .shape("fill")
+      .color("data", (c) => c)
+    
+    scene.on("loaded", () => {
+      scene.addLayer(layer);
+    
+      setTimeout(() => {
+        layer.setData(geo2, {
+          transforms: [
+            {
+              type: "join",
+              sourceField: "name", //data1 对应字段名
+              targetField: "name", // data 对应字段名 绑定到的地理数据
+              data: dataList2
+            }
+          ]
+        })
+        .color("data", (c) => c);
+      }, 2000);
+    });
+    
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/fix/fix.md
+++ b/dev-demos/features/fix/fix.md
@ -0,0 +1,2 @@
+### fix feature
+<code src="./demos/fix.tsx"></code>
--- a/packages/core/src/services/layer/ILayerService.ts
+++ b/packages/core/src/services/layer/ILayerService.ts
@ -267,6 +267,7 @@ export interface ILayer {
  plugins: ILayerPlugin[];
  layerModelNeedUpdate: boolean;
  styleNeedUpdate: boolean;
+  modelLoaded: boolean;
  layerModel: ILayerModel;
  tileLayer: IBaseTileLayer;
  layerChildren: ILayer[]; // 在图层中添加子图层
--- a/packages/layers/src/Geometry/index.ts
+++ b/packages/layers/src/Geometry/index.ts
@ -20,15 +20,12 @@ export default class GeometryLayer extends BaseLayer<
    const modelType = this.getModelType();
    this.layerModel = new GeometryModels[modelType](this);
    this.layerModel.initModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
-      this.layerService.throttleRenderLayers();
+      this.dispatchModelLoad(models);
    });
  }
  public rebuildModels() {
    this.layerModel.buildModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
+      this.dispatchModelLoad(models);
    });
  }

--- a/packages/layers/src/canvas/index.ts
+++ b/packages/layers/src/canvas/index.ts
@ -9,15 +9,12 @@ export default class CanvasLayer extends BaseLayer<ICanvasLayerStyleOptions> {
    const modelType = this.getModelType();
    this.layerModel = new CanvasModels[modelType](this);
    this.layerModel.initModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
-      this.layerService.throttleRenderLayers();
+      this.dispatchModelLoad(models);
    });
  }
  public rebuildModels() {
    this.layerModel.buildModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
+      this.dispatchModelLoad(models);
    });
  }

--- a/packages/layers/src/citybuliding/building.ts
+++ b/packages/layers/src/citybuliding/building.ts
@ -6,15 +6,12 @@ export default class CityBuildingLayer extends BaseLayer {
  public buildModels() {
    this.layerModel = new CityBuildModel(this);
    this.layerModel.initModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
-      this.layerService.throttleRenderLayers();
+      this.dispatchModelLoad(models);
    });
  }
  public rebuildModels() {
    this.layerModel.buildModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
+      this.dispatchModelLoad(models);
    });
  }
  public setLight(t: number) {
--- a/packages/layers/src/core/BaseLayer.ts
+++ b/packages/layers/src/core/BaseLayer.ts
@ -120,6 +120,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>

  // 待渲染 model 列表
  public models: IModel[] = [];
+  public modelLoaded: boolean = false;

  // 每个 Layer 都有一个
  public multiPassRenderer: IMultiPassRenderer;
@ -1364,6 +1365,13 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
    this.reRender();
  };

+  protected dispatchModelLoad(models: IModel[]) {
+    this.models = models;
+    this.emit('modelLoaded', null);
+    this.modelLoaded = true;
+    this.layerService.throttleRenderLayers();
+  }
+
  protected reRender() {
    this.inited && this.layerService.reRender();
  }
--- a/packages/layers/src/earth/index.ts
+++ b/packages/layers/src/earth/index.ts
@ -37,9 +37,7 @@ export default class EarthLayer extends BaseLayer<IEarthLayerStyleOptions> {
    const shape = this.getModelType();
    this.layerModel = new EarthModels[shape](this);
    this.layerModel.initModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
-      this.layerService.throttleRenderLayers();
+      this.dispatchModelLoad(models);
    });
  }

--- a/packages/layers/src/heatmap/index.ts
+++ b/packages/layers/src/heatmap/index.ts
@ -9,15 +9,12 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
    const shape = this.getModelType();
    this.layerModel = new HeatMapModels[shape](this);
    this.layerModel.initModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
-      this.layerService.throttleRenderLayers();
+      this.dispatchModelLoad(models);
    });
  }
  public rebuildModels() {
    this.layerModel.buildModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
+      this.dispatchModelLoad(models);
    });
  }
  public renderModels() {
--- a/packages/layers/src/image/index.ts
+++ b/packages/layers/src/image/index.ts
@ -7,15 +7,12 @@ export default class ImageLayer extends BaseLayer<IImageLayerStyleOptions> {
    const modelType = this.getModelType();
    this.layerModel = new ImageModels[modelType](this);
    this.layerModel.initModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
-      this.layerService.throttleRenderLayers();
+      this.dispatchModelLoad(models);
    });
  }
  public rebuildModels() {
    this.layerModel.buildModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
+      this.dispatchModelLoad(models);
    });
  }
  protected getConfigSchema() {
--- a/packages/layers/src/line/index.ts
+++ b/packages/layers/src/line/index.ts
@ -30,15 +30,12 @@ export default class LineLayer extends BaseLayer<ILineLayerStyleOptions> {
    const shape = this.getModelType();
    this.layerModel = new LineModels[shape](this);
    this.layerModel.initModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
-      this.layerService.throttleRenderLayers();
+      this.dispatchModelLoad(models);
    });
  }
  public rebuildModels() {
    this.layerModel.buildModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
+      this.dispatchModelLoad(models);
    });
  }

--- a/packages/layers/src/mask/index.ts
+++ b/packages/layers/src/mask/index.ts
@ -104,14 +104,12 @@ export default class MaskLayer extends BaseLayer<IMaskLayerStyleOptions> {
    const shape = this.getModelType();
    this.layerModel = new MaskModels[shape](this);
    this.layerModel.initModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
+      this.dispatchModelLoad(models);
    });
  }
  public rebuildModels() {
    this.layerModel.buildModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
+      this.dispatchModelLoad(models);
    });
  }
  protected getConfigSchema() {
--- a/packages/layers/src/plugins/LayerModelPlugin.ts
+++ b/packages/layers/src/plugins/LayerModelPlugin.ts
@ -26,6 +26,7 @@ export default class LayerModelPlugin implements ILayerPlugin {
  public apply(layer: ILayer) {
    layer.hooks.init.tap('LayerModelPlugin', () => {
      layer.inited = true;
+      layer.modelLoaded = false;
      const source = layer.getSource();
      if (source.inited) {
        this.initLayerModel(layer);
@ -34,6 +35,7 @@ export default class LayerModelPlugin implements ILayerPlugin {

    layer.hooks.beforeRenderData.tap('DataSourcePlugin', () => {
      const source = layer.getSource();
+      layer.modelLoaded = false;
      if (source.inited) {
        this.prepareLayerModel(layer);
      } else {
--- a/packages/layers/src/plugins/UpdateStyleAttributePlugin.ts
+++ b/packages/layers/src/plugins/UpdateStyleAttributePlugin.ts
@ -26,10 +26,11 @@ export default class UpdateStyleAttributePlugin implements ILayerPlugin {
      ) {
        return;
      }
-      this.updateStyleAtrribute(layer, { styleAttributeService });
+      layer.modelLoaded &&
+        this.updateStyleAttribute(layer, { styleAttributeService });
    });
  }
-  private updateStyleAtrribute(
+  private updateStyleAttribute(
    layer: ILayer,
    {
      styleAttributeService,
--- a/packages/layers/src/point/index.ts
+++ b/packages/layers/src/point/index.ts
@ -21,16 +21,12 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
    const modelType = this.getModelType();
    this.layerModel = new PointModels[modelType](this);
    this.layerModel.initModels((models) => {
-      this.models = models;
-      this.layerService.updateLayerRenderList();
-      this.emit('modelLoaded', null);
-      this.layerService.throttleRenderLayers();
+      this.dispatchModelLoad(models);
    });
  }
  public rebuildModels() {
    this.layerModel.buildModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
+      this.dispatchModelLoad(models);
    });
  }

--- a/packages/layers/src/polygon/index.ts
+++ b/packages/layers/src/polygon/index.ts
@ -18,15 +18,12 @@ export default class PolygonLayer extends BaseLayer<IPolygonLayerStyleOptions> {
    const shape = this.getModelType();
    this.layerModel = new PolygonModels[shape](this);
    this.layerModel.initModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
-      this.layerService.throttleRenderLayers();
+      this.dispatchModelLoad(models);
    });
  }
  public rebuildModels() {
    this.layerModel.buildModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
+      this.dispatchModelLoad(models);
    });
  }
  protected getConfigSchema() {
--- a/packages/layers/src/raster/index.ts
+++ b/packages/layers/src/raster/index.ts
@ -7,15 +7,12 @@ export default class RaterLayer extends BaseLayer<IRasterLayerStyleOptions> {
    const modelType = this.getModelType();
    this.layerModel = new RasterModels[modelType](this);
    this.layerModel.initModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
-      this.layerService.throttleRenderLayers();
+      this.dispatchModelLoad(models);
    });
  }
  public rebuildModels() {
    this.layerModel.buildModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
+      this.dispatchModelLoad(models);
    });
  }
  protected getConfigSchema() {
--- a/packages/layers/src/tile/tileFactory/rasterDataLayer.ts
+++ b/packages/layers/src/tile/tileFactory/rasterDataLayer.ts
@ -10,16 +10,13 @@ export default class RasterTiffLayer extends BaseLayer<
    const model = this.getModelType();
    this.layerModel = new model(this);
    this.layerModel.initModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
-      this.layerService.throttleRenderLayers();
+      this.dispatchModelLoad(models);
    });
  }

  public rebuildModels() {
    this.layerModel.buildModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
+      this.dispatchModelLoad(models);
    });
  }

--- a/packages/layers/src/tile/tileFactory/vectorLayer.ts
+++ b/packages/layers/src/tile/tileFactory/vectorLayer.ts
@ -149,16 +149,13 @@ export default class VectorLayer extends BaseLayer<
    const model = this.getModelType();
    this.layerModel = new model(this);
    this.layerModel.initModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
-      this.layerService.throttleRenderLayers();
+      this.dispatchModelLoad(models);
    });
  }

  public rebuildModels() {
    this.layerModel.buildModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
+      this.dispatchModelLoad(models);
    });
  }

--- a/packages/layers/src/tile/tileTest.ts
+++ b/packages/layers/src/tile/tileTest.ts
@ -16,8 +16,7 @@ export default class TileDebugLayer extends BaseLayer<IBaseLayerStyleOptions> {
  public buildModels() {
    this.layerModel = new TileModel(this);
    this.layerModel.initModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
+      this.dispatchModelLoad(models);
    });
  }
 }
--- a/packages/layers/src/wind/index.ts
+++ b/packages/layers/src/wind/index.ts
@ -7,15 +7,12 @@ export default class WindLayer extends BaseLayer<IWindLayerStyleOptions> {
    const modelType = this.getModelType();
    this.layerModel = new WindModels[modelType](this);
    this.layerModel.initModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
-      this.layerService.throttleRenderLayers();
+      this.dispatchModelLoad(models);
    });
  }
  public rebuildModels() {
    this.layerModel.buildModels((models) => {
-      this.models = models;
-      this.emit('modelLoaded', null);
+      this.dispatchModelLoad(models);
    });
  }