From a4f7c64f1d50b489a4e75e43b476d188b07d6f78 Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Wed, 24 Nov 2021 17:38:44 +0800 Subject: [PATCH] Shihui dev (#850) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 优化 pointLayer shape 切换时 2d/3d 无法成功切换 * style: lint style --- lerna.json | 2 +- packages/component/package.json | 6 +- packages/core/package.json | 4 +- packages/l7/package.json | 14 +-- packages/l7/src/version.ts | 2 +- packages/layers/package.json | 8 +- packages/layers/src/core/BaseLayer.ts | 7 ++ packages/layers/src/utils/updateShape.ts | 33 +++++++ packages/map/package.json | 4 +- packages/maps/package.json | 8 +- packages/mini/package.json | 12 +-- packages/renderer/package.json | 4 +- packages/scene/package.json | 14 +-- packages/source/package.json | 6 +- packages/three/package.json | 8 +- packages/utils/package.json | 2 +- stories/Map/components/shapeUpdate.tsx | 106 +++++++++++++++++++++++ stories/Map/map.stories.tsx | 4 + 18 files changed, 197 insertions(+), 47 deletions(-) create mode 100644 packages/layers/src/utils/updateShape.ts create mode 100644 stories/Map/components/shapeUpdate.tsx diff --git a/lerna.json b/lerna.json index 09abe72ca3..574ba57c76 100644 --- a/lerna.json +++ b/lerna.json @@ -14,7 +14,7 @@ "message": "chore: publish" } }, - "version": "2.5.57", + "version": "2.5.58", "npmClient": "yarn", "useWorkspaces": true, "publishConfig": { diff --git a/packages/component/package.json b/packages/component/package.json index 12109dbf56..9897846a61 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-component", - "version": "2.5.57", + "version": "2.5.58", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -25,8 +25,8 @@ "author": "lzxue", "license": "ISC", "dependencies": { - "@antv/l7-core": "^2.5.57", - "@antv/l7-utils": "^2.5.57", + "@antv/l7-core": "^2.5.58", + "@antv/l7-utils": "^2.5.58", "@babel/runtime": "^7.7.7", "eventemitter3": "^4.0.0", "inversify": "^5.0.1", diff --git a/packages/core/package.json b/packages/core/package.json index e12d784703..eb0d4e088b 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-core", - "version": "2.5.57", + "version": "2.5.58", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -24,7 +24,7 @@ "license": "ISC", "dependencies": { "@antv/async-hook": "^2.1.0", - "@antv/l7-utils": "^2.5.57", + "@antv/l7-utils": "^2.5.58", "@babel/runtime": "^7.7.7", "ajv": "^6.10.2", "element-resize-event": "^3.0.3", diff --git a/packages/l7/package.json b/packages/l7/package.json index c9502d9337..aab594d6e9 100644 --- a/packages/l7/package.json +++ b/packages/l7/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7", - "version": "2.5.57", + "version": "2.5.58", "description": "A Large-scale WebGL-powered Geospatial Data Visualization", "main": "lib/index.js", "module": "es/index.js", @@ -25,12 +25,12 @@ "author": "antv", "license": "MIT", "dependencies": { - "@antv/l7-component": "^2.5.57", - "@antv/l7-core": "^2.5.57", - "@antv/l7-layers": "^2.5.57", - "@antv/l7-maps": "^2.5.57", - "@antv/l7-scene": "^2.5.57", - "@antv/l7-utils": "^2.5.57", + "@antv/l7-component": "^2.5.58", + "@antv/l7-core": "^2.5.58", + "@antv/l7-layers": "^2.5.58", + "@antv/l7-maps": "^2.5.58", + "@antv/l7-scene": "^2.5.58", + "@antv/l7-utils": "^2.5.58", "@babel/runtime": "^7.7.7" }, "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31", diff --git a/packages/l7/src/version.ts b/packages/l7/src/version.ts index c72b07fd41..fa5d75e225 100644 --- a/packages/l7/src/version.ts +++ b/packages/l7/src/version.ts @@ -1,2 +1,2 @@ -const version = '2.5.57'; +const version = '2.5.58'; export { version }; diff --git a/packages/layers/package.json b/packages/layers/package.json index ffcbbd1c87..ed0285313e 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-layers", - "version": "2.5.57", + "version": "2.5.58", "description": "L7's collection of built-in layers", "main": "lib/index.js", "module": "es/index.js", @@ -24,9 +24,9 @@ "license": "ISC", "dependencies": { "@antv/geo-coord": "^1.0.8", - "@antv/l7-core": "^2.5.57", - "@antv/l7-source": "^2.5.57", - "@antv/l7-utils": "^2.5.57", + "@antv/l7-core": "^2.5.58", + "@antv/l7-source": "^2.5.58", + "@antv/l7-utils": "^2.5.58", "@babel/runtime": "^7.7.7", "@mapbox/martini": "^0.2.0", "@turf/meta": "^6.0.2", 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/packages/map/package.json b/packages/map/package.json index 248fa7cdb5..447208b0d2 100644 --- a/packages/map/package.json +++ b/packages/map/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-map", - "version": "2.5.57", + "version": "2.5.58", "description": "l7 map", "keywords": [], "author": "thinkinggis ", @@ -37,7 +37,7 @@ }, "homepage": "https://github.com/antvis/L7#readme", "dependencies": { - "@antv/l7-utils": "^2.5.57", + "@antv/l7-utils": "^2.5.58", "@babel/runtime": "^7.7.7", "@mapbox/point-geometry": "^0.1.0", "@mapbox/unitbezier": "^0.0.0", diff --git a/packages/maps/package.json b/packages/maps/package.json index 778921cdca..2bac938d15 100644 --- a/packages/maps/package.json +++ b/packages/maps/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-maps", - "version": "2.5.57", + "version": "2.5.58", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -27,9 +27,9 @@ "license": "ISC", "dependencies": { "@amap/amap-jsapi-loader": "^0.0.3", - "@antv/l7-core": "^2.5.57", - "@antv/l7-map": "^2.5.57", - "@antv/l7-utils": "^2.5.57", + "@antv/l7-core": "^2.5.58", + "@antv/l7-map": "^2.5.58", + "@antv/l7-utils": "^2.5.58", "@babel/runtime": "^7.7.7", "@types/amap-js-api": "^1.4.6", "@types/mapbox-gl": "^1.11.2", diff --git a/packages/mini/package.json b/packages/mini/package.json index c52a65737c..aff9fa6cbe 100644 --- a/packages/mini/package.json +++ b/packages/mini/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-mini", - "version": "2.5.57", + "version": "2.5.58", "description": "A Large-scale WebGL-powered Geospatial Data Visualization", "main": "lib/index.js", "module": "es/index.js", @@ -25,11 +25,11 @@ "author": "antv", "license": "MIT", "dependencies": { - "@antv/l7-core": "^2.5.57", - "@antv/l7-layers": "^2.5.57", - "@antv/l7-maps": "^2.5.57", - "@antv/l7-scene": "^2.5.57", - "@antv/l7-utils": "^2.5.57", + "@antv/l7-core": "^2.5.58", + "@antv/l7-layers": "^2.5.58", + "@antv/l7-maps": "^2.5.58", + "@antv/l7-scene": "^2.5.58", + "@antv/l7-utils": "^2.5.58", "@babel/runtime": "^7.7.7" }, "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31", diff --git a/packages/renderer/package.json b/packages/renderer/package.json index ab6cf06eb0..f41130eed2 100644 --- a/packages/renderer/package.json +++ b/packages/renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-renderer", - "version": "2.5.57", + "version": "2.5.58", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -26,7 +26,7 @@ "gl": "^4.4.0" }, "dependencies": { - "@antv/l7-core": "^2.5.57", + "@antv/l7-core": "^2.5.58", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "l7regl": "^0.0.16", diff --git a/packages/scene/package.json b/packages/scene/package.json index 364905a39c..28b5c350fc 100644 --- a/packages/scene/package.json +++ b/packages/scene/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-scene", - "version": "2.5.57", + "version": "2.5.58", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -23,12 +23,12 @@ "author": "xiaoiver", "license": "ISC", "dependencies": { - "@antv/l7-component": "^2.5.57", - "@antv/l7-core": "^2.5.57", - "@antv/l7-layers": "^2.5.57", - "@antv/l7-maps": "^2.5.57", - "@antv/l7-renderer": "^2.5.57", - "@antv/l7-utils": "^2.5.57", + "@antv/l7-component": "^2.5.58", + "@antv/l7-core": "^2.5.58", + "@antv/l7-layers": "^2.5.58", + "@antv/l7-maps": "^2.5.58", + "@antv/l7-renderer": "^2.5.58", + "@antv/l7-utils": "^2.5.58", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "mapbox-gl": "^1.2.1", diff --git a/packages/source/package.json b/packages/source/package.json index 08be70b741..8df3e08713 100644 --- a/packages/source/package.json +++ b/packages/source/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-source", - "version": "2.5.57", + "version": "2.5.58", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -26,8 +26,8 @@ "license": "ISC", "dependencies": { "@antv/async-hook": "^2.1.0", - "@antv/l7-core": "^2.5.57", - "@antv/l7-utils": "^2.5.57", + "@antv/l7-core": "^2.5.58", + "@antv/l7-utils": "^2.5.58", "@babel/runtime": "^7.7.7", "@mapbox/geojson-rewind": "^0.4.0", "@turf/helpers": "^6.1.4", diff --git a/packages/three/package.json b/packages/three/package.json index 85c71b7343..be9fde68a8 100644 --- a/packages/three/package.json +++ b/packages/three/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-three", - "version": "2.5.57", + "version": "2.5.58", "description": "three for L7 ", "keywords": [ "3D", @@ -44,9 +44,9 @@ }, "homepage": "https://github.com/antvis/L7#readme", "dependencies": { - "@antv/l7-core": "^2.5.57", - "@antv/l7-layers": "^2.5.57", - "@antv/l7-scene": "^2.5.57", + "@antv/l7-core": "^2.5.58", + "@antv/l7-layers": "^2.5.58", + "@antv/l7-scene": "^2.5.58", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "reflect-metadata": "^0.1.13", diff --git a/packages/utils/package.json b/packages/utils/package.json index eed44678b9..5627842f28 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-utils", - "version": "2.5.57", + "version": "2.5.58", "description": "", "main": "lib/index.js", "module": "es/index.js", 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', () => )