docs: update demo

docs/api/changelog.en.md

@@ -5,6 +5,7 @@ order: 10
 
 ## 2020.01.06 2.0 正式版
 
+[Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star
 ###✨ Features
 • 新增弧线图，路径图动画功能
 • 新增气泡图水波动画功能

docs/api/changelog.zh.md

@@ -5,6 +5,8 @@ order: 10
 
 ## 2020.01.06 2.0 正式版
 
+[Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star
+
 ###✨ Features
 
 • 新增弧线图，路径图动画功能

examples/gallery/animate/demo/animate_path.js

@@ -20,11 +20,11 @@ fetch(
       .source(data)
       .size(1)
       .shape('line')
-      .color('#ff893a')
+      .color('#25d8b7')
       .animate({
-        interval: 0.4,
+        interval: 1, // 间隔
-        duration: 1,
+        duration: 1, // 持续时间，延时
-        trailLength: 0.8
+        trailLength: 2 // 流线长度
       });
     scene.addLayer(layer);
   });

examples/gallery/animate/demo/build.js

@@ -1,27 +1,32 @@
-import { Scene, CityBuildingLayer } from '@antv/l7';
+import { Scene, CityBuildingLayer, LineLayer } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  map: new Mapbox({
+  map: new GaodeMap({
     style: 'dark',
-    center: [ 121.507674, 31.223043 ],
+    center: [ 120.173104, 30.244072 ],
-    pitch: 65.59312320916906,
+    pitch: 66.50572,
-    zoom: 15.4,
+    zoom: 15.79,
-    minZoom: 15,
+    minZoom: 10,
     maxZoom: 18
   })
 });
 
-fetch(
+scene.on('loaded', () => {
-  'https://gw.alipayobjects.com/os/rmsportal/vmvAxgsEwbpoSWbSYvix.json'
+  fetch(
-)
+    'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json'
+  )
     .then(res => res.json())
     .then(data => {
-    const layer = new CityBuildingLayer();
+      const layer = new CityBuildingLayer(
+        {
+          zIndex: 0
+        }
+      );
       layer
         .source(data)
-      .size('floor', [ 0, 500 ])
+        .size('floor', [ 100, 3000 ])
         .color('rgba(242,246,250,1.0)')
         .animate({
           enable: true
@@ -34,3 +39,25 @@ fetch(
         });
       scene.addLayer(layer);
     });
+  fetch(
+    'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
+  )
+    .then(res => res.json())
+    .then(data => {
+      const layer = new LineLayer({
+        zIndex: 0
+      })
+        .source(data)
+        .size(1)
+        .shape('line')
+        .color('#ff893a')
+        .animate({
+          interval: 1, // 间隔
+          duration: 2, // 持续时间，延时
+          trailLength: 2 // 流线长度
+        });
+      scene.addLayer(layer);
+    });
+
+});
+

examples/gallery/animate/demo/meta.json

@@ -4,6 +4,21 @@
     "en": "Gallery"
   },
   "demos": [
+    {
+      "filename": "animate_path.js",
+      "title": "路径动画",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*VJX5Qo7ufaAAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "world.js",
+      "title": "流向图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Sbx4S4w7nL8AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "world2.js",
+      "title": "流向图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*u5BsQbn30pkAAAAAAAAAAABkARQnAQ"
+    },
     {
       "filename": "animate.js",
       "title": "轨迹动画",

examples/gallery/animate/demo/world.js

@@ -1,12 +1,27 @@
 /* eslint-disable no-eval */
-import { Scene, PolygonLayer, LineLayer, PointLayer } from '@antv/l7';
+import { Scene, LineLayer, PointLayer } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
   map: new Mapbox({
     pitch: 40,
-    style: 'blank',
+    style: {
+      version: 8,
+      sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite',
+      glyphs:
+        'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf',
+      sources: {},
+      layers: [
+        {
+          id: 'background',
+          type: 'background',
+          paint: {
+            'background-color': '#2b2b3a'
+          }
+        }
+      ]
+    },
     center: [ 3.438, 40.16797 ],
     zoom: 0.51329
   })
@@ -22,20 +37,20 @@ Promise.all([
     const latlng2 = item.to.split(',').map(e => { return e * 1; });
     return { coord: [ latlng1, latlng2 ] };
   });
-  const worldFill = new PolygonLayer()
+  // const worldFill = new PolygonLayer()
-    .source(world)
+  //   .source(world)
-    .color('#98E3FA')
+  //   .color('#98E3FA')
-    .shape('fill')
+  //   .shape('fill')
-    .style({
+  //   .style({
-      opacity: 1
+  //     opacity: 1
-    });
+  //   });
 
   const worldLine = new LineLayer()
     .source(world)
-    .color('#fff')
+    .color('#41fc9d')
-    .size(0.6)
+    .size(0.5)
     .style({
-      opacity: 1
+      opacity: 0.4
     });
   const dotPoint = new PointLayer()
     .source(dotData, {
@@ -46,7 +61,7 @@ Promise.all([
       }
     })
     .shape('circle')
-    .color('red')
+    .color('#ffed11')
     .animate(true)
     .size(40)
     .style({
@@ -59,18 +74,18 @@ Promise.all([
         coordinates: 'coord'
       }
     })
-    .color('#faad14')
+    .color('#ff6b34')
     .shape('arc3d')
-    .size(2.0)
+    .size(2)
     .animate({
-      interval: 0.1,
+      interval: 2,
-      trailLength: 1.0,
+      trailLength: 2,
-      duration: 2
+      duration: 1
     })
     .style({
       opacity: 1
     });
-  scene.addLayer(worldFill);
+  // scene.addLayer(worldFill);
   scene.addLayer(worldLine);
   scene.addLayer(dotPoint);
   scene.addLayer(flyLine);

examples/gallery/animate/demo/world2.js

@@ -0,0 +1,96 @@
+/* eslint-disable no-eval */
+import { Scene, LineLayer, PointLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    pitch: 40,
+    style: {
+      version: 8,
+      sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite',
+      glyphs:
+        'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf',
+      sources: {},
+      layers: [
+        {
+          id: 'background',
+          type: 'background',
+          paint: {
+            'background-color': '#2b2b3a'
+          }
+        }
+      ]
+    },
+    center: [ 3.438, 40.16797 ],
+    zoom: 0.51329
+  })
+});
+Promise.all([
+  fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json').then(d => d.json()),
+  fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
+  fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
+]).then(function onLoad([ world, dot, flyline ]) {
+  const dotData = eval(dot);
+  const flydata = eval(flyline).map(item => {
+    const latlng1 = item.from.split(',').map(e => { return e * 1; });
+    const latlng2 = item.to.split(',').map(e => { return e * 1; });
+    return { coord: [ latlng1, latlng2 ] };
+  });
+  // const worldFill = new PolygonLayer()
+  //   .source(world)
+  //   .color('#98E3FA')
+  //   .shape('fill')
+  //   .style({
+  //     opacity: 1
+  //   });
+
+  const worldLine = new LineLayer()
+    .source(world)
+    .color('#495e96')
+    .size(0.6)
+    .style({
+      opacity: 0.2
+    });
+  const dotPoint = new PointLayer()
+    .source(dotData, {
+      parser: {
+        type: 'json',
+        x: 'lng',
+        y: 'lat'
+      }
+    })
+    .shape('circle')
+    .color('#abc7e9')
+    .animate({
+      speed: 0.8
+    }
+    )
+    .size(30)
+    .style({
+      opacity: 1.0
+    });
+  const flyLine = new LineLayer()
+    .source(flydata, {
+      parser: {
+        type: 'json',
+        coordinates: 'coord'
+      }
+    })
+    .color('#b97feb')
+    .shape('arc3d')
+    .size(2)
+    .animate({
+      interval: 2,
+      trailLength: 2,
+      duration: 1
+    })
+    .style({
+      opacity: 1
+    });
+  // scene.addLayer(worldFill);
+  scene.addLayer(worldLine);
+  scene.addLayer(dotPoint);
+  scene.addLayer(flyLine);
+});
+

examples/gallery/animate/index.en.md

@@ -1,4 +1,4 @@
 ---
 title: Animate
-order: 1
+order: 0
 ---

examples/gallery/animate/index.zh.md

@@ -1,4 +1,4 @@
 ---
 title: 动画
-order: 1
+order: 0
 ---

examples/gallery/basic/index.en.md

@@ -1,4 +1,4 @@
 ---
 title: Featured
-order: 0
+order: 1
 ---

examples/gallery/basic/index.zh.md

@@ -1,4 +1,4 @@
 ---
 title: 基础可视化
-order: 0
+order: 1
 ---

examples/line/path/demo/bus_light.js

@@ -1,6 +1,6 @@
 // Data Source https://busrouter.sg/visualization/
 
-import { Scene, LineLayer } from '@antv/l7';
+import { Scene, LineLayer, Popup } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
 
 const scene = new Scene({
@@ -30,6 +30,7 @@ fetch(
         return [ 0.8, level * 1 ];
       })
       .shape('line')
+      .active(true)
       .color(
         'level',
         [
@@ -47,5 +48,14 @@ fetch(
           .reverse()
           .slice(0, 8)
       );
+    layer.on('mousemove', e => {
+      const popup = new Popup({
+        offsets: [ 0, 0 ],
+        closeButton: false
+      })
+        .setLnglat(e.lngLat)
+        .setHTML(`<span>车次: ${e.feature.number}</span>`);
+      scene.addPopup(popup);
+    });
     scene.addLayer(layer);
   });

examples/polygon/fill/demo/usa.js

@@ -16,24 +16,25 @@ fetch(
 )
   .then(res => res.json())
   .then(data => {
+    const color = [ 'rgb(255,255,217)', 'rgb(237,248,177)', 'rgb(199,233,180)', 'rgb(127,205,187)', 'rgb(65,182,196)', 'rgb(29,145,192)', 'rgb(34,94,168)', 'rgb(12,44,132)' ];
     const layer = new PolygonLayer({})
       .source(data)
       .color(
         'density', d => {
-          return d > 1000 ? '#800026' :
+          return d > 1000 ? color[7] :
-            d > 500 ? '#BD0026' :
+            d > 500 ? color[6] :
-              d > 200 ? '#E31A1C' :
+              d > 200 ? color[5] :
-                d > 100 ? '#FC4E2A' :
+                d > 100 ? color[4] :
-                  d > 50 ? '#FD8D3C' :
+                  d > 50 ? color[3] :
-                    d > 20 ? '#FEB24C' :
+                    d > 20 ? color[2] :
-                      d > 10 ? '#FED976' :
+                      d > 10 ? color[1] :
-                        '#FFEDA0';
+                        color[0];
         }
       )
       .shape('fill')
       .active(true)
       .style({
-        opacity: 0.8
+        opacity: 1.0
       });
     const layer2 = new LineLayer({
       zIndex: 2
@@ -52,7 +53,8 @@ fetch(
 
     layer.on('mousemove', e => {
       const popup = new Popup({
-        offsets: [ 0, 0 ]
+        offsets: [ 0, 0 ],
+        closeButton: false
       })
         .setLnglat(e.lngLat)
         .setHTML(`<span>${e.feature.properties.name}: ${e.feature.properties.density}</span>`);

examples/raster/basic/demo/light.js

@@ -14,7 +14,7 @@ const scene = new Scene({
 addLayer();
 async function getTiffData() {
   const response = await fetch(
-    'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF141999.tiff'
+    'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF182013.tiff'
   );
   const arrayBuffer = await response.arrayBuffer();
   const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
@@ -44,13 +44,13 @@ async function addLayer() {
     })
     .style({
       opacity: 1.0,
-      clampLow: true,
+      clampLow: false,
-      clampHigh: true,
+      clampHigh: false,
       domain: [ 0, 90 ],
       nodataValue: 0,
       rampColors: {
-        colors: [ 'rgba(166,97,26,0)', '#c3aa00', '#fadb14', '#fef346', '#ffff96' ],
+        colors: [ 'rgba(92,58,16,0)', 'rgba(92,58,16,0)', '#f8501a', '#f6961f', '#f8d069', '#fffdf8' ],
-        positions: [ 0, 0.1, 0.25, 0.5, 1.0 ]
+        positions: [ 0, 0.05, 0.1, 0.25, 0.5, 1.0 ]
       }
     });
 

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

@@ -31,7 +31,7 @@ void main() {
       float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
       alpha = (alpha + u_aimate.w -1.0) / u_aimate.w;
       alpha = smoothstep(0., 1., alpha);
-      // float alpha2 = exp(-abs(v_side));
+      float alpha2 = exp(-abs(v_side));
       gl_FragColor.a *= alpha * blur;
       // gl_FragColor.a = fract(u_time);
   }

packages/layers/src/point/models/text.ts

@@ -88,7 +88,7 @@ export default class TextModel extends BaseModel {
   public getUninforms(): IModelUniform {
     const {
       fontWeight = 800,
-      fontFamily,
+      fontFamily = 'sans-serif',
       stroke = '#fff',
       strokeWidth = 0,
     } = this.layer.getLayerConfig() as IPointTextLayerStyleOptions;

packages/layers/src/raster/models/raster.ts

@@ -38,7 +38,7 @@ export default class RasterModel extends BaseModel {
       noDataValue = -9999999,
       domain = [0, 1],
     } = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
-
+    this.updateColorTexure();
     return {
       u_opacity: opacity || 1,
       u_texture: this.texture,
@@ -110,4 +110,18 @@ export default class RasterModel extends BaseModel {
       },
     });
   }
+
+  private updateColorTexure() {
+    const { createTexture2D } = this.rendererService;
+    const {
+      rampColors,
+    } = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
+    const imageData = generateColorRamp(rampColors as IColorRamp);
+    this.colorTexture = createTexture2D({
+      data: imageData.data,
+      width: imageData.width,
+      height: imageData.height,
+      flipY: true,
+    });
+  }
 }

stories/Layers/components/Line.tsx

@@ -33,16 +33,15 @@ export default class LineDemo extends React.Component {
       .shape('line')
       .color('color', (v) => {
         return `rgb(${v[0]})`;
+      })
+      .animate({
+        enable: true,
+        interval: 0.5,
+        trailLength: 0.4,
+        duration: 4,
       });
-    // .animate({
-    //   enable: false,
-    //   interval: 0.5,
-    //   trailLength: 0.4,
-    //   duration: 4,
-    // })
 
     scene.addLayer(lineLayer);
-    scene.render();
     this.scene = scene;
   }
 

stories/Layers/components/Point.tsx

@@ -44,38 +44,6 @@ export default class Point3D extends React.Component {
         strokeWidth: 1,
       });
     scene.addLayer(pointLayer);
-    pointLayer.on('mousemove', (e) => {
-      const id = e.featureId;
-      console.log(e.type);
-      pointLayer.setActive(id);
-    });
-    pointLayer.on('mousedown', (e) => {
-      const id = e.featureId;
-      console.log(e.type);
-      pointLayer.setActive(id);
-    });
-    pointLayer.on('mouseup', (e) => {
-      const id = e.featureId;
-      console.log(e.type);
-      pointLayer.setActive(id);
-    });
-    pointLayer.on('click', (e) => {
-      const id = e.featureId;
-      console.log(e.type);
-      pointLayer.setActive(id);
-    });
-
-    pointLayer.on('contextmenu', (e) => {
-      const id = e.featureId;
-      console.log(e.type);
-      pointLayer.setActive(id);
-    });
-    pointLayer.on('unpick', (e) => {
-      const id = e.featureId;
-      console.log(e.type);
-      pointLayer.setActive(id);
-    });
-
     this.scene = scene;
     // });
   }

stories/Layers/components/RasterLayer.tsx

@@ -4,7 +4,7 @@ import * as dat from 'dat.gui';
 // @ts-ignore
 import * as GeoTIFF from 'geotiff/dist/geotiff.bundle.js';
 import * as React from 'react';
-
+import { colorScales } from '../lib/colorscales';
 export default class ImageLayerDemo extends React.Component {
   private scene: Scene;
   private gui: dat.GUI;
@@ -28,35 +28,36 @@ export default class ImageLayerDemo extends React.Component {
     });
     const tiffdata = await this.getTiffData();
     const layer = new RasterLayer({});
+    const mindata = -5000;
+    const maxdata = 10000;
     layer
       .source(tiffdata.data, {
         parser: {
           type: 'raster',
           width: tiffdata.width,
           height: tiffdata.height,
-          min: 0,
+          // extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
-          max: 8000,
+          extent: [
-          extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
+            73.4766000000000048,
+            18.1054999999999993,
+            135.1066187,
+            57.630046,
+          ],
         },
       })
       .style({
         opacity: 0.8,
-        domain: [100, 4000],
+        domain: [mindata, maxdata],
         clampLow: true,
         rampColors: {
           colors: [
-            '#002466',
+            'rgb(166,97,26)',
-            '#0D408C',
+            'rgb(223,194,125)',
-            '#105CB3',
+            'rgb(245,245,245)',
-            '#1A76C7',
+            'rgb(128,205,193)',
-            '#2894E0',
+            'rgb(1,133,113)',
-            '#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],
+          positions: [0, 0.25, 0.5, 0.75, 1.0],
         },
       });
     scene.addLayer(layer);
@@ -69,8 +70,9 @@ export default class ImageLayerDemo extends React.Component {
       clampLow: true,
       clampHigh: true,
       noDataValue: -9999999,
-      min: 100,
+      min: mindata,
-      max: 4000,
+      max: maxdata,
+      colorScales: 'jet',
     };
     const rasterFolder = gui.addFolder('栅格可视化');
     rasterFolder.add(styleOptions, 'clampLow').onChange((clampLow: boolean) => {
@@ -87,18 +89,31 @@ export default class ImageLayerDemo extends React.Component {
         });
         scene.render();
       });
-    rasterFolder.add(styleOptions, 'min', 0, 9000).onChange((min: number) => {
+    rasterFolder
+      .add(styleOptions, 'min', mindata, maxdata)
+      .onChange((min: number) => {
         layer.style({
           domain: [min, styleOptions.max],
         });
         scene.render();
       });
-    rasterFolder.add(styleOptions, 'max', 0, 9000).onChange((max: number) => {
+    rasterFolder
+      .add(styleOptions, 'max', mindata, maxdata)
+      .onChange((max: number) => {
         layer.style({
           domain: [styleOptions.min, max],
         });
         scene.render();
       });
+    rasterFolder
+      .add(styleOptions, 'colorScales', Object.keys(colorScales))
+      .onChange((color: string) => {
+        colorScales[color].colors = colorScales[color].colors.reverse();
+        layer.style({
+          rampColors: colorScales[color],
+        });
+        scene.render();
+      });
   }
 
   public render() {
@@ -117,7 +132,8 @@ export default class ImageLayerDemo extends React.Component {
   }
   private async getTiffData() {
     const response = await fetch(
-      'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
+      // 'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
+      'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff',
     );
     const arrayBuffer = await response.arrayBuffer();
     const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);

stories/Layers/components/Text.tsx

@@ -1,42 +1,21 @@
 import { PointLayer, Scene } from '@antv/l7';
 import { GaodeMap, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
+import * as dat from 'dat.gui';
 // @ts-ignore
 import data from '../data/data.json';
 export default class TextLayerDemo extends React.Component {
   // @ts-ignore
   private scene: Scene;
+  private gui: dat.GUI;
 
   public componentWillUnmount() {
     this.scene.destroy();
+    if (this.gui) {
+      this.gui.destroy();
+    }
   }
-
   public async componentDidMount() {
-    const data = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          properties: {
-            name: '中华人民共和国',
-          },
-          geometry: {
-            type: 'Point',
-            coordinates: [103.0078125, 36.03133177633187],
-          },
-        },
-        {
-          type: 'Feature',
-          properties: {
-            name: '中华人民共和国',
-          },
-          geometry: {
-            type: 'Point',
-            coordinates: [122.6953125, 10.833305983642491],
-          },
-        },
-      ],
-    };
     const response = await fetch(
       'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json',
     );
@@ -76,6 +55,32 @@ export default class TextLayerDemo extends React.Component {
     scene.addLayer(pointLayer);
 
     this.scene = scene;
+
+    const gui = new dat.GUI();
+    this.gui = gui;
+    const styleOptions = {
+      textAnchor: 'center',
+      strokeWidth: 1,
+    };
+    const rasterFolder = gui.addFolder('栅格可视化');
+    rasterFolder
+      .add(styleOptions, 'textAnchor', [
+        'center',
+        'left',
+        'right',
+        'top',
+        'bottom',
+        'top-left',
+        'bottom-right',
+        'bottom-left',
+        'top-right',
+      ])
+      .onChange((anchor: string) => {
+        pointLayer.style({
+          textAnchor: anchor,
+        });
+        scene.render();
+      });
     // });
   }