feat(demo): normalization demo

demos/raster/basic/demo/image.js

@@ -0,0 +1,25 @@
+import { Scene } from '@l7/scene';
+import { ImageLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [121.2680, 30.3628],
+  zoom: 13,
+});
+
+const layer = new ImageLayer({});
+layer.source(
+  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
+  {
+    parser: {
+      type: 'image',
+      extent: [121.168, 30.2828, 121.384, 30.4219],
+    },
+  },
+);
+scene.on('loaded',()=>{
+  scene.addLayer(layer);
+})
+

demos/raster/basic/demo/meta.json

@@ -0,0 +1,21 @@
+{
+  "title": {
+    "zh": "栅格图层",
+    "en": "Gallery"
+  },
+  "demos": [
+    {
+      "filename": "image.js",
+      "title": "图片",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "raster.js",
+      "title": "地形"
+    },
+    {
+      "filename": "light.js",
+      "title": "夜光图"
+    }
+  ]
+}

demos/raster/basic/demo/raster.js

@@ -44,22 +44,11 @@ async function addLayer() {
       },
     })
     .style({
-      heightRatio:10,
+      heightRatio:100,
       opacity: 0.8,
       rampColors: {
-        colors: [
-          '#002466',
-          '#0D408C',
-          '#105CB3',
-          '#1A76C7',
-          '#2894E0',
-          '#3CB4F0',
-          '#65CEF7',
-          '#98E3FA',
-          '#CFF6FF',
-          '#E8FCFF',
-        ],
-        positions: [0, 0.02, 0.05, 0.1, 0.2, 0.3, 0.5, 0.6, 0.8, 1.0],
+        colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(),
+        positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]
       },
     });
     return layer;

demos/raster/basic/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Raster Map
+order: 0
+---

demos/raster/basic/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 栅格图层
+order: 0
+---

examples/gallery/basic/demo/arcCircle.js

@@ -1,19 +1,19 @@
-import { Arc3DLineLayer } from '@l7/layers';
+import { Arc2DLineLayer } from '@l7/layers';
 import { Scene } from '@l7/scene';
 const scene = new Scene({
   id: 'map',
-  pitch: 40,
-  type: 'amap',
+  pitch: 0,
+  type: 'mapbox',
   style: 'dark',
-  center: [102.602992, 23.107329],
-  zoom: 3,
+  center: [107.77791556935472, 35.443286920228644],
+  zoom: 2.9142882493605033,
 });
-
+window.mapScene = scene;
 fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
   .then((res) => res.text())
   .then((data) => {
     const layer =
-    new Arc3DLineLayer({})
+    new Arc2DLineLayer({})
     .source(data, {
       parser: {
         type: 'csv',
@@ -25,9 +25,10 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
     })
     .size(1)
     .shape('arc')
-    .color('#1558AC')
+    .color('#8C1EB2')
     .style({
       opacity: 0.8,
+      blur: 0.99
     })
     ;
    scene.addLayer(layer);

examples/gallery/basic/demo/bus_dark.js

@@ -0,0 +1,42 @@
+import { Scene } from '@l7/scene';
+import { LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  center: [103.83735604457024,1.360253881403068],
+  pitch:  4.00000000000001,
+  zoom: 10.210275860702593,
+  rotation: 19.313180925794313,
+  type: 'mapbox',
+  style: 'dark',
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new LineLayer({
+      })
+        .source(data,{
+          parser:{
+            type:'json',
+            coordinates:'path'
+          }
+        })
+        .size('level',(level)=>{
+          return [1.0 , level * 1]
+        })
+        .shape('line')
+        .color(
+          'level',
+          [
+            '#312B60', '#4A457E',
+            '#615C99', '#816CAD',
+            '#A67FB5', '#C997C7',
+            '#DEB8D4', '#F5D4E6',
+            '#FAE4F1', '#FFF3FC'
+          ].slice(0,8)
+        )
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });

examples/gallery/basic/demo/column_dark.js

@@ -0,0 +1,44 @@
+import { Scene } from '@l7/scene';
+import { Point3dLayer} from '@l7/layers'
+
+const scene = new Scene({
+  id: 'map',
+  pitch: 35.210526315789465,
+  type: 'amap',
+  style: 'dark',
+  center: [108.524505, 29.873128],
+  zoom: 4.4,
+
+});
+window.mapScene = scene;
+fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+      new Point3dLayer({
+      })
+        .source(data.list, {
+          parser: {
+            type: 'json',
+            x: 'j',
+            y: 'w'
+          }
+        }) 
+        .shape('cylinder')
+        .size('t', function(level) {
+          return [1, 2, level * 2 + 20];
+        })
+        .color('t',[
+          '#094D4A', '#146968',
+          '#1D7F7E', '#289899',
+          '#34B6B7', '#4AC5AF',
+          '#5FD3A6', '#7BE39E',
+          '#A1EDB8', '#CEF8D6'
+        ],)
+        .style({
+          opacity: 1.0,
+        })
+        scene.addLayer(pointLayer);
+        console.log(pointLayer);
+       
+  });

examples/gallery/basic/demo/light.js

@@ -0,0 +1,59 @@
+import { HeatMapHexagonLayer, HeatMapGrid3dLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  style: 'dark',
+  pitch: 43,
+  center: [120.13383079335335,29.651873105004427],
+  zoom: 7.068989519212174,
+  type: 'mapbox',
+});
+
+
+window.mapScene = scene;
+
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
+)
+  .then((res) => res.text())
+  .then((data) => {
+    const layer = new HeatMapGrid3dLayer({})
+      .source(data, {
+
+        parser:{
+           type:'csv',
+            x:'lng',
+            y:'lat',
+        },
+        transforms: [
+          {
+            type: 'hexagon',
+            size: 2500,
+            field: 'v',
+            method: 'sum',
+          },
+        ],
+      })
+      .size('sum', (sum)=>{
+        return sum * 200;
+      })
+      .shape('hexagon')
+      .style({
+        coverage: 0.8,
+        angle: 0,
+        opacity: 1.0,
+      })
+      .color(
+        'sum',
+        [
+          '#094D4A', '#146968',
+          '#1D7F7E', '#289899',
+          '#34B6B7', '#4AC5AF',
+          '#5FD3A6', '#7BE39E',
+          '#A1EDB8', '#C3F9CC',
+          '#DEFAC0', '#ECFFB1'
+        ]
+      );
+    scene.addLayer(layer);
+
+  });

examples/gallery/basic/demo/meta.json

@@ -5,9 +5,35 @@
   },
   "demos": [
     {
-      "filename": "line.js",
-      "title": "线图层",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+      "filename": "column_dark.js",
+      "title": "",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*WkpEQqzuM-oAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "arcCircle.js",
+      "title": "",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*FTp1Roy34qgAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "bus_dark.js",
+      "title": "",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*c80NRaMfGLAAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "light.js",
+      "title": "",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*HxpoRIcBA80AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "point.js",
+      "title": "",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Xp7iRaORYuIAAAAAAAAAAABkARQnAQ"
+    }
+    ,
+    {
+      "filename": "normal.js",
+      "title": "",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Kva7R7AimzsAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/gallery/basic/demo/normal.js

@@ -0,0 +1,34 @@
+
+import { Scene } from '@l7/scene';
+import { PointNormalLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  type: 'amap',
+  style: 'dark',
+  center: [121.417463, 31.215175],
+  pitch: 0,
+  zoom: 11
+
+});
+window.mapScene = scene;
+fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
+  .then((res) => res.text())
+  .then((data) => {
+    const pointLayer =
+      new PointNormalLayer({
+      })
+      .source(data, {
+        parser: {
+          type: 'csv',
+          y: 'lat',
+          x: 'lng'
+        }
+      }).size(0.5)
+      .color('#080298')
+      .style({
+          opacity:1.,
+        })
+
+      scene.addLayer(pointLayer);
+
+  })

examples/gallery/basic/demo/point.js

@@ -0,0 +1,36 @@
+
+import { Scene } from '@l7/scene';
+import { PointNormalLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 64.88,
+  type: 'amap',
+  style: 'dark',
+  center: [114.060288, 22.53684],
+  zoom: 15.63,
+
+});
+window.mapScene = scene;
+fetch('https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+      new PointNormalLayer({
+       
+      })
+        .source(data)
+        .size(2)
+        .color('h8',[
+          '#0A3663', '#1558AC',
+          '#3771D9', '#4D89E5',
+          '#64A5D3', '#72BED6',
+          '#83CED6', '#A6E1E0',
+          '#B8EFE2', '#D7F9F0'
+        ])
+        .style({
+          opacity:1.,
+        })
+
+      scene.addLayer(pointLayer);
+
+  })

examples/gallery/basic/index.en.md

@@ -1,4 +1,6 @@
 ---
 title: Gallery
 order: 0
+redirect_from:
+  - /zh/examples/
 ---

examples/gallery/basic/index.zh.md

@@ -1,4 +1,6 @@
 ---
 title: Gallery
 order: 0
+redirect_from:
+  - /zh/examples/
 ---

examples/heatmap/grid/demo/china.js

@@ -3,9 +3,9 @@ import { Scene } from '@l7/scene';
 const scene = new Scene({
   id: 'map',
   style: 'light',
-  pitch: 46.49999999999997,
-  center: [112.10377141242463, 29.968602656853605],
-  zoom: 3.856,
+  pitch: 0,
+  center: [110.097892,  33.853662],
+  zoom: 4.056,
   type: 'amap',
 });
 window.mapScene = scene;

examples/heatmap/grid/demo/grid1.js

@@ -3,9 +3,9 @@ import { Scene } from '@l7/scene';
 const scene = new Scene({
   id: 'map',
   style: 'dark',
-  pitch: 46.49999999999997,
-  center: [112.10377141242463, 29.968602656853605],
-  zoom: 3.856,
+  pitch: 0,
+  center: [110.097892,  33.853662],
+  zoom: 4.056,
   type: 'amap',
 });
 window.mapScene = scene;

examples/heatmap/grid/demo/heatmap3.js

@@ -0,0 +1,50 @@
+import { HeatMapGridLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  style: 'light',
+  pitch: 0,
+  pitch: 0,
+  center: [110.097892,  33.853662],
+  zoom: 4.056,
+  type: 'amap',
+});
+
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
+)
+  .then((res) => res.text())
+  .then((data) => {
+    const layer = new HeatMapGridLayer({})
+      .source(data, {
+      parser: {
+        type: 'csv',
+        x: 'lng',
+        y: 'lat'
+      },
+      transforms:[
+        {
+        type: 'grid',
+        size: 20000,
+        field:'v',
+        method:'sum'
+       }
+      ]
+    })
+    .size('count',(value)=>{
+       return value * 0;
+    })
+    .shape('circle')
+    .style({
+      coverage: 0.9,
+      angle: 0,
+    })
+    .color('count', [
+      '#8C1EB2','#8C1EB2','#DA05AA',
+       '#F0051A','#FF2A3C','#FF4818',
+      '#FF4818', '#FF8B18',
+      '#F77B00', '#ED9909',
+      '#ECC357', '#EDE59C'
+    ].reverse())
+    scene.addLayer(layer);
+  });

examples/heatmap/grid/demo/meta.json

@@ -14,6 +14,12 @@
       "title": "",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*tAGKS6EClQ4AAAAAAAAAAABkARQnAQ"
 
+    },
+    {
+      "filename": "heatmap3.js",
+      "title": "网格布局 圆形",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6cA0R6us9osAAAAAAAAAAABkARQnAQ"
+
     },
     {
       "filename": "world.js",

examples/heatmap/grid/demo/world.js

@@ -3,11 +3,12 @@ import { Scene } from '@l7/scene';
 const scene = new Scene({
   id: 'map',
   style: 'dark',
-  pitch: 46.49999999999997,
-  center: [112.10377141242463, 29.968602656853605],
-  zoom: 3.856,
+  pitch: 0,
+  center: [110.097892,  33.853662],
+  zoom: 4.056,
   type: 'amap',
 });
+
 window.mapScene = scene;
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
@@ -24,7 +25,7 @@ fetch(
       transforms:[
         {
         type: 'grid',
-        size: 20000,
+        size: 10000,
         field:'v',
         method:'sum'
        }
@@ -44,6 +45,5 @@ fetch(
       '#46F3FF', '#02BEFF',
       '#1A7AFF', '#0A1FB2'
     ].reverse())
-
     scene.addLayer(layer);
   });

examples/heatmap/heatmap/demo/meta.json

@@ -19,5 +19,6 @@
       "title": "经典热力图3D",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*K_nOTa1C7PoAAAAAAAAAAABkARQnAQ"
     }
+
   ]
 }

examples/heatmap/hexagon/demo/china.js

@@ -2,10 +2,10 @@ import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers';
 import { Scene } from '@l7/scene';
 const scene = new Scene({
   id: 'map',
-  style: 'light',
+  style: 'dark',
   pitch: 47.49999999999995,
-  center: [114.05737552216226, 22.542656745583486],
-  zoom: 3,
+  center: [112.50447776627743,30.830476390931125],
+  zoom: 3.9879693680088626,
   type: 'mapbox',
 });
 window.mapScene = scene;
@@ -24,21 +24,25 @@ fetch(
       transforms:[
         {
         type: 'hexagon',
-        size: 10000,
+        size: 17000,
         field:'v',
         method:'sum'
       }
       ]
     })
     .size('sum',(value)=>{
-       return value * 10;
+       return value * 20;
     })
-    .shape('square')
-     .color('count', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
+    .shape('hexagon')
+     .color('count',[
+      '#FF4818', '#F7B74A',
+      '#FFF598', '#FF40F3',
+      '#9415FF', '#421EB2'
+    ].reverse())
     .style({
-      coverage: 0.8,
+      coverage: 0.9,
       angle: 0,
     })
-   
+
     scene.addLayer(layer);
   });

examples/heatmap/hexagon/demo/meta.json

@@ -3,7 +3,11 @@
     "zh": "蜂窝热力图",
     "en": "heatmap"
   },
-  "demos": [
+  "demos": [ {
+      "filename": "china.js",
+      "title": "蜂窝热力图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bx-9TqimungAAAAAAAAAAABkARQnAQ"
+    },
     {
       "filename": "light.js",
       "title": "蜂窝热力图",

examples/line/arc/demo/meta.json

@@ -5,20 +5,14 @@
   },
   "demos": [
     {
-      "filename": "arc3d.js",
-      "title": "3D弧线"
-
+      "filename": "arcCircle.js",
+      "title": "大圆弧线",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*FTp1Roy34qgAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "arc.js",
       "title": "弧线",
       "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ"
-    },
-     {
-      "filename": "arcCircle.js",
-      "title": "大圆弧线",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*FTp1Roy34qgAAAAAAAAAAABkARQnAQ"
-
     },
     {
       "filename": "trip_arc_dark.js",

examples/line/arc/demo/trip_arc_dark.js

@@ -31,4 +31,5 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
     .style({
       opacity: 0.8,
     })
+    scene.addLayer(layer);
   });

examples/line/path/demo/bus_dark.js

@@ -23,7 +23,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-258
           }
         })
         .size('level',(level)=>{
-          return [1.0 , level * 1]
+          return [0.8 , level * 1]
         })
         .shape('line')
         .color(

examples/line/path/demo/bus_light.js

@@ -23,7 +23,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-258
           }
         })
         .size('level',(level)=>{
-          return [1.0 , level * 1]
+          return [0.8 , level * 1]
         })
         .shape('line')
         .color(

examples/line/path/demo/meta.json

@@ -4,11 +4,6 @@
     "en": "line"
   },
   "demos": [
-    {
-      "filename": "road_light.js",
-      "title": "路径",
-      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*1gddQ6x8Jq4AAAAAAAAAAABkARQnAQ"
-    },
     {
       "filename": "bus_light.js",
       "title": "公交线路",
@@ -19,6 +14,11 @@
       "title": "公交线路",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*c80NRaMfGLAAAAAAAAAAAABkARQnAQ"
     },
+    {
+      "filename": "road_light.js",
+      "title": "路径",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*1gddQ6x8Jq4AAAAAAAAAAABkARQnAQ"
+    },
     {
       "filename": "road_dark.js",
       "title": "路径",

examples/point/bubble/demo/color.js

@@ -9,7 +9,7 @@ const scene = new Scene({
   zoom: 15,
   minZoom: 10
 });
-
+scene.mapScene = scene;
 fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
   .then((res) => res.json())
   .then((data) => {

examples/point/bubble/index.en.md

@@ -1,6 +1,4 @@
 ---
 title: Bubble Map
 order: 0
-redirect_from:
-  - /en/examples
 ---

examples/point/bubble/index.zh.md

@@ -1,6 +1,4 @@
 ---
 title: 气泡地图
 order: 0
-redirect_from:
-  - /zh/examples/
 ---

examples/point/chart/demo/bar.js

@@ -3,11 +3,11 @@ import { Marker, Popup } from '@l7/component'
 import * as G2 from '@antv/g2'
 const scene = new Scene({
   id: 'map',
-  type: 'mapbox',
+  type: 'amap',
   style: 'light',
-  center: [122.80009283836715, 37.05881309947238],
+  center: [2.6125016864608597,49.359131],
   pitch: 0,
-  zoom: 2
+  zoom: 4.19
 });
 
 scene.on('loaded',()=>{

examples/point/chart/demo/chart.js

@@ -3,16 +3,17 @@ import { Marker, Popup } from '@l7/component'
 import * as G2 from '@antv/g2'
 const scene = new Scene({
   id: 'map',
-  type: 'mapbox',
+  type: 'amap',
   style: 'light',
-  center: [122.80009283836715, 37.05881309947238],
+  center: [2.6125016864608597,49.359131],
   pitch: 0,
-  zoom: 2
+  zoom: 4.19
 });
 
 scene.on('loaded',()=>{
   addChart();
 })
+window.mapScene = scene;
 function addChart() {
   fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json')
   .then((res) => res.json())
@@ -25,7 +26,6 @@ function addChart() {
       if(size< 30) {
         return
       }
-      console.log(total);
       const itemData = [{
         item: 'Agriculture',
         count: item.gdp.Agriculture,
@@ -72,7 +72,7 @@ function addChart() {
       chart.legend(false);
       chart.source(itemData);
       chart.coord('theta', {
-        innerRadius: 0.75
+        innerRadius: 0.6
       });
       chart.tooltip(false);
       chart.intervalStack().position('percent').color('item',['#5CCEA1','#5D7092','#5B8FF9']).shape('sliceShape');

examples/point/chart/demo/meta.json

@@ -4,20 +4,20 @@
     "en": "Category"
   },
   "demos": [
+    {
+      "filename": "bar.js",
+      "title": "柱图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-Tw3TLzyJ5wAAAAAAAAAAABkARQnAQ"
+    },
     {
       "filename": "chart.js",
       "title": "环图",
-      "screenshot":""
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Uq_RQqyMrbQAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "ring.js",
       "title": "环图",
-      "screenshot":""
-    },
-    {
-      "filename": "chart.js",
-      "title": "环图",
-      "screenshot":""
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*zUu0RYKaF28AAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/point/image/demo/image.js

@@ -6,8 +6,8 @@ const scene = new Scene({
   pitch: 0,
   type: 'amap',
   style: 'light',
-  center: [121.40, 31.258134],
-  zoom: 15,
+  center: [121.434765,31.256735],
+  zoom: 14.83,
 });
 
 fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')

examples/point/image/demo/locate.js

@@ -15,14 +15,14 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f
   .then((data) => {
   scene.addImage(
     'marker',
-    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gxtYSIbHgaYAAAAAAAAAAABkARQnAQ',
+    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ',
   );
    const imageLayer = new PointImageLayer()
       .source(data,)
       .shape('marker')
-      .size(15);
+      .size(12);
         scene.addLayer(imageLayer);
-         
+
   });
 
 window.mapscene =scene;

examples/point/image/demo/meta.json

@@ -5,9 +5,19 @@
   },
   "demos": [
     {
-      "filename": "point.js",
+      "filename": "image.js",
       "title": "气泡图",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*c0IDRIg_n4MAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "locate.js",
+      "title": "顶点符号",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jrFoQrZNL3wAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "weather.js",
+      "title": "天气",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*a_rnSI6p6RoAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/point/image/demo/weather.js

@@ -1,10 +1,9 @@
 import { Scene } from '@l7/scene';
 import { PointImageLayer } from '@l7/layers'
-console.log(this);
 const scene = new Scene({
   id: 'map',
   type: 'amap',
-  style: 'light',
+  style: 'dark',
   center: [120.5969, 29.7918],
   pitch: 35,
   zoom: 7,
@@ -31,7 +30,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdb
       .shape('w', function(w) {
         return w;
       })
-      .size(20)
+      .size(15)
        scene.addLayer(imageLayer);
   });
 

examples/point/marker/demo/marker.js

@@ -2,11 +2,11 @@ import { Scene } from '@l7/scene';
 import { Marker } from '@l7/component'
 const scene = new Scene({
   id: 'map',
-  type: 'mapbox',
+  type: 'amap',
   style: 'light',
-  center: [122.80009283836715, 37.05881309947238],
+  center: [110.80009283836715, 37.05881309947238],
   pitch: 0,
-  zoom: 3
+  zoom: 4
 });
 
 scene.on('loaded',()=>{
@@ -18,11 +18,14 @@ function addMarkers() {
   .then((res) => res.json())
   .then((nodes) => {
     for (var i = 0; i < nodes.length; i++) {
-      if (nodes[i].g !== '1') continue;
+
+      if (nodes[i].g !== '1' || nodes[i].v === '') continue;
+      console.log(nodes[i],nodes[i].v === '')
       var el = document.createElement('label');
       el.className = 'lableclass';
-      el.textContent = nodes[i].v;
+      el.textContent = nodes[i].v +'℃';
       el.style.background = getColor(nodes[i].v);
+      el.style.borderColor = getColor(nodes[i].v);
       const marker = new Marker({
         element: el
       }).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y })
@@ -32,7 +35,6 @@ function addMarkers() {
   })
 }
 
-
   function getColor(v) {
     return v > 50 ? '#800026' : v > 40 ? '#BD0026' : v > 30 ? '#E31A1C' : v > 20 ? '#FC4E2A' : v > 10 ? '#FD8D3C' : v > 5 ? '#FEB24C' : v > 0 ? '#FED976' : '#FFEDA0';
   }

examples/point/marker/demo/meta.json

@@ -5,9 +5,9 @@
   },
   "demos": [
     {
-      "filename": "normal.js",
-      "title": "海量点",
-      "screenshot":""
+      "filename": "marker.js",
+      "title": "温度",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oPofT5YBOksAAAAAAAAAAABkARQnAQ"
 
     }
   ]

examples/polygon/3d/demo/city.js

@@ -1,121 +0,0 @@
-import { Scene } from '@l7/scene';
-import { Polygon3DLayer  } from '@l7/layers'
-const colorObj = {
-  redyellow: [
-    '#8A191A', '#AE3235',
-    '#CC464B', '#E26A5D',
-    '#EC8765', '#F0A66C',
-    '#F4BC8F', '#FFCEA7',
-    '#FFE4CE', '#FFF2E8'
-  ],
-  yellow: [
-    '#7B320A', '#B35B21',
-    '#D2722E', '#F0883A',
-    '#FBA045', '#FAB04B',
-    '#FAC760', '#FBD78C',
-    '#FCE6B3', '#FCF3DB'
-  ],
-  blue_green: [
-    '#094D4A', '#146968',
-    '#1D7F7E', '#289899',
-    '#34B6B7', '#4AC5AF',
-    '#5FD3A6', '#7BE39E',
-    '#A1EDB8', '#CEF8D6'
-  ],
-  blue: [
-    '#0A3663', '#1558AC',
-    '#3771D9', '#4D89E5',
-    '#64A5D3', '#72BED6',
-    '#83CED6', '#A6E1E0',
-    '#B8EFE2', '#D7F9F0'
-  ],
-  purple: [
-    '#312B60', '#4A457E',
-    '#615C99', '#816CAD',
-    '#A67FB5', '#C997C7',
-    '#DEB8D4', '#F5D4E6',
-    '#FAE4F1', '#FFF3FC'
-  ],
-  color1: [
-    '#E4682F', '#FF8752',
-    '#FFA783', '#FFBEA8',
-    '#FFDCD6', '#EEF3FF',
-    '#C8D7F5', '#A5C1FC',
-    '#7FA7F9', '#5F8AE5'
-  ],
-  color2: [
-    '#F1646A', '#F48789',
-    '#F7A9AC', '#FBCCCD',
-    '#FDEEEE', '#EEF3FF',
-    '#C8DAFE', '#A5C1FC',
-    '#80A8FB', '#5B8EF8'
-  ],
-  color3: [
-    '#EEF3FF', '#C8DAFE',
-    '#A5C1FC', '#80A8FB',
-    '#5B8EF8', '#FCF6FA',
-    '#F5E4EF', '#F7CDDF',
-    '#ED9CBE', '#D1749B'
-  ]
-}
-const scene = new Scene({
-  id: 'map',
-  type: 'amap',
-  style: 'dark',
-  center: [120.173104, 30.244072],
-  pitch: 66.50572,
-  zoom: 15.79,
-  minZoom: 10
-});
-const polygon ={
-  "type": "FeatureCollection",
-  "features": [
-    {
-      "type": "Feature",
-      "properties": {},
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [
-              114.05817031860352,
-              22.543714416963457
-            ],
-            [
-              114.07087326049805,
-              22.543714416963457
-            ],
-            [
-              114.07087326049805,
-              22.55504986643093
-            ],
-            [
-              114.05817031860352,
-              22.55504986643093
-            ],
-            [
-              114.05817031860352,
-              22.543714416963457
-            ]
-          ]
-        ]
-      }
-    }
-  ]
-}
-fetch('https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json')
-  .then((res) => res.json())
-  .then((data) => {
-    const layer =
-      new Polygon3DLayer ({
-      })
-      .source(data)
-      .shape('extrude')
-      .size('floor', [10, 200])
-      .color('rgba(242,246,250,0.96)')
-      .style({
-        opacity: 1.0
-      }).render();
-    scene.addLayer(layer);
-    console.log(layer);
-  });

examples/raster/basic/demo/light.js

@@ -1,74 +0,0 @@
-
-import { Scene } from '@l7/scene';
-import { RasterLayer } from '@l7/layers'
-import * as GeoTIFF from 'geotiff';
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'light',
-  center: [121.2680, 30.3628],
-  zoom: 3,
-});
- async function getTiffData() {
-  const response = await fetch(
-    'https://gw.alipayobjects.com/os/basement_prod/6fd83a0e-50da-4266-94e0-05dec9da1c87.dat',
-  );
-  const arrayBuffer = await response.arrayBuffer();
-  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
-  const image = await tiff.getImage();
-  const width = image.getWidth();
-  const height = image.getHeight();
-  const values = await image.readRasters();
-  console.log(values);
-  return {
-    data: values[0],
-    width,
-    height
-  };
-}
-
-async function addLayer() {
-  const tiffdata = await getTiffData();
-
-  const layer = new RasterLayer({});
-  layer
-    .source(tiffdata.data, {
-      parser: {
-        type: 'raster',
-        width: tiffdata.width,
-        height: tiffdata.height,
-        min: 0,
-        max: 300,
-        extent: [119.871826171875,
-              30.0262995822237,  120.50216674804688,
-              30.433281874927655]
-      },
-    })
-    .style({
-      heightRatio:10,
-      opacity: 0.8,
-      rampColors: {
-        colors: [
-          '#002466',
-          '#0D408C',
-          '#105CB3',
-          '#1A76C7',
-          '#2894E0',
-          '#3CB4F0',
-          '#65CEF7',
-          '#98E3FA',
-          '#CFF6FF',
-          '#E8FCFF',
-        ],
-        positions: [0, 0.02, 0.05, 0.1, 0.2, 0.3, 0.5, 0.6, 0.8, 1.0],
-      },
-    });
-    return layer;
-}
-scene.on('loaded', async () =>{
-  const layer = await addLayer();
-  scene.addLayer(layer);
-  scene.render();
-})
-

examples/raster/basic/demo/meta.json

@@ -10,8 +10,9 @@
       "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"
     },
     {
-      "filename": "raster.js",
-      "title": "地形"
+      "filename": "radar.js",
+      "title": "地形",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "light.js",

examples/raster/basic/demo/radar.js

@@ -0,0 +1,25 @@
+import { Scene } from '@l7/scene';
+import { ImageLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'dark',
+  center: [115.52680, 34.3628],
+  zoom: 7,
+});
+
+const layer = new ImageLayer({});
+layer.source(
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8SUaRr7bxNsAAAAAAAAAAABkARQnAQ',
+  {
+    parser: {
+      type: 'image',
+      extent: [ 113.1277263548,32.3464238863,  118.1365790452, 36.4786759137 ]
+    },
+  },
+);
+scene.on('loaded',()=>{
+  scene.addLayer(layer);
+})
+

examples/raster/basic/demo/raster2d.ts

@@ -1,72 +0,0 @@
-import { Scene } from '@l7/scene';
-import { Raster2DLayer } from '@l7/layers'
-import * as GeoTIFF from 'geotiff';
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'light',
-  center: [121.2680, 30.3628],
-  zoom: 3,
-});
- async function getTiffData() {
-  const response = await fetch(
-    'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
-  );
-  const arrayBuffer = await response.arrayBuffer();
-  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
-  const image = await tiff.getImage();
-  const width = image.getWidth();
-  const height = image.getHeight();
-  const values = await image.readRasters();
-  return {
-    data: values[0],
-    width,
-    height,
-    min: 0,
-    max: 8000,
-  };
-}
-
-async function addLayer() {
-  const tiffdata = await getTiffData();
-
-  const layer = new Raster2DLayer({});
-  layer
-    .source(tiffdata.data, {
-      parser: {
-        type: 'raster',
-        width: tiffdata.width,
-        height: tiffdata.height,
-        min: 0,
-        max: 8000,
-        extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
-      },
-    })
-    .style({
-      heightRatio:10,
-      opacity: 0.8,
-      rampColors: {
-        colors: [
-          '#002466',
-          '#0D408C',
-          '#105CB3',
-          '#1A76C7',
-          '#2894E0',
-          '#3CB4F0',
-          '#65CEF7',
-          '#98E3FA',
-          '#CFF6FF',
-          '#E8FCFF',
-        ],
-        positions: [0, 0.02, 0.05, 0.1, 0.2, 0.3, 0.5, 0.6, 0.8, 1.0],
-      },
-    });
-    return layer;
-}
-scene.on('loaded', async () =>{
-  const layer = await addLayer();
-  scene.addLayer(layer);
-  scene.render();
-})
-

examples/tutorial/data/demo/line.js

@@ -1,39 +0,0 @@
-import { Scene } from '@l7/scene';
-import { LineLayer } from '@l7/layers'
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'light',
-  center: [102.602992, 23.107329],
-  zoom: 13,
-});
-
-fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
-  .then((res) => res.json())
-  .then((data) => {
-    const layer =
-      new LineLayer({
-      })
-        .source(data)
-        .size(1)
-        .shape('line')
-        .color(
-          'ELEV',
-          [
-            '#E8FCFF',
-            '#CFF6FF',
-            '#A1E9ff',
-            '#65CEF7',
-            '#3CB1F0',
-            '#2894E0',
-            '#1772c2',
-            '#105CB3',
-            '#0D408C',
-            '#002466',
-          ].reverse(),
-        )
-    scene.addLayer(layer);
-    console.log(layer);
-
-  });

gatsby-config.js

@@ -35,7 +35,7 @@ module.exports = {
           zh: '图表演示',
           en: 'Examples',
         },
-        redirect: 'point/bubble',
+        redirect: 'gallery/basic',
       },
         // target: '_blank',
     ],

package.json

@@ -78,6 +78,7 @@
     "react-dom": "^16.12.0",
     "react-i18next": "^11.0.1",
     "rimraf": "^2.6.2",
+    "geotiff": "^1.0.0-beta.6",
     "rollup": "^1.27.0",
     "rollup-plugin-analyzer": "^3.2.2",
     "rollup-plugin-babel": "^4.3.3",
@@ -149,8 +150,5 @@
     "commitizen": {
       "path": "cz-conventional-changelog"
     }
-  },
-  "dependencies": {
-    "geotiff": "^1.0.0-beta.6"
   }
 }

site/css/demo.css

@@ -1,16 +1,21 @@
 .lableclass {
-  position: absolute;
-  display: inline;
-  cursor: pointer;
-  background: rgb(255, 228, 120);
-  border: none; padding: 4px;
-  white-space: nowrap;
-  font: bold 12px/18px arial, sans-serif;
-  color: rgb(51, 51, 51);
-  box-shadow: rgb(153, 153, 153) 1px 1px 2px;
-  border-radius: 4px;
-  width: 22px;
-  height: 24px;
-  text-align: center;
-  user-select: none;
+    position: absolute;
+    display: inline;
+    cursor: pointer;
+    background: rgb(255, 228, 120);
+    border: solid 2px #fff;
+    padding: 4px;
+    white-space: nowrap;
+    font: bold 12px/18px arial, sans-serif;
+    color: #fff;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    line-height: 30px;
+    /* opacity: 0.7; */
+    text-align: center;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }

site/locale.json

@@ -1,5 +1,5 @@
 {
-  "L7 地理空间可视化引擎": "Geospatial Visualization \n Analysis Framework",
+  "L7 地理空间可视化引擎": "Geospatial Visualization <br> Analysis Framework",
   "地理空间数据可视化": "Geospatial Data Visualization Analysis Framework",
   "L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于WebGL的开源大规模地理空间数据可视分析开发框架。": "Large-scale WebGL-powered  Geospatial data visualization analysis framework",
   "架构上灵活可扩展":"Flexible and scalable",
@@ -11,5 +11,8 @@
   "蚂蚁数据可视化": "AntV",
   "继续了解": "More",
   "更新": "Update",
-  "下载使用":"Download"
+  "下载使用":"Download",
+  "浅色色板": "Light Theme",
+  "深色色板": "Dark Theme",
+  "一个个真实的数据可视化案例，复杂的地理数据,简单，易用的API接口,让用户达到开箱即用的效果." : "many real data visualization case"
 }

site/pages/index.zh.tsx

@@ -55,22 +55,21 @@ const IndexPage = () => {
 
   const cases = [
     {
-      logo:
-        'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*2Ij9T76DyCcAAAAAAAAAAABkARQnAQ',
-      title: t('浅色朴素色板'),
-      description: t('可视化分析应用'),
-      link: '#',
+      logo:'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gjBmT56SDgsAAAAAAAAAAABkARQnAQ',
+      title: t('浅色色板'),
+      description: t('一个个真实的数据可视化案例，复杂的地理数据,简单，易用的API接口,让用户达到开箱即用的效果。'),
+      link: 'https://antvis.github.io/L7/zh/examples/gallery/basic',
       image:
-        'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*oCd7Sq3N-QEAAAAAAAAAAABkARQnAQ',
+        'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8Pa8Toh3-OsAAAAAAAAAAABkARQnAQ',
     },
     {
-      logo:
-        'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*ekkhR7ISzUsAAAAAAAAAAABkARQnAQ',
-      title: t('深色酷炫色板'),
-      description: t('酷炫地图应用'),
+      logo:'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gjBmT56SDgsAAAAAAAAAAABkARQnAQ',
+      title: t('深色色板'),
+      description: t('一个个真实的数据可视化案例，复杂的地理数据,简单，易用的API接口,让用户达到开箱即用的效果.'),
+      link: 'https://antvis.github.io/L7/zh/examples/gallery/basic',
       image:
-        'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*oCd7Sq3N-QEAAAAAAAAAAABkARQnAQ',
-    },
+        'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ryTVQ49K8SkAAAAAAAAAAABkARQnAQ',
+    }
   ];
 
   return (