Fix 文本更新 (#1530)

* fix: 文本更新 * fix: iconfont 更新 * fix: 移除console * docs: scene 增加 setzoom
2022-12-08 11:24:07 +08:00 · 2022-12-08 11:24:07 +08:00 · 02f76b4d4b
parent 15e653a6d8
commit 02f76b4d4b
11 changed files with 145 additions and 27 deletions
--- a/dev-demos/bugs/heatmap/demos/map.tsx
+++ b/dev-demos/bugs/heatmap/demos/map.tsx
@ -0,0 +1,76 @@
+// @ts-ignore
+import { Scene,RasterLayer, HeatmapLayer } from '@antv/l7';
+// @ts-ignore
+import { Map,GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+
+const scene = new Scene({
+    id: 'map',
+    map: new GaodeMap({
+      style: 'light',
+      pitch: 0,
+      center: [ 114.07737552216226, 22.542656745583486 ],
+      rotation: 0,
+      zoom: 12
+    })
+  });
+  scene.on('loaded', () => {
+    const url1 =
+      'https://tiles{1-3}.geovisearth.com/base/v1/vec/{z}/{x}/{y}?format=png&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788';
+
+    const layer1 = new RasterLayer({
+      zIndex: 0,
+    }).source(url1, {
+      parser: {
+        type: 'rasterTile',
+        tileSize: 256,
+        zoomOffset: 0,
+      },
+    });
+    scene.addLayer(layer1)
+    fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
+    )
+      .then(res => res.json())
+      .then(data => {
+        const layer = new HeatmapLayer({})
+            .source(data)
+            .shape('heatmap3D')
+            .size('h12', [0, 1.0]) // weight映射通道
+            .style({
+              intensity: 2,
+              radius: 20,
+              opacity: 1.0,
+              rampColors: {
+                colors: [
+                  '#FF4818',
+                  '#F7B74A',
+                  '#FFF598',
+                  '#F27DEB',
+                  '#8C1EB2',
+                  '#421EB2',
+                ].reverse(),
+                positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
+              },
+            });
+        scene.addLayer(layer);
+        scene.render()
+      });
+  });
+  
+
+  
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/bugs/heatmap/heatmap.md
+++ b/dev-demos/bugs/heatmap/heatmap.md
@ -0,0 +1,2 @@
+### 热力图
+<code src="./demos/map.tsx"></code>
--- a/dev-demos/bugs/point/demos/text.tsx
+++ b/dev-demos/bugs/point/demos/text.tsx
@ -19,7 +19,7 @@ export default () => {
              .then(res => res.json())
              .then(data => {
                const pointLayer = new PointLayer({})
-                  .source([], {
+                  .source(data.list, {
                    parser: {
                      type: 'json',
                      x: 'j',
@ -39,15 +39,9 @@ export default () => {
                    strokeWidth: 0.3, // 描边宽度
                    strokeOpacity: 1.0
                  });
-                  pointLayer.style({
-                    stroke: '#f00', // 描边颜色
-                    strokeWidth: 0.3, // 描边宽度
-                    strokeOpacity: 1.0,
-                    textAllowOverlap: false,
-                  })
                scene.addLayer(pointLayer);
                setTimeout(()=>{
-                  pointLayer.setData(data.list)
+               
                },2000)
              });
          
--- a/dev-demos/features/heatmap/demos/heatmap3d.tsx
+++ b/dev-demos/features/heatmap/demos/heatmap3d.tsx
@ -1,14 +1,14 @@
 // @ts-ignore
-import { Scene, HeatmapLayer } from '@antv/l7';
+import { Scene,RasterLayer, HeatmapLayer } from '@antv/l7';
 // @ts-ignore
-import { GaodeMap } from '@antv/l7-maps';
+import { Map } from '@antv/l7-maps';
 import React, { useEffect } from 'react';

 export default () => {
  useEffect(() => {
    const scene = new Scene({
      id: 'map',
-      map: new GaodeMap({
+      map: new Map({
        center: [120, 30],
        pitch: 0,
        zoom: 2,
@ -16,6 +16,19 @@ export default () => {
    });

    scene.on('loaded', () => {
+      const url1 =
+      'https://tiles{1-3}.geovisearth.com/base/v1/vec/{z}/{x}/{y}?format=png&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788';
+
+    const layer1 = new RasterLayer({
+      zIndex: 0,
+    }).source(url1, {
+      parser: {
+        type: 'rasterTile',
+        tileSize: 256,
+        zoomOffset: 0,
+      },
+    });
+    scene.addLayer(layer1)
      fetch(
        'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
      )
--- a/dev-demos/features/point/demos/iconfont.tsx
+++ b/dev-demos/features/point/demos/iconfont.tsx
@ -55,7 +55,7 @@ export default () => {
            iconfont: true,
            textAllowOverlap: true,
          });
-      
+          console.log(imageLayer);
            scene.addLayer(imageLayer);
          // }
          
--- a/dev-demos/features/point/demos/text.tsx
+++ b/dev-demos/features/point/demos/text.tsx
@ -18,6 +18,17 @@ export default () => {
            fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
              .then(res => res.json())
              .then(data => {
+                const pointLayer1 = new PointLayer({})
+                  .source(data.list, {
+                    parser: {
+                      type: 'json',
+                      x: 'j',
+                      y: 'w'
+                    }
+                  })
+                  .shape('circle')
+                  .size(5)
+                  .color('red')
                const pointLayer = new PointLayer({})
                  .source(data.list, {
                    parser: {
@ -39,13 +50,15 @@ export default () => {
                    strokeWidth: 0.3, // 描边宽度
                    strokeOpacity: 1.0
                  });
-                  pointLayer.style({
-                    stroke: '#f00', // 描边颜色
-                    strokeWidth: 0.3, // 描边宽度
-                    strokeOpacity: 1.0
-                  })
+                scene.addLayer(pointLayer1);
                scene.addLayer(pointLayer);
-                console.log(pointLayer)
+                setTimeout(()=>{
+                  pointLayer.style({
+                    textAnchor:'left'
+                    // textOffset: [ 40, 40 ], // 文本相对锚点的偏移量 [水平, 垂直]
+                  })
+                  scene.render()
+                },2000)
              });
          
          });
--- a/packages/core/src/services/layer/ILayerService.ts
+++ b/packages/core/src/services/layer/ILayerService.ts
@ -80,7 +80,7 @@ export interface ILayerModel {
  getAnimateUniforms(): IModelUniform;
  buildModels(): Promise<IModel[]>;
  initModels(): Promise<IModel[]>;
-  needUpdate(): boolean;
+  needUpdate():Promise<boolean>
  clearModels(refresh?: boolean): void;

  // canvasLayer
--- a/packages/layers/src/core/BaseModel.ts
+++ b/packages/layers/src/core/BaseModel.ts
@ -512,7 +512,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
    return {};
  }

-  public needUpdate(): boolean {
+  public async needUpdate(): Promise<boolean> {
    return false;
  }
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
--- a/packages/layers/src/plugins/UpdateModelPlugin.ts
+++ b/packages/layers/src/plugins/UpdateModelPlugin.ts
@ -10,7 +10,11 @@ export default class UpdateModelPlugin implements ILayerPlugin {
    layer.hooks.beforeRender.tap('UpdateModelPlugin', () => {
      // 处理文本更新
      if (layer.layerModel) {
-        layer.layerModel.needUpdate();
+        layer.layerModel.needUpdate().then((flag) => {
+          if (flag) {
+            layer.renderLayers();
+          }
+        });
      }
    });
    layer.hooks.afterRender.tap('UpdateModelPlugin', () => {
--- a/packages/layers/src/point/models/text.ts
+++ b/packages/layers/src/point/models/text.ts
@ -103,6 +103,7 @@ export default class TextModel extends BaseModel {
      stroke = '#fff',
      strokeWidth = 0,
      textAnchor = 'center',
+      textOffset,
      textAllowOverlap = false,
      halo = 0.5,
      gamma = 2.0,
@ -114,9 +115,11 @@ export default class TextModel extends BaseModel {
      this.updateTexture();
      this.textCount = Object.keys(mapping).length;
    }
+
    this.preTextStyle = {
      textAnchor,
      textAllowOverlap,
+      textOffset,
    };

    if (
@ -185,10 +188,12 @@ export default class TextModel extends BaseModel {
    const {
      textAnchor = 'center',
      textAllowOverlap = true,
+      textOffset,
    } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
    this.preTextStyle = {
      textAnchor,
      textAllowOverlap,
+      textOffset
    };
    return await this.buildModels();
  }
@ -221,11 +226,17 @@ export default class TextModel extends BaseModel {
       
  }
  
-  public needUpdate() {
+  public async needUpdate():Promise<boolean> {
    const {
      textAllowOverlap = false,
+      textAnchor = 'center',
+      textOffset
    } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
    const data = this.layer.getEncodedData();
+    if(JSON.stringify(textOffset) !==JSON.stringify(this.preTextStyle.textOffset) ||textAnchor!==this.preTextStyle.textAnchor ) {
+      await this.mapping();
+      return true;
+    }
    if(data.length < 5 || textAllowOverlap) { // 小于不做避让
      return false;
    }
@ -240,7 +251,7 @@ export default class TextModel extends BaseModel {
      textAllowOverlap !== this.preTextStyle.textAllowOverlap
    ) {
      // TODO this.mapping 数据未变化，避让
-      this.reBuildModel();
+      await this.reBuildModel();
      return true;
    }
    
@ -419,12 +430,12 @@ export default class TextModel extends BaseModel {
    const {
      spacing = 2,
      textAnchor = 'center',
-      // textOffset,
+      textOffset,
    } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
    const data = this.layer.getEncodedData();

    this.glyphInfo = data.map((feature: IEncodeFeature) => {
-      const { shape = '', id, size = 1, textOffset = [0, 0] } = feature;
+      const { shape = '', id, size = 1, } = feature;

      const shaping = shapeText(
        shape.toString(),
@ -434,7 +445,7 @@ export default class TextModel extends BaseModel {
        textAnchor,
        'left',
        spacing,
-        textOffset,
+        textOffset || feature.textOffset || [0,0],
        iconfont,
      );
      const glyphQuads = getGlyphQuads(shaping, textOffset, false);
@ -556,6 +567,5 @@ export default class TextModel extends BaseModel {
      });
      // TODO 渲染流程待修改
      this.layer.models = [model];
-      // this.layerService.throttleRenderLayers();
  }
 }
--- a/packages/site/docs/api/scene.zh.md
+++ b/packages/site/docs/api/scene.zh.md
@ -373,6 +373,12 @@ export interface ICameraOptions {
 type ICenter = [number, number];
 scene.setZoomAndCenter(zoom, center);
 ```
+### setZoom(zoom: number): void 设置地图旋转
+设置地图缩放等级
+
+```javascript
+scene.setZoom(10);
+```

 ### setRotation(rotation: number): void 设置地图旋转