chore: add bands demo (#1400)

* chore: add demo

* chore: add bands demo

Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>

dev-demos/features/rasterLayer/demos/rasterNDVI.tsx

@@ -0,0 +1,96 @@
+// @ts-ignore
+import { RasterLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+import * as GeoTIFF from 'geotiff';
+
+async function getTiffData(url: string) {
+  const response = await fetch(url);
+  const arrayBuffer = await response.arrayBuffer();
+  return arrayBuffer
+}
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [121.268, 30.3628],
+        zoom: 3,
+      }),
+    });
+
+    scene.on('loaded', async () => {
+      const url1 = 'http://localhost:3333/luochuan2.tif';
+      const tiffdata = await getTiffData(url1);
+
+      const layer = new RasterLayer({})
+      layer.source([
+        {
+          data: tiffdata,
+          bands: [0, 1, 2, 3],
+        },
+      ], {
+          parser: {
+            type: 'raster',
+            format: async (data, bands) => {
+              const tiff = await GeoTIFF.fromArrayBuffer(data);
+              const imageCount = await tiff.getImageCount();
+              console.log('imageCount', imageCount, bands)
+
+              
+              // const image = await tiff.getImage();
+              // const width = image.getWidth();
+              // const height = image.getHeight();
+              // const value0 = await image.readRasters();
+
+              const image1 = await tiff.getImage(1);
+              const value1 = await image1.readRasters();
+              // console.log(value1)
+
+              // const image2 = await tiff.getImage(2);
+              // const value2 = await image2.readRasters();
+              // console.log(value2)
+
+              const value = value1;
+              // console.log(value)
+              return [
+                // { rasterData: value0[0], width, height },
+                // { rasterData: value1[0], width, height },
+                // { rasterData: value2[0], width, height }
+                // { rasterData: value[0], width: value.width, height: value.height },
+                // { rasterData: value[1], width: value.width, height: value.height },
+                { rasterData: value[2], width: value.width, height: value.height }, // R
+                { rasterData: value[3], width: value.width, height: value.height }, // NIR
+              ];
+            },
+            // blue green red nir
+            // NDVI = ABS(NIR - R) / (NIR + R) = 近红外与红光之差 / 近红外与红光之和
+            operation: ['/', 
+              ['-', ['band', 0], ['band', 1]], // R > NIR
+              ['+', ['band', 0], ['band', 1]]
+            ],
+            extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
+          },
+        })
+        .style({
+          domain: [0, 0.25],
+          rampColors: {
+            colors: [ 'rgb(166,97,26)', 'rgb(223,194,125)', 'rgb(245,245,245)', 'rgb(128,205,193)', 'rgb(1,133,113)' ],
+            positions: [ 0, 0.25, 0.5, 0.75, 1.0 ]
+          },
+        });
+      scene.addLayer(layer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};

dev-demos/features/rasterLayer/demos/rasterRgb3.tsx

@@ -0,0 +1,108 @@
+// @ts-ignore
+import { RasterLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+import * as GeoTIFF from 'geotiff';
+
+async function getTiffData(url: string) {
+  const response = await fetch(url);
+  const arrayBuffer = await response.arrayBuffer();
+  return arrayBuffer
+}
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [121.268, 30.3628],
+        zoom: 3,
+      }),
+    });
+
+    scene.on('loaded', async () => {
+      const url1 = 'http://localhost:3333/luochuan2.tif';
+      const tiffdata = await getTiffData(url1);
+
+      const layer = new RasterLayer({})
+      layer.source([
+        {
+          data: tiffdata,
+          bands: [0, 1, 2, 3],
+        },
+      ], {
+          parser: {
+            type: 'rasterRgb',
+            format: async (data, bands) => {
+              const tiff = await GeoTIFF.fromArrayBuffer(data);
+              const imageCount = await tiff.getImageCount();
+              console.log('imageCount', imageCount, bands)
+
+              
+              // const image = await tiff.getImage();
+              // const width = image.getWidth();
+              // const height = image.getHeight();
+              // const value0 = await image.readRasters();
+
+              const image1 = await tiff.getImage(1);
+              const value1 = await image1.readRasters();
+              // console.log(value1)
+
+              // const image2 = await tiff.getImage(2);
+              // const value2 = await image2.readRasters();
+              // console.log(value2)
+
+              const value = value1;
+              return [
+                // { rasterData: value0[0], width, height },
+                // { rasterData: value1[0], width, height },
+                // { rasterData: value2[0], width, height }
+                { rasterData: value[0], width: value.width, height: value.height },
+                { rasterData: value[1], width: value.width, height: value.height },
+                { rasterData: value[2], width: value.width, height: value.height },
+                { rasterData: value[3], width: value.width, height: value.height }
+              ];
+            },
+            operation: { 
+              // blue green red nir
+              // 标准真彩色 rgb
+              r: ['-', ['band', 2], 155],
+              g: ['-', ['band', 1], 184],
+              b: ['-', ['band', 0], 295],
+
+              // 标准假彩色 4，3，2
+              // r: ['-', ['band', 3], 295],
+              // g: ['-', ['band', 2], 184],
+              // b: ['-', ['band', 1], 295],
+            },
+            extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
+          },
+        })
+        .style({
+          // opacity: 0.8,
+          // channelRMax: 96,
+          // channelGMax: 112,
+          // channelBMax: 141
+
+          // channelRMax: 150,
+          // channelGMax: 131,
+          // channelBMax: 141
+
+          // channelRMax: 256,
+          // channelGMax: 256,
+          // channelBMax: 256
+        });
+      scene.addLayer(layer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};

dev-demos/features/rasterLayer/rasterNDVI.md

@@ -0,0 +1,3 @@
+### RasterLayer - raster ndvi
+#### ndvi
+<code src="./demos/rasterNDVI.tsx"></code>

dev-demos/features/rasterLayer/rasterRgb3.md

@@ -0,0 +1,3 @@
+### RasterLayer - rasterRgb3
+#### 普通 rgb3 rasterLayer
+<code src="./demos/rasterRgb3.tsx"></code>

dev-demos/features/tile/worldmap.md

@@ -0,0 +1,3 @@
+### world
+world
+<code src="./worldmap.tsx"></code>

dev-demos/features/tile/worldmap.tsx

@@ -0,0 +1,57 @@
+// @ts-ignore
+import {
+  Scene,
+  // LineLayer,
+  Source,
+  PolygonLayer,
+  // PointLayer,
+  // TileDebugLayer,
+} from '@antv/l7';
+// @ts-ignore
+import { Map } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      stencil: true,
+      map: new Map({
+        center: [121.268, 30.3628],
+        // zoom: 12,
+        zoom: 4,
+      }),
+    });
+    // https://mvt.amap.com/district/WLD/2/3/1/4096?key=309f07ac6bc48160e80b480ae511e1e9&version=
+    const url =
+      'https://mvt.amap.com/district/WLD/{z}/{x}/{y}/4096?key=309f07ac6bc48160e80b480ae511e1e9&version=';
+    const source = new Source(url, {
+      parser: {
+        type: 'mvt',
+        tileSize: 256,
+        extent: [-180, -85.051129, 179, 85.051129],
+      },
+    });
+
+    scene.on('loaded', () => {
+      // 绿地
+      const water_surface = new PolygonLayer({
+        sourceLayer: 'WLD',
+      })
+        .source(source)
+        .shape('fill')
+        .color('#9fd7fc');
+
+      scene.addLayer(water_surface);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};