fix(demo): bugs

examples/heatmap/grid/demo/meta.json

@@ -6,11 +6,13 @@
   "demos": [
     {
       "filename": "grid.js",
-      "title": "网格热力图"
+      "title": "网格热力图",
+      "screenshot":""
     },
     {
       "filename": "world.js",
-      "title": "世界电厂热力图"
+      "title": "世界电厂热力图",
+      "screenshot":""
     }
   ]
 }

examples/heatmap/heatmap/demo/meta.json

@@ -6,11 +6,13 @@
   "demos": [
     {
       "filename": "world3d.js",
-      "title": "经典热力图3D"
+      "title": "经典热力图3D",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*NxFPSrd9oscAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "world.js",
-      "title": "经典热力图2D"
+      "title": "经典热力图2D",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9zUcSK07PHgAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/heatmap/heatmap/demo/world.js

@@ -4,11 +4,10 @@ const scene = new Scene({
   id: 'map',
   style: 'dark',
   pitch: 0,
-  center: [103.693879, 34.38704],
+  center: [127.5671666579043,7.445038892195569],
   type: 'mapbox',
-  zoom: 3.69,
+  zoom: 2.632456779444394
 });
-
 fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
   .then((res) => res.json())
   .then((data) => {
@@ -21,7 +20,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842
           radius: 20,
           opacity: 1.0,
           rampColors: {
-            colors: ['#2E8AE6', '#69D1AB', '#DAF291', '#FFD591', '#FF7A45', '#CF1D49'],
+            colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(),
             positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]
           }
         })

examples/heatmap/heatmap/demo/world3d.js

@@ -24,7 +24,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64
         radius: 5,
         opacity: 1.0,
         rampColors: {
-          colors: [
+          colors:[
             '#2E8AE6',
             '#69D1AB',
             '#DAF291',

examples/heatmap/hexagon/demo/light.js

@@ -65,9 +65,15 @@ const colorObj = {
     '#5B8EF8', '#FCF6FA',
     '#F5E4EF', '#F7CDDF',
     '#ED9CBE', '#D1749B'
-  ]
+  ],
+  color4: [ '#421EB2', '#8C1EB2', '#F27DEB', '#FFF598', '#F7B74A', '#FF4818' ],
+  colors6: [ '#FBE0B2', '#F6BB91', '#F88E8B', '#5C6CE5', '#110A6C', '#0D0943' ],
+  colors5: [ '#F86A7E', '#F79794', '#D0A8AD', '#8596A4', '#0D7D9E', '#07485B' ],
+  colors11: [ '#005F6D', '#0F9EA3', '#B9CDC5', '#DF881C', '#AE571E', '#6C2C03' ],
+  colors7: [ '#D66A74', '#EF808B', '#F09FAF', '#B1C987', '#789676', '#636C58' ],
+  colors8: [ '#5E023A', '#C52C6A', '#F0C4E8', '#F7CAB8', '#7EBCA9', '#117D8D' ],
+  colors9: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ]
 }
-
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
 )

examples/line/arc/demo/arc.js

@@ -5,7 +5,7 @@ const scene = new Scene({
   pitch: 0,
   type: 'mapbox',
   style: 'dark',
-  center: [102.602992, 23.107329],
+  center: [0., 23.107329],
   zoom: 0,
 });
 

examples/line/arc/demo/meta.json

@@ -11,13 +11,14 @@
 
     },
     {
-      "filename": "arcCircle.js",
+      "filename": "arc.js",
-      "title": "大圆弧线"
+      "title": "弧线",
-
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ"
     },
     {
-      "filename": "arc.js",
+      "filename": "arcCircle.js",
-      "title": "弧线"
+      "title": "大圆弧线",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ"
 
     }
   ]

examples/line/line/demo/ele.js

@@ -0,0 +1,42 @@
+import { Scene } from '@l7/scene';
+import { LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [102.602992, 23.107329],
+  zoom: 14,
+});
+
+fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new LineLayer({
+      })
+        .source(data)
+        .size('ELEV', (h) => {
+          return [h % 50 === 0 ? 1.0 : 0.5, (h -1300) *20 ];
+        })
+        .shape('line')
+        .scale('ELEV', {
+          type: 'quantize'
+        })
+        .color(
+          'ELEV',
+          [ '#E4682F',
+            '#FF8752',
+            '#FFA783',
+            '#FFBEA8',
+            '#FFDCD6',
+            '#EEF3FF',
+            '#C8D7F5',
+            '#A5C1FC',
+            '#7FA7F9',
+            '#5F8AE5' ].reverse()
+        )
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });

examples/line/line/demo/ele_dark.js

@@ -0,0 +1,42 @@
+import { Scene } from '@l7/scene';
+import { LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'dark',
+  center: [102.602992, 23.107329],
+  zoom: 14,
+});
+
+fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new LineLayer({
+      })
+        .source(data)
+        .size('ELEV', (h) => {
+          return [h % 50 === 0 ? 1.0 : 0.5, (h -1300) *20 ];
+        })
+        .shape('line')
+        .scale('ELEV', {
+          type: 'quantize'
+        })
+        .color(
+          'ELEV',
+          [ '#E4682F',
+            '#FF8752',
+            '#FFA783',
+            '#FFBEA8',
+            '#FFDCD6',
+            '#EEF3FF',
+            '#C8D7F5',
+            '#A5C1FC',
+            '#7FA7F9',
+            '#5F8AE5' ].reverse()
+        )
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });

examples/line/line/demo/linedash.js

@@ -0,0 +1,28 @@
+import { Scene } from '@l7/scene';
+import { LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [102.602992, 33.107329],
+  zoom: 3.5,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new LineLayer({
+      })
+        .source(data)
+        .scale('value',{
+          type: 'quantile'
+        })
+        .size('value', [0.5, 1, 1.5, 2])
+        .shape('line')
+        .color('value', ['#FFF2E8', '#FFCEA7', '#F0A66C', '#CC464B', '#8A191A'])
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });

examples/line/line/demo/meta.json

@@ -0,0 +1,24 @@
+{
+  "title": {
+    "zh": "线图层",
+    "en": "line"
+  },
+  "demos": [
+    {
+      "filename": "ele.js",
+      "title": "等高线",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*FGliTJ7eSBIAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "ele_dark.js",
+      "title": "等高线",
+      "screenshot":""
+    },
+    {
+      "filename": "linedash.js",
+      "title": "等高线",
+      "screenshot":""
+    }
+
+  ]
+}

examples/line/line/index.zh.md

@@ -0,0 +1,6 @@
+---
+title: 等值线
+order: 0
+redirect_from:
+  - /zh/examples/line/
+---

examples/point/chartmap/demo/meta.json

@@ -7,7 +7,7 @@
     {
       "filename": "normal.js",
       "title": "海量点",
-      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Kva7R7AimzsAAAAAAAAAAABkARQnAQ"
+      "screenshot":""
 
     }
   ]

examples/point/scatter/demo/meta.json

@@ -8,7 +8,16 @@
       "filename": "normal.js",
       "title": "海量点",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Kva7R7AimzsAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "scatter.js",
+      "title": "定点图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*s5lpTYp2hZYAAAAAAAAAAABkARQnAQ"
 
     }
+
+
+
+
   ]
 }

examples/point/scatter/index.zh.md

@@ -1,4 +1,4 @@
 ---
-title: "散点地图"
+title: "等值线"
 order: 1
 ---

packages/core/src/services/layer/StyleAttributeService.ts

@@ -4,7 +4,7 @@ import { gl } from '../renderer/gl';
 import { IAttribute } from '../renderer/IAttribute';
 import { IElements } from '../renderer/IElements';
 import { IRendererService } from '../renderer/IRendererService';
-import { IParseDataItem } from '../source/ISourceService'
+import { IParseDataItem } from '../source/ISourceService';
 import { ILayer } from './ILayerService';
 import {
   IEncodeFeature,
@@ -216,10 +216,11 @@ export default class StyleAttributeService implements IStyleAttributeService {
       ) {
         descriptors.forEach((descriptor, attributeIdx) => {
           if (descriptor && descriptor.update) {
-            const normal = normalsForCurrentFeature?.slice(
+            const normal =
+              normalsForCurrentFeature?.slice(
                 vertexIdx * 3,
                 vertexIdx * 3 + 3,
-            )|| [];
+              ) || [];
             (descriptor.buffer.data as number[]).push(
               ...descriptor.update(
                 feature,

packages/core/src/services/renderer/passes/PixelPickingPass.ts

@@ -24,7 +24,8 @@ function decodePickingColor(color: Uint8Array): number {
  * @see https://github.com/antvis/L7/blob/next/dev-docs/PixelPickingEngine.md
  */
 @injectable()
-export default class PixelPickingPass<InitializationOptions = {}> implements IPass<InitializationOptions> {
+export default class PixelPickingPass<InitializationOptions = {}>
+  implements IPass<InitializationOptions> {
   @lazyInject(TYPES.IRendererService)
   protected readonly rendererService: IRendererService;
 
@@ -132,7 +133,12 @@ export default class PixelPickingPass<InitializationOptions = {}> implements IPa
 
     const xInDevicePixel = x * window.devicePixelRatio;
     const yInDevicePixel = y * window.devicePixelRatio;
-    if (xInDevicePixel > width || xInDevicePixel < 0 || yInDevicePixel > height || yInDevicePixel < 0) {
+    if (
+      xInDevicePixel > width ||
+      xInDevicePixel < 0 ||
+      yInDevicePixel > height ||
+      yInDevicePixel < 0
+    ) {
       return;
     }
 
@@ -214,7 +220,9 @@ export default class PixelPickingPass<InitializationOptions = {}> implements IPa
     const { clear, useFramebuffer } = this.rendererService;
 
     // 先输出到 PostProcessor
-    const readFBO = this.layer.multiPassRenderer.getPostProcessor().getReadFBO();
+    const readFBO = this.layer.multiPassRenderer
+      .getPostProcessor()
+      .getReadFBO();
     this.layer.hooks.beforeRender.call();
     useFramebuffer(readFBO, () => {
       clear({

packages/core/src/shaders/projection.glsl

@@ -141,10 +141,11 @@ vec4 project_common_position_to_clipspace(vec4 position) {
 
 vec4 unproject_clipspace_to_position(vec4 clipspacePos, mat4 u_InverseViewProjectionMatrix) {
   vec4 pos = u_InverseViewProjectionMatrix * (clipspacePos - u_ViewportCenterProjection);
+
   if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET ||
     u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
     // Needs to be divided with project_uCommonUnitsPerMeter
-    pos.w /= u_PixelsPerMeter.z;
+     pos.w = pos.w / u_PixelsPerMeter.z;
   }
   return pos;
 }

packages/core/src/utils/vertex-compression.ts

@@ -85,7 +85,12 @@ export function packCircleVertex(
     packUint8ToFloat(strokeColor[2], strokeColor[3]),
   ];
 
-  [[-1, -1], [1, -1], [1, 1], [-1, 1]].forEach(([extrudeX, extrudeY]) => {
+  [
+    [-1, -1],
+    [1, -1],
+    [1, 1],
+    [-1, 1],
+  ].forEach(([extrudeX, extrudeY]) => {
     // vec4(
     //   color,
     //   color,

packages/layers/src/core/BaseLayer.ts

@@ -53,9 +53,7 @@ let layerIdCounter = 0;
 /**
  * Layer 基类默认样式属性
  */
-const defaultLayerInitializationOptions: Partial<
+const defaultLayerInitializationOptions: Partial<ILayerInitializationOptions> = {
-  ILayerInitializationOptions
-> = {
   minZoom: 0,
   maxZoom: 20,
   visible: true,
@@ -378,7 +376,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   public fitBounds(): void {
     const source = this.getSource();
     const extent = source.extent;
-    this.map.fitBounds([[extent[0], extent[1]], [extent[2], extent[3]]]);
+    this.map.fitBounds([
+      [extent[0], extent[1]],
+      [extent[2], extent[3]],
+    ]);
   }
 
   public destroy() {

packages/layers/src/core/triangulation.ts

@@ -79,7 +79,10 @@ export function LineTriangulation(feature: IEncodeFeature) {
 
 export function PolygonExtrudeTriangulation(feature: IEncodeFeature) {
   const coordinates = feature.coordinates as IPosition[][];
-  const { positions, index, normals } = extrude_PolygonNormal(coordinates, true);
+  const { positions, index, normals } = extrude_PolygonNormal(
+    coordinates,
+    true,
+  );
 
   return {
     vertices: positions, // [ x, y, z ]
@@ -92,9 +95,9 @@ export function PolygonExtrudeTriangulation(feature: IEncodeFeature) {
 export function HeatmapGridTriangulation(feature: IEncodeFeature) {
   const { shape } = feature;
 
-  const { positions, index } = getHeatmapGeometry(shape as
+  const { positions, index } = getHeatmapGeometry(
-    | ShapeType2D
+    shape as ShapeType2D | ShapeType3D,
-    | ShapeType3D);
+  );
   return {
     vertices: positions, // [ x, y, z ] 多边形顶点
     indices: index,

packages/layers/src/heatmap/heatmap.ts

@@ -56,7 +56,9 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
 
   protected renderModels() {
     const { clear, useFramebuffer } = this.rendererService;
-    const shapeAttr = this.styleAttributeService.getLayerStyleAttribute('shape');
+    const shapeAttr = this.styleAttributeService.getLayerStyleAttribute(
+      'shape',
+    );
     const shapeType = shapeAttr?.scale?.field || 'heatmap';
     useFramebuffer(this.heatmapFramerBuffer, () => {
       clear({
@@ -68,18 +70,23 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
       this.drawIntensityMode();
     });
     // this.draw3DHeatMap();
-    shapeType === 'heatmap' ? this.drawColorMode(): this.draw3DHeatMap();
+    shapeType === 'heatmap' ? this.drawColorMode() : this.draw3DHeatMap();
     // this.drawIntensityMode();
     return this;
   }
 
   protected buildModels() {
-    const shapeAttr = this.styleAttributeService.getLayerStyleAttribute('shape');
+    const shapeAttr = this.styleAttributeService.getLayerStyleAttribute(
+      'shape',
+    );
     const shapeType = shapeAttr?.scale?.field || 'heatmap';
     this.registerBuiltinAttributes(this);
     this.intensityModel = this.buildHeatMapIntensity();
     this.models = [this.intensityModel];
-    this.colorModel = shapeType === 'heatmap' ? this.buildHeatmapColor(): this.build3dHeatMap();
+    this.colorModel =
+      shapeType === 'heatmap'
+        ? this.buildHeatmapColor()
+        : this.build3dHeatMap();
     this.models.push(this.colorModel);
     const { rampColors } = this.getStyleOptions();
     const imageData = generateColorRamp(rampColors as IColorRamp);

packages/layers/src/plugins/DataMappingPlugin.ts

@@ -89,7 +89,10 @@ export default class DataMappingPlugin implements ILayerPlugin {
     const params: unknown[] = [];
 
     scalers.forEach(({ field }) => {
-       if (record.hasOwnProperty(field) || attribute.scale?.type ==='variable') {
+      if (
+        record.hasOwnProperty(field) ||
+        attribute.scale?.type === 'variable'
+      ) {
         params.push(record[field]);
       }
     });

packages/layers/src/plugins/FeatureScalePlugin.ts

@@ -48,7 +48,7 @@ export default class FeatureScalePlugin implements ILayerPlugin {
     [field: string]: IStyleScale;
   } = {};
 
-  private scaleOptions: IScaleOptions = {}
+  private scaleOptions: IScaleOptions = {};
 
   public apply(layer: ILayer) {
     layer.hooks.init.tap('FeatureScalePlugin', () => {
@@ -73,9 +73,8 @@ export default class FeatureScalePlugin implements ILayerPlugin {
       }
     });
   }
-  private isNumber(n:any) {
+  private isNumber(n: any) {
     return !isNaN(parseFloat(n)) && isFinite(n);
-
   }
 
   private caculateScalesForAttributes(
@@ -88,11 +87,12 @@ export default class FeatureScalePlugin implements ILayerPlugin {
         // 创建Scale
         const attributeScale = attribute.scale;
         const type = attribute.name;
-        attributeScale.names=  this.parseFields(attribute!.scale!.field || []);
+        attributeScale.names = this.parseFields(attribute!.scale!.field || []);
-        const scales: IStyleScale[] = attributeScale.names
+        const scales: IStyleScale[] = attributeScale.names.map(
-        .map((field:string) => {
+          (field: string) => {
             return this.getOrCreateScale(field, attribute, dataArray);
-        })
+          },
+        );
 
         // 为scales 设置值区间
         if (scales.some((scale) => scale.type === StyleScaleType.VARIABLE)) {
@@ -100,22 +100,21 @@ export default class FeatureScalePlugin implements ILayerPlugin {
           scales.forEach((scale) => {
             // 如果设置了回调, 这不需要设置让range
             if (!attributeScale.callback) {
-              if(attributeScale.values) {
+              if (attributeScale.values) {
-                if(scale.option?.type==='linear' && attributeScale.values.length > 2) {
+                if (
-                  const tick =scale.scale.ticks(attributeScale.values.length);
+                  scale.option?.type === 'linear' &&
-                  if(type === 'color'){
+                  attributeScale.values.length > 2
-                      scale.scale.domain(tick)
+                ) {
+                  const tick = scale.scale.ticks(attributeScale.values.length);
+                  if (type === 'color') {
+                    scale.scale.domain(tick);
                   }
-                  
                 }
                 scale.scale.range(attributeScale.values);
-
+              } else if (scale.option?.type === 'cat') {
-              } else if(scale.option?.type==='cat') { 
-               
                 // 如果没有设置初值且 类型为cat，range ==domain;
                 scale.scale.range(scale.option.domain);
               }
-             
             }
           });
         } else {
@@ -125,16 +124,15 @@ export default class FeatureScalePlugin implements ILayerPlugin {
             return scale.scale(attributeScale.names[index]);
           });
         }
-        attributeScale.scalers = scales.map((scale: IStyleScale)=> {
+        attributeScale.scalers = scales.map((scale: IStyleScale) => {
           return {
             field: scale.field,
             func: scale.scale,
-          }
+          };
         });
 
         attribute.needRescale = false;
       }
-
     });
   }
   private getOrCreateScale(
@@ -142,7 +140,7 @@ export default class FeatureScalePlugin implements ILayerPlugin {
     attribute: IStyleAttribute,
     dataArray: IParseDataItem[],
   ) {
-    const scalekey = [field,attribute.name].join('_')
+    const scalekey = [field, attribute.name].join('_');
     if (this.scaleCache[scalekey]) {
       return this.scaleCache[scalekey];
     }
@@ -157,7 +155,6 @@ export default class FeatureScalePlugin implements ILayerPlugin {
     //   styleScale.scale.range(attribute.scale?.values);
     // }
 
-
     return this.scaleCache[scalekey];
   }
 
@@ -186,7 +183,6 @@ export default class FeatureScalePlugin implements ILayerPlugin {
       option: scaleOption,
     };
     if (!data || !data.length) {
-
       if (scaleOption && scaleOption.type) {
         styleScale.scale = this.createDefaultScale(scaleOption);
       } else {
@@ -195,7 +191,7 @@ export default class FeatureScalePlugin implements ILayerPlugin {
       }
       return styleScale;
     }
-    const firstValue = (data!.find((d) => !isNil(d[field])))?.[field]
+    const firstValue = data!.find((d) => !isNil(d[field]))?.[field];
 
     // 常量 Scale
     if (this.isNumber(field) || (isNil(firstValue) && !scaleOption)) {
@@ -210,7 +206,6 @@ export default class FeatureScalePlugin implements ILayerPlugin {
       Object.assign(cfg, scaleOption);
       styleScale.scale = this.createDefaultScale(cfg);
       styleScale.option = cfg;
-
     }
     return styleScale;
   }
@@ -237,8 +232,8 @@ export default class FeatureScalePlugin implements ILayerPlugin {
       cfg.domain = extent(values);
     } else if (type === ScaleTypes.CAT) {
       cfg.domain = uniq(values);
-    } else if(type === ScaleTypes.QUANTILE) {
+    } else if (type === ScaleTypes.QUANTILE) {
-       cfg.domain = values
+      cfg.domain = values;
     }
     return cfg;
   }

packages/layers/src/polygon/__tests__/polygonTriangulation.spec.ts

@@ -4,7 +4,14 @@ import { polygonTriangulation } from '..';
 describe('PolygonTriangulation', () => {
   it('should do triangulation with a polygon correctly', () => {
     const mockFeature: IEncodeFeature = {
-      coordinates: [[[0, 0], [1, 0], [1, 1], [0, 1]]],
+      coordinates: [
+        [
+          [0, 0],
+          [1, 0],
+          [1, 1],
+          [0, 1],
+        ],
+      ],
       color: [1, 0, 0, 0],
     };
     const { indices, vertices, size } = polygonTriangulation(mockFeature);

packages/maps/src/amap/index.ts

@@ -105,7 +105,10 @@ export default class AMapService implements IMapService {
     const amapBound = this.map.getBounds().toBounds();
     const NE = amapBound.getNorthEast();
     const SW = amapBound.getSouthWest();
-    return [[NE.getLng(), NE.getLat()], [SW.getLng(), SW.getLat()]];
+    return [
+      [NE.getLng(), NE.getLat()],
+      [SW.getLng(), SW.getLat()],
+    ];
   }
 
   public getMinZoom(): number {

packages/maps/src/mapbox/theme.ts

@@ -1,7 +1,7 @@
 export const MapTheme: {
   [key: string]: any;
 } = {
-  light: 'mapbox://styles/mapbox/light-v10',
+  light: 'mapbox://styles/zcxduo/ck233y3ru1di71cnulo9jdg2v',
-  dark: 'mapbox://styles/mapbox/dark-v10',
+  dark: 'mapbox://styles/zcxduo/ck241p6413s0b1cpayzldv7x7',
   normal: 'mapbox://styles/mapbox/streets-v11',
 };

packages/source/src/parser/image.ts

@@ -19,7 +19,10 @@ export default function image(
     dataArray: [
       {
         _id: 0,
-        coordinates: [[extent[0], extent[1]], [extent[2], extent[3]]],
+        coordinates: [
+          [extent[0], extent[1]],
+          [extent[2], extent[3]],
+        ],
       },
     ],
   };

packages/source/src/parser/raster.ts

@@ -11,7 +11,10 @@ export default function raster(data: number[], cfg: IRasterCfg): IParserData {
         height,
         min,
         max,
-        coordinates: [[extent[0], extent[1]], [extent[2], extent[3]]],
+        coordinates: [
+          [extent[0], extent[1]],
+          [extent[2], extent[3]],
+        ],
       },
     ],
   };