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": "夜光图"
+    }
+  ]
+}

examples/raster/basic/demo/raster.js → 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/line/arc/demo/arc3d.js → 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/
 ---