feat: 1.新增扫光中心sweepCenter 2.完善扫光Layer配置API和demo (#894)

Co-authored-by: yanxiong <oujinhui.ojh@antgroup.com>

.gitignore

@@ -82,7 +82,6 @@ packages/l7/package_bak.json
 stories/Test
 packages/draw/node_modules/@turf
 packages/district/src/data
-yarn.lock
 
 # npm command lines
 publish.sh

docs/api/layer/cityBuilding.zh.md

@@ -24,6 +24,13 @@ layer.animate(true);
 - baseColor 楼房颜色,
 - windowColor: 窗户颜色,
 - brightColor: 点亮窗户颜色
+- sweep: 圆形扫光扩散动画相关配置项
+  - enable: 是否开启扫光扩散
+  - sweepRadius: 扩散半径
+  - sweepCenter: 扩散中心店坐标
+  - sweepColor: 扩散颜色
+  - sweepSpeed: 扩散速度
+- baseColor: 开启sweep时的基础颜色
 
 其他 style 配置项同
 

examples/gallery/animate/demo/build_sweep.js

@@ -0,0 +1,63 @@
+import { Scene, CityBuildingLayer, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    style: 'dark',
+    center: [ 120.145319, 30.238915 ],
+    pitch: 45,
+    zoom: 12.91,
+    viewMode: '3D'
+  })
+});
+fetch(
+  'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json'
+).then(async res => {
+  const pointLayer = new CityBuildingLayer();
+  pointLayer
+    .source(await res.json())
+    .size('floor', [ 0, 500 ])
+    .color('rgba(242,246,250,1.0)')
+    .animate({
+      enable: true
+    })
+    .active({
+      color: '#0ff',
+      mix: 0.5
+    })
+    .style({
+      opacity: 0.7,
+      baseColor: 'rgb(16, 16, 16)',
+      windowColor: 'rgb(30, 60, 89)',
+      brightColor: 'rgb(255, 176, 38)',
+      sweep: {
+        enable: true,
+        sweepRadius: 2,
+        sweepColor: '#1990FF',
+        sweepSpeed: 0.5,
+        sweepCenter: [ 120.145319, 30.238915 ]
+      }
+    });
+  scene.addLayer(pointLayer);
+});
+
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
+)
+  .then(res => res.json())
+  .then(data => {
+    const layer = new LineLayer({
+      zIndex: 0
+    })
+      .source(data)
+      .size(1)
+      .shape('line')
+      .color('#1990FF')
+      .animate({
+        interval: 1, // 间隔
+        duration: 2, // 持续时间，延时
+        trailLength: 2 // 流线长度
+      });
+    scene.addLayer(layer);
+  });

examples/gallery/animate/demo/meta.json

@@ -39,6 +39,11 @@
       "title": "点亮城市",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7XkWTYQMfPMAAAAAAAAAAABkARQnAQ"
     },
+    {
+      "filename": "build_sweep.js",
+      "title": "圆形扫光城市",
+      "screenshot":"https://gw.alipayobjects.com/mdn/rms_e7e1c6/afts/img/A*LoxeSZHuqXwAAAAAAAAAAAAAARQnAQ"
+    },
     {
       "filename": "animate_line.js",
       "title": "轨迹动画",

package.json

@@ -12,7 +12,7 @@
     "@antv/g2plot": "^2.3.40",
     "@antv/gatsby-theme-antv": "^1.1.15",
     "@antv/l7-district": "^2.3.9",
-    "@antv/l7-draw": "^2.3.40",
+    "@antv/l7-draw": "2.4.18",
     "@antv/l7-react": "^2.3.3",
     "@babel/cli": "^7.6.4",
     "@babel/core": "^7.6.4",

packages/layers/src/citybuliding/models/build.ts

@@ -15,6 +15,7 @@ interface ICityBuildLayerStyleOptions {
     sweepRadius: number;
     sweepColor: string;
     sweepSpeed: number;
+    sweepCenter?: [number, number];
   };
 }
 export default class CityBuildModel extends BaseModel {
@@ -33,10 +34,11 @@ export default class CityBuildModel extends BaseModel {
         sweepRadius: 1,
         sweepColor: 'rgb(255, 255, 255)',
         sweepSpeed: 0.4,
+        sweepCenter: this.cityCenter,
       },
     } = this.layer.getLayerConfig() as ICityBuildLayerStyleOptions;
     return {
-      u_cityCenter: this.cityCenter,
+      u_cityCenter: sweep.sweepCenter || this.cityCenter,
       u_cityMinSize: this.cityMinSize * sweep.sweepRadius,
       u_circleSweep: sweep.enable ? 1.0 : 0.0,
       u_circleSweepColor: rgb2arr(sweep.sweepColor).slice(0, 3),

stories/Map/components/amap2demo_citybuilding.tsx

@@ -1,4 +1,4 @@
-import { CityBuildingLayer, Scene } from '@antv/l7';
+import { CityBuildingLayer, Scene, LineLayer } from '@antv/l7';
 import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
@@ -11,22 +11,22 @@ export default class Amap2demo_citybuilding extends React.Component {
   }
 
   public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/rmsportal/vmvAxgsEwbpoSWbSYvix.json',
-    );
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
         style: 'dark',
-        center: [121.507674, 31.223043],
-        pitch: 65.59312320916906,
-        zoom: 15.4,
+        center: [120.160514, 30.243209],
+        pitch: 45,
+        zoom: 14,
         viewMode: '3D',
       }),
     });
+    fetch(
+      'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json',
+    ).then(async (res) => {
       const pointLayer = new CityBuildingLayer();
       pointLayer
-      .source(await response.json())
+        .source(await res.json())
         .size('floor', [0, 500])
         .color('rgba(242,246,250,1.0)')
         .animate({
@@ -43,13 +43,33 @@ export default class Amap2demo_citybuilding extends React.Component {
           brightColor: 'rgb(255, 176, 38)',
           sweep: {
             enable: true,
-          sweepRadius: 4,
-          sweepColor: 'rgb(0, 100, 100)',
+            sweepRadius: 2,
+            sweepColor: '#1990FF',
             sweepSpeed: 0.5,
           },
         });
       scene.addLayer(pointLayer);
+    });
 
+    fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        const layer = new LineLayer({
+          zIndex: 0,
+        })
+          .source(data)
+          .size(1)
+          .shape('line')
+          .color('#1990FF')
+          .animate({
+            interval: 1, // 间隔
+            duration: 2, // 持续时间，延时
+            trailLength: 2, // 流线长度
+          });
+        scene.addLayer(layer);
+      });
     this.scene = scene;
   }