Shihui dev (#850)

* feat: 优化 pointLayer shape 切换时 2d/3d 无法成功切换

* style: lint style

lerna.json

@@ -14,7 +14,7 @@
       "message": "chore: publish"
     }
   },
-  "version": "2.5.57",
+  "version": "2.5.58",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "publishConfig": {

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-core": "^2.5.58",
-    "@antv/l7-utils": "^2.5.57",
+    "@antv/l7-utils": "^2.5.58",
     "@babel/runtime": "^7.7.7",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",

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",

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-component": "^2.5.58",
-    "@antv/l7-core": "^2.5.57",
+    "@antv/l7-core": "^2.5.58",
-    "@antv/l7-layers": "^2.5.57",
+    "@antv/l7-layers": "^2.5.58",
-    "@antv/l7-maps": "^2.5.57",
+    "@antv/l7-maps": "^2.5.58",
-    "@antv/l7-scene": "^2.5.57",
+    "@antv/l7-scene": "^2.5.58",
-    "@antv/l7-utils": "^2.5.57",
+    "@antv/l7-utils": "^2.5.58",
     "@babel/runtime": "^7.7.7"
   },
   "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

packages/l7/src/version.ts

@@ -1,2 +1,2 @@
-const version = '2.5.57';
+const version = '2.5.58';
 export { version };

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-core": "^2.5.58",
-    "@antv/l7-source": "^2.5.57",
+    "@antv/l7-source": "^2.5.58",
-    "@antv/l7-utils": "^2.5.57",
+    "@antv/l7-utils": "^2.5.58",
     "@babel/runtime": "^7.7.7",
     "@mapbox/martini": "^0.2.0",
     "@turf/meta": "^6.0.2",

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;
+      }
+    });
+  }
+}

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 <lzx199065@gmail.com>",
@@ -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",

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-core": "^2.5.58",
-    "@antv/l7-map": "^2.5.57",
+    "@antv/l7-map": "^2.5.58",
-    "@antv/l7-utils": "^2.5.57",
+    "@antv/l7-utils": "^2.5.58",
     "@babel/runtime": "^7.7.7",
     "@types/amap-js-api": "^1.4.6",
     "@types/mapbox-gl": "^1.11.2",

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-core": "^2.5.58",
-    "@antv/l7-layers": "^2.5.57",
+    "@antv/l7-layers": "^2.5.58",
-    "@antv/l7-maps": "^2.5.57",
+    "@antv/l7-maps": "^2.5.58",
-    "@antv/l7-scene": "^2.5.57",
+    "@antv/l7-scene": "^2.5.58",
-    "@antv/l7-utils": "^2.5.57",
+    "@antv/l7-utils": "^2.5.58",
     "@babel/runtime": "^7.7.7"
   },
   "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

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",

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-component": "^2.5.58",
-    "@antv/l7-core": "^2.5.57",
+    "@antv/l7-core": "^2.5.58",
-    "@antv/l7-layers": "^2.5.57",
+    "@antv/l7-layers": "^2.5.58",
-    "@antv/l7-maps": "^2.5.57",
+    "@antv/l7-maps": "^2.5.58",
-    "@antv/l7-renderer": "^2.5.57",
+    "@antv/l7-renderer": "^2.5.58",
-    "@antv/l7-utils": "^2.5.57",
+    "@antv/l7-utils": "^2.5.58",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "mapbox-gl": "^1.2.1",

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-core": "^2.5.58",
-    "@antv/l7-utils": "^2.5.57",
+    "@antv/l7-utils": "^2.5.58",
     "@babel/runtime": "^7.7.7",
     "@mapbox/geojson-rewind": "^0.4.0",
     "@turf/helpers": "^6.1.4",

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-core": "^2.5.58",
-    "@antv/l7-layers": "^2.5.57",
+    "@antv/l7-layers": "^2.5.58",
-    "@antv/l7-scene": "^2.5.57",
+    "@antv/l7-scene": "^2.5.58",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "reflect-metadata": "^0.1.13",

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",

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/>)