diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 43ca1ed4d7..64c634de44 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/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 extends EventEmitter values?: StyleAttributeOption, updateOptions?: Partial, ) { + 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( diff --git a/packages/layers/src/utils/updateShape.ts b/packages/layers/src/utils/updateShape.ts new file mode 100644 index 0000000000..49ad412d20 --- /dev/null +++ b/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; + } + }); + } +} diff --git a/stories/Map/components/shapeUpdate.tsx b/stories/Map/components/shapeUpdate.tsx new file mode 100644 index 0000000000..22c277d2fd --- /dev/null +++ b/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 ( + <> +
+ + + ); + } +} diff --git a/stories/Map/map.stories.tsx b/stories/Map/map.stories.tsx index 482cae2c61..e4ea82987e 100644 --- a/stories/Map/map.stories.tsx +++ b/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', () => ) @@ -125,3 +127,5 @@ storiesOf('地图方法', module) .add('高德地图 样式映射 文字偏移', () => ) .add('测试销毁', () => ) + + .add('ShapeUpdate', () => )