Merge branch 'master' of https://github.com/antvis/L7

packages/layers/src/core/BaseLayer.ts

@@ -51,6 +51,7 @@ import { isFunction, isObject } from 'lodash';
 import { normalizePasses } from '../plugins/MultiPassRendererPlugin';
 import { BlendTypes } from '../utils/blend';
 import { handleStyleDataMapping } from '../utils/dataMappingStyle';
+import { updateShape } from '../utils/updateShape';
 import baseLayerSchema from './schema';
 /**
  * 分配 layer id
@@ -423,7 +424,13 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     values?: StyleAttributeOption,
     updateOptions?: Partial<IStyleAttributeUpdateOptions>,
   ) {
+    const lastShape = this.styleAttributeService?.getLayerStyleAttribute(
+      'shape',
+    )?.scale?.field;
+    const currentShape = field;
     this.updateStyleAttribute('shape', field, values, updateOptions);
+    // TODO: 根据 shape 判断是否需要更新 model
+    updateShape(this, lastShape, currentShape);
     return this;
   }
   public label(

packages/layers/src/utils/updateShape.ts

@@ -0,0 +1,33 @@
+import { ILayer, StyleAttributeField } from '@antv/l7-core';
+// TODO: shapeUpdateList 存储一系列的 shape 类型
+// 当这一系列的 shape 相互切换的时候需要重构 layer 的 model (顶点数据集)
+const shapeUpdateList = [
+  // PointLayer
+  ['circle', 'cylinder'],
+  ['square', 'cylinder'],
+  ['triangle', 'cylinder'],
+  ['pentagon', 'cylinder'],
+  ['hexagon', 'cylinder'],
+  ['octogon', 'cylinder'],
+  ['hexagram', 'cylinder'],
+  ['rhombus', 'cylinder'],
+  ['vesica', 'cylinder'],
+];
+export function updateShape(
+  layer: ILayer,
+  lastShape: StyleAttributeField | undefined,
+  currentShape: StyleAttributeField | undefined,
+): void {
+  if (
+    typeof lastShape === 'string' &&
+    typeof currentShape === 'string' &&
+    lastShape !== currentShape
+  ) {
+    shapeUpdateList.map((shapes) => {
+      if (shapes.includes(lastShape) && shapes.includes(currentShape)) {
+        // TODO: dataSourceNeedUpdate 借用数据更新时更新 layer model 的工作流
+        layer.dataState.dataSourceNeedUpdate = true;
+      }
+    });
+  }
+}

stories/Map/components/shapeUpdate.tsx

@@ -0,0 +1,106 @@
+// @ts-ignore
+import { PointLayer, Scene, ILayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class ShapeUpdate extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+  public pointLayer: ILayer;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [121.107846, 30.267069],
+        pitch: 40,
+        style: 'normal',
+        zoom: 20,
+        animateEnable: false,
+      }),
+    });
+
+    this.pointLayer = new PointLayer()
+      .source(
+        [
+          {
+            lng: 121.107846,
+            lat: 30.267069,
+          },
+          {
+            lng: 121.107,
+            lat: 30.267069,
+          },
+        ],
+        {
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat',
+          },
+        },
+      )
+      // 'circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica'
+      // .shape('circle')
+      .shape('vesica')
+      // .shape('cylinder')
+      .color('blue')
+      .size(20)
+      // .size([10, 10, 50])
+      .style({
+        stroke: '#fff',
+        storkeWidth: 2,
+        // offsets: [100, 100],
+      });
+    scene.addLayer(this.pointLayer);
+    scene.render();
+    this.scene = scene;
+  }
+
+  public updateShape() {
+    this.pointLayer
+      .shape('cylinder')
+      // .shape('hexagon')
+      // .shape('triangle')
+      // .shape('hexagram')
+      .size([10, 10, 50]);
+
+    // .shape('triangle')
+
+    this.scene.render();
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+        <button
+          onClick={() => {
+            this.updateShape();
+          }}
+          style={{
+            position: 'absolute',
+            top: '20px',
+            right: '20px',
+            zIndex: 10,
+          }}
+        >
+          update shape
+        </button>
+      </>
+    );
+  }
+}

stories/Map/map.stories.tsx

@@ -62,6 +62,8 @@ import Amap2demo_styleMap from "./components/amap2demo_styleMap"
 
 import Amap2demo_textOffset from "./components/amap2demo_textOffset"
 
+import ShapeUpdate from './components/shapeUpdate'
+
 // @ts-ignore
 storiesOf('地图方法', module)
         .add('高德地图 point/demo', () => <MapCenter />)
@@ -125,3 +127,5 @@ storiesOf('地图方法', module)
         .add('高德地图 样式映射 文字偏移', () => <Amap2demo_textOffset/>)
 
         .add('测试销毁', () => <Amap2demo_destroy/>)
+
+        .add('ShapeUpdate', () => <ShapeUpdate/>)