Merge pull request #398 from antvis/fix_draw_line

Fix draw line

packages/boundry/src/config.ts

@@ -181,17 +181,17 @@ const dataLevel1: { [key: string]: any } = {
         line: {
           type: 'pbf',
           url:
-            '//gw.alipayobjects.com/os/bmw-prod/561e2cfe-9460-42d1-a2f8-3fd2e1274c52.bin',
+            'https://gw.alipayobjects.com/os/bmw-prod/8bfbfe7e-bd0e-4bbe-84d8-629f4dc7abc4.bin',
         },
         cityLine: {
           type: 'pbf',
           url:
-            '//gw.alipayobjects.com/os/bmw-prod/561e2cfe-9460-42d1-a2f8-3fd2e1274c52.bin',
+            'https://gw.alipayobjects.com/os/bmw-prod/8bfbfe7e-bd0e-4bbe-84d8-629f4dc7abc4.bin',
         },
         provinceLine: {
           type: 'pbf',
           url:
-            '//gw.alipayobjects.com/os/bmw-prod/778ad7ba-5a3f-4ed6-a94a-b8ab8acae9d6.bin',
+            'https://gw.alipayobjects.com/os/bmw-prod/778ad7ba-5a3f-4ed6-a94a-b8ab8acae9d6.bin',
         },
       },
       3: {

packages/boundry/src/layer/country.ts

@@ -52,12 +52,23 @@ export default class CountryLayer extends BaseLayer {
     const lineData = await this.fetchData(cfg);
     const border1 = lineData.features.filter((feature: any) => {
       const type = feature.properties.type;
-      return type === '1' || type === '4';
+      return type === '1';
+    });
+    // 香港 澳门
+    const border2 = lineData.features.filter((feature: any) => {
+      const type = feature.properties.type;
+      return type === '4';
     });
     const borderFc = {
       type: 'FeatureCollection',
       features: border1,
     };
+
+    const borderFc2 = {
+      type: 'FeatureCollection',
+      features: border2,
+    };
+
     const nationalBorder = lineData.features.filter((feature: any) => {
       const type = feature.properties.type;
       return type !== '1' && type !== '4';
@@ -66,29 +77,29 @@ export default class CountryLayer extends BaseLayer {
       type: 'FeatureCollection',
       features: nationalBorder,
     };
-    this.addNationBorder(nationalFc, borderFc);
+    this.addNationBorder(nationalFc, borderFc, borderFc2);
   }
 
   // 国界,省界
-  protected addFillLine(lineData: any) {
+  // protected addFillLine(lineData: any) {
-    const border1 = lineData.features.filter((feature: any) => {
+  //   const border1 = lineData.features.filter((feature: any) => {
-      const type = feature.properties.type;
+  //     const type = feature.properties.type;
-      return type === '1' || type === '4';
+  //     return type === '1' || type === '4';
-    });
+  //   });
-    const borderFc = {
+  //   const borderFc = {
-      type: 'FeatureCollection',
+  //     type: 'FeatureCollection',
-      features: border1,
+  //     features: border1,
-    };
+  //   };
-    const nationalBorder = lineData.features.filter((feature: any) => {
+  //   const nationalBorder = lineData.features.filter((feature: any) => {
-      const type = feature.properties.type;
+  //     const type = feature.properties.type;
-      return type !== '1' && type !== '4';
+  //     return type !== '1' && type !== '4';
-    });
+  //   });
-    const nationalFc = {
+  //   const nationalFc = {
-      type: 'FeatureCollection',
+  //     type: 'FeatureCollection',
-      features: nationalBorder,
+  //     features: nationalBorder,
-    };
+  //   };
-    this.addNationBorder(nationalFc, borderFc);
+  //   this.addNationBorder(nationalFc, borderFc);
-  }
+  // }
 
   private async loadData() {
     const { depth } = this.options;
@@ -102,7 +113,11 @@ export default class CountryLayer extends BaseLayer {
     return [fillData, fillLabel];
   }
   // 省级行政区划
-  private async addNationBorder(boundaries: any, boundaries2: any) {
+  private async addNationBorder(
+    boundaries: any,
+    boundaries2: any,
+    boundaries3: any,
+  ) {
     const {
       nationalStroke,
       provinceStroke,
@@ -149,17 +164,31 @@ export default class CountryLayer extends BaseLayer {
       zIndex: zIndex + 0.1,
     })
       .source(boundaries2)
-      .size(nationalWidth)
+      .size(chinaNationalWidth)
       .shape('line')
-      .color('gray')
+      .color(chinaNationalStroke)
       .style({
         lineType: 'dash',
         dashArray: [2, 2],
       });
 
+    // 添加澳门香港界限
+    const lineLayer3 = new LineLayer({
+      zIndex: zIndex + 0.1,
+    })
+      .source(boundaries3)
+      .size(provinceStrokeWidth)
+      .shape('line')
+      .color(provinceStroke)
+      .style({
+        lineType: 'dash',
+        dashArray: [4, 2, 2, 2],
+      });
+
     this.scene.addLayer(lineLayer);
     this.scene.addLayer(lineLayer2);
-    this.layers.push(lineLayer, lineLayer2);
+    this.scene.addLayer(lineLayer3);
+    this.layers.push(lineLayer, lineLayer2, lineLayer3);
   }
   // 市边界
   private async addCityBorder(cfg: any) {

packages/component/src/popup.ts

@@ -208,11 +208,10 @@ export default class Popup extends EventEmitter implements IPopup {
           .split(' ')
           .forEach((name) => this.container.classList.add(name));
       }
-      this.container.addEventListener('mousedown', (e) => {
+      ['mousemove', 'mousedown', 'mouseup', 'click'].forEach((type) => {
-        e.stopPropagation();
+        this.container.addEventListener(type, (e) => {
-      });
+          e.stopPropagation();
-      this.container.addEventListener('click', (e) => {
+        });
-        e.stopPropagation();
       });
     }
     if (maxWidth && this.container.style.maxWidth !== maxWidth) {

packages/draw/src/modes/draw_feature.ts

@@ -58,6 +58,10 @@ export default abstract class DrawFeature extends DrawMode {
     this.on(DrawEvent.CREATE, this.onDrawCreate);
     this.on(DrawEvent.MODE_CHANGE, this.onModeChange);
     document.addEventListener('keydown', this.addKeyDownEvent);
+    if (this.options.data && this.initData()) {
+      this.normalLayer.update(this.source.data);
+      this.normalLayer.enableSelect();
+    }
   }
   public abstract drawFinish(): void;
   public setCurrentFeature(feature: Feature) {
@@ -143,6 +147,9 @@ export default abstract class DrawFeature extends DrawMode {
   protected abstract hideOtherLayer(): void;
 
   protected abstract showOtherLayer(): void;
+  protected initData(): boolean {
+    return false;
+  }
 
   private addDrawPopup(lnglat: ILngLat, dis: number) {
     const popup = new Popup({

packages/draw/src/modes/draw_line.ts

@@ -30,16 +30,39 @@ export default class DrawLine extends DrawPolygon {
     this.pointFeatures = newPointFeture;
     return this.currentFeature;
   }
-  protected createFeature(points: ILngLat[]): Feature {
+  protected createFeature(
-    const pointfeatures = createPoint(this.points);
+    points: ILngLat[],
+    id?: string,
+    active: boolean = true,
+  ): Feature {
+    const pointfeatures = createPoint(points);
     this.pointFeatures = pointfeatures.features;
     const feature = createLine(points, {
-      id: this.getUniqId(),
+      id: id || this.getUniqId(),
       type: 'line',
-      active: true,
+      active,
       pointFeatures: this.pointFeatures,
     });
     this.setCurrentFeature(feature as Feature);
     return feature;
   }
+  protected initData(): boolean {
+    const features: Feature[] = [];
+    this.source.data.features.forEach((feature) => {
+      if (feature.geometry.type === 'LineString') {
+        // @ts-ignore
+        const points = feature.geometry.coordinates.map((coord) => {
+          return {
+            lng: coord[0],
+            lat: coord[1],
+          };
+        });
+        features.push(
+          this.createFeature(points, feature?.properties?.id, false),
+        );
+      }
+    });
+    this.source.data.features = features;
+    return true;
+  }
 }

packages/draw/src/modes/draw_point.ts

@@ -57,15 +57,34 @@ export default class DrawPoint extends DrawFeature {
     };
     return this.currentFeature;
   }
-  protected createFeature(p: ILngLat): Feature {
+  protected createFeature(
+    p: ILngLat,
+    id?: string,
+    active: boolean = true,
+  ): Feature {
     const feature = point([p.lng, p.lat], {
-      id: this.getUniqId(),
+      id: id || this.getUniqId(),
       type: 'point',
+      active,
       pointFeatures: [point([p.lng, p.lat])],
     });
     this.setCurrentFeature(feature as Feature);
     return feature;
   }
+  protected initData(): boolean {
+    const features: Feature[] = [];
+    this.source.data.features.forEach((feature) => {
+      if (feature.geometry.type === 'Point') {
+        const p = {
+          lng: feature.geometry.coordinates[0] as number,
+          lat: feature.geometry.coordinates[1] as number,
+        };
+        features.push(this.createFeature(p, feature?.properties?.id, false));
+      }
+    });
+    this.source.data.features = features;
+    return true;
+  }
 
   protected editFeature(endPoint: ILngLat): void {
     this.createFeature(endPoint);

packages/draw/src/modes/draw_polygon.ts

@@ -29,11 +29,6 @@ export default class DrawPolygon extends DrawFeature {
     this.type = 'polygon';
     this.drawMidVertexLayer = new DrawMidVertex(this);
     this.on(DrawEvent.MODE_CHANGE, this.addMidLayerEvent);
-    if (this.options.data) {
-      this.initData();
-      this.normalLayer.update(this.source.data);
-      this.normalLayer.enableSelect();
-    }
   }
   public enable() {
     super.enable();
@@ -240,6 +235,26 @@ export default class DrawPolygon extends DrawFeature {
         break;
     }
   }
+  protected initData(): boolean {
+    const features: Feature[] = [];
+    this.source.data.features.forEach((feature) => {
+      if (feature.geometry.type === 'Polygon') {
+        const points = (feature.geometry.coordinates[0] as Position[]).map(
+          (coord) => {
+            return {
+              lng: coord[0],
+              lat: coord[1],
+            };
+          },
+        );
+        features.push(
+          this.createFeature(points.slice(1), feature?.properties?.id, false),
+        );
+      }
+    });
+    this.source.data.features = features;
+    return true;
+  }
 
   private editPolygonVertex(id: number, vertex: ILngLat) {
     const feature = this.currentFeature as Feature<Geometries, Properties>;
@@ -259,26 +274,6 @@ export default class DrawPolygon extends DrawFeature {
       featureCollection([this.currentFeature as Feature]),
     );
   }
-
-  private initData() {
-    const features: Feature[] = [];
-    this.source.data.features.forEach((feature) => {
-      if (feature.geometry.type === 'Polygon') {
-        const points = (feature.geometry.coordinates[0] as Position[]).map(
-          (coord) => {
-            return {
-              lng: coord[0],
-              lat: coord[1],
-            };
-          },
-        );
-        features.push(
-          this.createFeature(points.slice(1), feature?.properties?.id, false),
-        );
-      }
-    });
-    this.source.data.features = features;
-  }
 }
 /**
  * draw 端点响应事件

packages/layers/src/line/models/arc.ts

@@ -24,6 +24,9 @@ export default class ArcModel extends BaseModel {
       lineType = 'solid',
       dashArray = [10, 5],
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
+    if (dashArray.length === 2) {
+      dashArray.push(0, 0);
+    }
     return {
       u_opacity: opacity || 1,
       segmentNumber: 30,

packages/layers/src/line/models/arc_3d.ts

@@ -23,6 +23,9 @@ export default class Arc3DModel extends BaseModel {
       lineType = 'solid',
       dashArray = [10, 5],
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
+    if (dashArray.length === 2) {
+      dashArray.push(0, 0);
+    }
     return {
       u_opacity: opacity || 1,
       segmentNumber: 30,

packages/layers/src/line/models/great_circle.ts

@@ -25,6 +25,9 @@ export default class GreatCircleModel extends BaseModel {
       lineType = 'solid',
       dashArray = [10, 5],
     } = this.layer.getLayerConfig() as Partial<ILineLayerStyleOptions>;
+    if (dashArray.length === 2) {
+      dashArray.push(0, 0);
+    }
     return {
       u_opacity: opacity || 1,
       segmentNumber: 30,

packages/layers/src/line/models/line.ts

@@ -22,8 +22,11 @@ export default class LineModel extends BaseModel {
     const {
       opacity,
       lineType = 'solid',
-      dashArray = [10, 5],
+      dashArray = [10, 5, 0, 0],
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
+    if (dashArray.length === 2) {
+      dashArray.push(0, 0);
+    }
     return {
       u_opacity: opacity || 1.0,
       u_line_type: lineStyleObj[lineType],

packages/layers/src/line/shaders/line_arc2d_vert.glsl

@@ -13,8 +13,8 @@ varying vec2 v_normal;
 
 varying float v_distance_ratio;
 uniform float u_line_type: 0.0;
-uniform vec2 u_dash_array: [10.0, 5.];
+uniform vec4 u_dash_array: [10.0, 5., 0, 0];
-varying vec2 v_dash_array;
+varying vec4 v_dash_array;
 
 #pragma include "projection"
 #pragma include "project"

packages/layers/src/line/shaders/line_arc_3d_vert.glsl

@@ -13,9 +13,8 @@ varying vec4 v_color;
 varying vec2 v_normal;
 varying float v_distance_ratio;
 uniform float u_line_type: 0.0;
-uniform vec2 u_dash_array: [10.0, 5.];
+uniform vec4 u_dash_array: [10.0, 5., 0, 0];
-
+varying vec4 v_dash_array;
-varying vec2 v_dash_array;
 
 #pragma include "projection"
 #pragma include "project"

packages/layers/src/line/shaders/line_arc_frag.glsl

@@ -6,7 +6,7 @@ uniform float u_opacity;
 uniform float u_blur : 0.9;
 uniform float u_line_type: 0.0;
 varying vec2 v_normal;
-varying vec2 v_dash_array;
+varying vec4 v_dash_array;
 varying float v_distance_ratio;
 varying vec4 v_color;
 
@@ -21,7 +21,12 @@ void main() {
   // float blur = smoothstep(1.0, u_blur, length(v_normal.xy));
   gl_FragColor.a *= u_opacity;
   if(u_line_type == LineTypeDash) {
-    gl_FragColor.a *= (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
+   float flag = 0.;
+    float dashLength = mod(v_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);
+    if(dashLength < v_dash_array.x || (dashLength > (v_dash_array.x + v_dash_array.y) && dashLength <  v_dash_array.x + v_dash_array.y + v_dash_array.z)) {
+      flag = 1.;
+    }
+    gl_FragColor.a *=flag;
   }
 
   if(u_aimate.x == Animate) {

packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl

@@ -13,8 +13,8 @@ varying vec2 v_normal;
 
 varying float v_distance_ratio;
 uniform float u_line_type: 0.0;
-uniform vec2 u_dash_array: [10.0, 5.];
+uniform vec4 u_dash_array: [10.0, 5., 0, 0];
-varying vec2 v_dash_array;
+varying vec4 v_dash_array;
 
 #pragma include "projection"
 #pragma include "project"

packages/layers/src/line/shaders/line_arc_vert.glsl

@@ -13,8 +13,8 @@ varying vec2 v_normal;
 
 varying float v_distance_ratio;
 uniform float u_line_type: 0.0;
-uniform vec2 u_dash_array: [10.0, 5.];
+uniform vec4 u_dash_array: [10.0, 5., 0, 0];
-varying vec2 v_dash_array;
+varying vec4 v_dash_array;
 #pragma include "projection"
 #pragma include "project"
 #pragma include "picking"

packages/layers/src/line/shaders/line_bezier_vert.glsl

@@ -13,8 +13,8 @@ varying vec2 v_normal;
 
 varying float v_distance_ratio;
 uniform float u_line_type: 0.0;
-uniform vec2 u_dash_array: [10.0, 5.];
+uniform vec4 u_dash_array: [10.0, 5., 0, 0];
-varying vec2 v_dash_array;
+varying vec4 v_dash_array;
 #pragma include "projection"
 #pragma include "project"
 #pragma include "picking"

packages/layers/src/line/shaders/line_frag.glsl

@@ -12,7 +12,7 @@ varying vec2 v_normal;
 uniform float u_dash_offset : 0.0;
 uniform float u_dash_ratio : 0.1;
 varying float v_distance_ratio;
-varying vec2 v_dash_array;
+varying vec4 v_dash_array;
 varying float v_side;
 
 
@@ -35,7 +35,13 @@ void main() {
   }
  // dash line
   if(u_line_type == LineTypeDash) {
-    gl_FragColor.a *=(1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
+    float flag = 0.;
+    float dashLength = mod(v_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);
+    if(dashLength < v_dash_array.x || (dashLength > (v_dash_array.x + v_dash_array.y) && dashLength <  v_dash_array.x + v_dash_array.y + v_dash_array.z)) {
+      flag = 1.;
+    }
+    gl_FragColor.a *=flag;
+    // gl_FragColor.a *=(1.0- step(v_dash_array.x, mod(v_distance_ratio, dashLength)));
   }
 
   gl_FragColor = filterColor(gl_FragColor);

packages/layers/src/line/shaders/line_vert.glsl

@@ -14,14 +14,14 @@ attribute float a_Distance;
 
 uniform mat4 u_ModelMatrix;
 uniform float u_line_type: 0.0;
-uniform vec2 u_dash_array: [10.0, 5.];
+uniform vec4 u_dash_array: [10.0, 5.，0, 0];
 uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 
 #pragma include "projection"
 #pragma include "picking"
 
 varying vec4 v_color;
-varying vec2 v_dash_array;
+varying vec4 v_dash_array;
 varying vec2 v_normal;
 varying float v_distance_ratio;
 varying float v_side;

packages/maps/src/mapbox/map.ts

@@ -27,6 +27,7 @@ import mapboxgl, { IControl, Map } from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { IMapboxInstance } from '../../typings/index';
 import Viewport from './Viewport';
+window.mapboxgl = mapboxgl;
 const EventMap: {
   [key: string]: any;
 } = {
@@ -239,10 +240,11 @@ export default class MapboxService
     lnglat: [number, number],
     altitude: number,
   ): IMercator {
-    const { x = 0, y = 0, z = 0 } = mapboxgl.MercatorCoordinate.fromLngLat(
+    const {
-      lnglat,
+      x = 0,
-      altitude,
+      y = 0,
-    );
+      z = 0,
+    } = window.mapboxgl.MercatorCoordinate.fromLngLat(lnglat, altitude);
     return { x, y, z };
   }
   public getModelMatrix(
@@ -252,7 +254,7 @@ export default class MapboxService
     scale: [number, number, number] = [1, 1, 1],
     origin: IMercator = { x: 0, y: 0, z: 0 },
   ): number[] {
-    const modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(
+    const modelAsMercatorCoordinate = window.mapboxgl.MercatorCoordinate.fromLngLat(
       lnglat,
       altitude,
     );
@@ -302,7 +304,7 @@ export default class MapboxService
      */
 
     // 判断全局 mapboxgl 对象的加载
-    if (!mapInstance && !mapboxgl) {
+    if (!mapInstance && !window.mapboxgl) {
       // 用户有时传递进来的实例是继承于 mapbox 实例化的，不一定是 mapboxgl 对象。
       this.logger.error(this.configService.getSceneWarninfo('SDK'));
     }
@@ -310,16 +312,16 @@ export default class MapboxService
     if (
       token === MAPBOX_API_KEY &&
       style !== 'blank' &&
-      !mapboxgl.accessToken &&
+      !window.mapboxgl.accessToken &&
       !mapInstance // 如果用户传递了 mapInstance，应该不去干预实例的 accessToken。
     ) {
       this.logger.warn(this.configService.getSceneWarninfo('MapToken'));
     }
 
     // 判断是否设置了 accessToken
-    if (!mapInstance && !mapboxgl.accessToken) {
+    if (!mapInstance && !window.mapboxgl.accessToken) {
       // 用户有时传递进来的实例是继承于 mapbox 实例化的，不一定是 mapboxgl 对象。
-      mapboxgl.accessToken = token;
+      window.mapboxgl.accessToken = token;
     }
 
     if (mapInstance) {
@@ -329,7 +331,7 @@ export default class MapboxService
     } else {
       this.$mapContainer = this.creatAmapContainer(id);
       // @ts-ignore
-      this.map = new mapboxgl.Map({
+      this.map = new window.mapboxgl.Map({
         container: this.$mapContainer,
         style: this.getMapStyle(style),
         attributionControl,

stories/District/Layer/country_city.tsx

@@ -26,21 +26,16 @@ export default class Country extends React.Component {
     scene.on('loaded', () => {
       const Layer = new CountryLayer(scene, {
         data: [],
+        geoDataLevel: 2,
         depth: 2,
-        stroke: '#fff',
+        provinceStroke: '#783D2D',
+        cityStroke: '#EBCCB4',
         coastlineWidth: 0.5,
         nationalWidth: 0.5,
         fill: {
           color: {
             field: 'NAME_CHN',
-            values: [
+            values: ['#D92568', '#E3507E', '#FC7AAB', '#F1D3E5', '#F2EEFF'],
-              '#feedde',
-              '#fdd0a2',
-              '#fdae6b',
-              '#fd8d3c',
-              '#e6550d',
-              '#a63603',
-            ],
           },
         },
         popup: {

stories/Draw/Components/DrawLine.tsx

@@ -16,36 +16,37 @@ export default class Circle extends React.Component {
       map: new Mapbox({
         pitch: 0,
         style: 'light',
-        center: [113.775374, 28.31067],
+        center: [79.8046875, 52.482780222078226],
-        zoom: 12,
+        zoom: 4,
       }),
     });
     this.scene = scene;
-    const linneData = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          properties: {},
-          geometry: {
-            type: 'LineString',
-            coordinates: [
-              [79.8046875, 52.482780222078226],
-              [110.74218749999999, 36.87962060502676],
-              [111.4453125, 19.973348786110602],
-              [112.8515625, 9.795677582829743],
-              [95.2734375, -6.664607562172573],
-              [82.265625, -14.264383087562637],
-              [74.53125, -25.799891182088306],
-              [68.203125, -30.145127183376115],
-              [41.484375, -16.63619187839765],
-            ],
-          },
-        },
-      ],
-    };
     const line = scene.on('loaded', () => {
-      const drawLine = new DrawLine(scene);
+      const drawLine = new DrawLine(scene, {
+        data: {
+          type: 'FeatureCollection',
+          features: [
+            {
+              type: 'Feature',
+              properties: {},
+              geometry: {
+                type: 'LineString',
+                coordinates: [
+                  [79.8046875, 52.482780222078226],
+                  [110.74218749999999, 36.87962060502676],
+                  [111.4453125, 19.973348786110602],
+                  [112.8515625, 9.795677582829743],
+                  [95.2734375, -6.664607562172573],
+                  [82.265625, -14.264383087562637],
+                  [74.53125, -25.799891182088306],
+                  [68.203125, -30.145127183376115],
+                  [41.484375, -16.63619187839765],
+                ],
+              },
+            },
+          ],
+        },
+      });
       drawLine.enable();
     });
   }

stories/Draw/Components/DrawPoint.tsx

@@ -23,7 +23,37 @@ export default class Circle extends React.Component {
     this.scene = scene;
 
     scene.on('loaded', () => {
-      const drawPoint = new DrawPoint(scene);
+      const drawPoint = new DrawPoint(scene, {
+        data: {
+          type: 'FeatureCollection',
+          features: [
+            {
+              type: 'Feature',
+              properties: {},
+              geometry: {
+                type: 'Point',
+                coordinates: [88.9453125, 53.330872983017066],
+              },
+            },
+            {
+              type: 'Feature',
+              properties: {},
+              geometry: {
+                type: 'Point',
+                coordinates: [109.3359375, 28.613459424004414],
+              },
+            },
+            {
+              type: 'Feature',
+              properties: {},
+              geometry: {
+                type: 'Point',
+                coordinates: [97.734375, 35.460669951495305],
+              },
+            },
+          ],
+        },
+      });
       drawPoint.enable();
     });
   }

stories/Layers/components/Polygon3D.tsx

@@ -40,7 +40,7 @@ export default class Polygon3D extends React.Component {
     const layer = new PolygonLayer({})
       .source(await response.json())
       .shape('extrude')
-      .size('h20', [100, 120, 160, 200, 260, 500])
+      .size('h20', [10, 12, 16, 20, 26, 50])
       .active({ color: 'blue' })
       .color('h20', [
         '#816CAD',

stories/Layers/components/dash.tsx

@@ -1,5 +1,5 @@
 import { LineLayer, Scene } from '@antv/l7';
-import { Mapbox, GaodeMap } from '@antv/l7-maps';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class DashLineDemo extends React.Component {
@@ -46,7 +46,8 @@ export default class DashLineDemo extends React.Component {
         ].reverse(),
       )
       .style({
-        // lineType: 'dash',
+        lineType: 'dash',
+        dashArray: [4, 2, 2, 2],
         opacity: 1.0,
       });
 

stories/Layers/components/polygon.tsx

@@ -114,7 +114,7 @@ export default class TextLayerDemo extends React.Component {
 
     const scene = new Scene({
       id: 'map',
-      map: new Mapbox({
+      map: new GaodeMap({
         center: [120.19382669582967, 30.258134],
         pitch: 0,
         style: 'blank',
@@ -127,10 +127,11 @@ export default class TextLayerDemo extends React.Component {
           type: 'FeatureCollection',
           features: [],
         })
-        .shape('fill')
+        .shape('extrude')
         .scale('childrenNum', {
           type: 'quantile',
         })
+        .size('childrenNum', [10, 100000000])
         // .color('red')
         .color('childrenNum', [
           '#D92568',

stories/Source/components/multiPolygon.tsx

@@ -1,5 +1,5 @@
 import { LineLayer, PolygonLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
 function convertRGB2Hex(rgb: number[]) {
@@ -27,17 +27,57 @@ export default class MultiPolygon extends React.Component {
       map: new GaodeMap({
         pitch: 0,
         style: 'dark',
-        center: [121.775374, 31.31067],
+        center: [118.70796203613281, 31.84956532831343],
-        zoom: 5,
+        zoom: 12,
       }),
     });
     const data = await response.json();
     // console.log(data.features[5]);
     // data.features = data.features.slice(6);
-    const layer = new LineLayer()
+    const layer = new PolygonLayer()
-      .source(data)
+      .source({
-      .shape('line')
+        type: 'FeatureCollection',
-      .size(1)
+        features: [
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'Polygon',
+              coordinates: [
+                [
+                  [118.70796203613281, 31.84956532831343],
+                  [118.67019653320312, 31.783049527817784],
+                  [118.70384216308594, 31.757947795369688],
+                  [118.7944793701172, 31.79647323968844],
+                  [118.78829956054686, 31.85073184447357],
+                  [118.70796203613281, 31.84956532831343],
+                ],
+              ],
+            },
+          },
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'Polygon',
+              coordinates: [
+                [
+                  [116.96044921875, 29.38217507514529],
+                  [114.41162109375, 30.315987718557867],
+                  [114.78515624999999, 28.43971381702788],
+                  [114.93896484374999, 27.0982539061379],
+                  [116.98242187499999, 27.01998400798257],
+                  [119.20166015625, 28.091366281406945],
+                  [119.17968749999999, 29.38217507514529],
+                  [116.96044921875, 29.38217507514529],
+                ],
+              ],
+            },
+          },
+        ],
+      })
+      .shape('extrude')
+      .size(10)
       .color('red')
       .style({
         opacity: 1.0,