feat(chart): add chart demo

antvis · Nov 18, 2019 · 2a19b07 · 2a19b07
1 parent 8c2e4a8
commit 2a19b07
Show file tree

Hide file tree

Showing 67 changed files with 4,690 additions and 5,246 deletions.
diff --git a/.storybook/l7.css b/.storybook/l7.css
@@ -1,3 +1,6 @@
+.l7-marker-container {
+ width:100%
+}
 .l7-marker {
 	position: absolute !important;
 	top: 0;
@@ -279,7 +282,7 @@
 .l7-right .l7-control {
 	margin-right: 10px;
   }
-  
+
   /* attribution and scale controls */
 
 .l7-control-container .l7-control-attribution {

diff --git a/examples/heatmap/grid/demo/china.js b/examples/heatmap/grid/demo/china.js
@@ -3,10 +3,10 @@ import { Scene } from '@l7/scene';
 const scene = new Scene({
   id: 'map',
   style: 'light',
-  pitch: 47.49999999999995,
-  center: [114.05737552216226, 22.542656745583486],
-  zoom: 12.405122702055305,
-  type: 'mapbox',
+  pitch: 46.49999999999997,
+  center: [112.10377141242463, 29.968602656853605],
+  zoom: 3.856,
+  type: 'amap',
 });
 window.mapScene = scene;
 fetch(
@@ -24,20 +24,29 @@ fetch(
       transforms:[
         {
         type: 'grid',
-        size: 10000,
+        size: 20000,
         field:'v',
         method:'sum'
        }
       ]
     })
     .size('count',(value)=>{
-       return value * 10;
+       return value * 0;
     })
     .shape('square')
     .style({
-      coverage: 0.8,
+      coverage: 1,
       angle: 0,
     })
-    .color('count', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
+    .color('count', [
+      '#0B0030', '#100243',
+      '#100243', '#1B048B',
+      '#051FB7', '#0350C1',
+      '#0350C1', '#0072C4',
+      '#0796D3', '#2BA9DF',
+      '#30C7C4', '#6BD5A0',
+      '#A7ECB2', '#D0F4CA'
+    ].reverse())
+
     scene.addLayer(layer);
   });
diff --git a/examples/heatmap/grid/demo/grid.js b/examples/heatmap/grid/demo/grid.js
diff --git a/examples/heatmap/grid/demo/grid1.js b/examples/heatmap/grid/demo/grid1.js
@@ -0,0 +1,47 @@
+import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  style: 'dark',
+  pitch: 46.49999999999997,
+  center: [112.10377141242463, 29.968602656853605],
+  zoom: 3.856,
+  type: 'amap',
+});
+window.mapScene = scene;
+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: 10000,
+        field:'v',
+        method:'sum'
+       }
+      ]
+    })
+    .size('count',(value)=>{
+       return value * 0;
+    })
+    .shape('square')
+    .style({
+      coverage: 1,
+      angle: 0,
+    })
+    .color('count', [
+      '#FF4818', '#F7B74A',
+      '#FFF598', '#FF40F3',
+      '#9415FF', '#421EB2'
+    ].reverse())
+    scene.addLayer(layer);
+  });
diff --git a/examples/heatmap/grid/demo/meta.json b/examples/heatmap/grid/demo/meta.json
@@ -5,14 +5,22 @@
   },
   "demos": [
     {
-      "filename": "grid.js",
+      "filename": "china.js",
       "title": "网格热力图",
-      "screenshot":""
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*anD-Q4u83R0AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "grid1.js",
+      "title": "",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*tAGKS6EClQ4AAAAAAAAAAABkARQnAQ"
+
     },
     {
       "filename": "world.js",
-      "title": "世界电厂热力图",
-      "screenshot":""
+      "title": "网格热力图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6danQJDzkyoAAAAAAAAAAABkARQnAQ"
+
     }
+
   ]
 }
diff --git a/examples/heatmap/grid/demo/world.js b/examples/heatmap/grid/demo/world.js
@@ -1,48 +1,49 @@
-import { Scene } from '@l7/scene';
 import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
 const scene = new Scene({
   id: 'map',
-  style: 'light',
-  pitch: 0,
-  center: [116.49434030056, 39.868073421167621],
+  style: 'dark',
+  pitch: 46.49999999999997,
+  center: [112.10377141242463, 29.968602656853605],
+  zoom: 3.856,
   type: 'amap',
-  zoom: 3,
 });
-
-fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
-  .then((res) => res.json())
+window.mapScene = scene;
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
+)
+  .then((res) => res.text())
   .then((data) => {
-    const layer =
-      new HeatMapGrid3dLayer({
-      })
+    const layer = new HeatMapGridLayer({})
       .source(data, {
-        transforms: [
-          {
-            type: 'hexagon',
-            size: 200000,
-            field: 'capacity',
-            method: 'sum',
-          },
-        ],
-      })
-      .size('sum', (value) => {
-        return value * 50;
-      })
-      .shape('hexagon')
-      .style({
-        coverage: 0.9,
-        angle: 0,
-        opacity: 1.0,
-      })
-      .color('sum', [
-            '#2E8AE6',
-            '#69D1AB',
-            '#DAF291',
-            '#FFD591',
-            '#FF7A45',
-            '#CF1D49',
-      ]);
-    scene.addLayer(layer);
-
+      parser: {
+        type: 'csv',
+        x: 'lng',
+        y: 'lat'
+      },
+      transforms:[
+        {
+        type: 'grid',
+        size: 20000,
+        field:'v',
+        method:'sum'
+       }
+      ]
+    })
+    .size('count',(value)=>{
+       return value * 0;
+    })
+    .shape('square')
+    .style({
+      coverage: 1,
+      angle: 0,
+    })
+    .color('count', [
+      '#FF3417', '#FF7412',
+      '#FFB02A', '#FFE754',
+      '#46F3FF', '#02BEFF',
+      '#1A7AFF', '#0A1FB2'
+    ].reverse())
 
+    scene.addLayer(layer);
   });
diff --git a/examples/heatmap/heatmap/demo/world.js → examples/heatmap/heatmap/demo/heatmap.js b/examples/heatmap/heatmap/demo/world.js → examples/heatmap/heatmap/demo/heatmap.js
diff --git a/examples/heatmap/heatmap/demo/world3d.js → examples/heatmap/heatmap/demo/heatmap3d.js b/examples/heatmap/heatmap/demo/world3d.js → examples/heatmap/heatmap/demo/heatmap3d.js
diff --git a/examples/heatmap/heatmap/demo/heatmap_purple.js b/examples/heatmap/heatmap/demo/heatmap_purple.js
@@ -0,0 +1,31 @@
+import { Scene } from '@l7/scene';
+import { HeatMapLayer } from '@l7/layers';
+const scene = new Scene({
+  id: 'map',
+  style: 'dark',
+  pitch: 0,
+  center: [127.5671666579043,7.445038892195569],
+  type: 'mapbox',
+  zoom: 2.632456779444394
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new HeatMapLayer({
+      })
+      .source(data).size('mag', [0, 1.0]) // weight映射通道
+        .style({
+          intensity: 2,
+          radius: 20,
+          opacity: 1.0,
+          rampColors: {
+            colors: [ '#FF4818', '#F7B74A', '#FFF598', '#F27DEB', '#8C1EB2', '#421EB2' ].reverse(),
+            positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]
+          }
+        })
+    scene.addLayer(layer);
+
+
+  });
diff --git a/examples/heatmap/heatmap/demo/meta.json b/examples/heatmap/heatmap/demo/meta.json
@@ -5,12 +5,17 @@
   },
   "demos": [
     {
-      "filename": "world.js",
+      "filename": "heatmap.js",
       "title": "经典热力图2D",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9zUcSK07PHgAAAAAAAAAAABkARQnAQ"
     },
     {
-      "filename": "world3d.js",
+      "filename": "heatmap_purple.js",
+      "title": "经典热力图2D",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DFwET7xJTA8AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "heatmap3d.js",
       "title": "经典热力图3D",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*K_nOTa1C7PoAAAAAAAAAAABkARQnAQ"
     }