Update site&新增 raster ndi 计算 (#2222)

* feat: 添加归一化指数 parse

* chore: 更新文档

examples/demos/raster/index.ts

@@ -1,4 +1,5 @@
 export { MapRender as image } from './image';
 export { MapRender as tiff } from './tiff';
 export { MapRender as dem } from './dem';
-export { MapRender as multiband } from './multiband';
+export { MapRender as multiband } from './multiband';
+export { MapRender as ndvi } from './ndvi';

examples/demos/raster/ndvi.ts

@@ -0,0 +1,71 @@
+// @ts-ignore
+import { RasterLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import * as allMap from '@antv/l7-maps';
+import * as GeoTIFF from 'geotiff';
+
+async function getTiffData(url: string) {
+    const response = await fetch(url);
+    const arrayBuffer = await response.arrayBuffer();
+    return arrayBuffer;
+}
+
+
+export function MapRender(option: {
+    map: string;
+    renderer: 'device' | 'regl';
+}) {
+    const scene = new Scene({
+        id: 'map',
+        renderer: option.renderer,
+        map: new allMap[option.map || 'Map']({
+            center: [130.5, 47],
+            zoom: 10.5,
+        }),
+    });
+    scene.on('loaded', () => {
+        addLayer();
+    });
+
+    async function addLayer() {
+        const url1 =
+            'https://gw.alipayobjects.com/zos/raptor/1667832825992/LC08_3857_clip_2.tif';
+        const tiffdata = await getTiffData(url1);
+        const layer = new RasterLayer({ zIndex: 10 });
+        const tiff = await GeoTIFF.fromArrayBuffer(tiffdata);
+        const image1 = await tiff.getImage();
+        const value = await image1.readRasters();
+        layer
+            .source(
+                value,
+                {
+                    parser: {
+                        type: 'ndi',
+                        width: value.width,
+                        height: value.height,
+                        bands: [3, 4], //  4 为 Band5是近红外（NIR）波段，3 为Band4是红光波段
+                        extent: [
+                            130.39565357746957, 46.905730725742366, 130.73364094187343,
+                            47.10217234153133,
+                        ],
+
+                    }
+                },
+            )
+            .style({
+                domain: [-0.3, 0.5],
+                rampColors: {
+                  colors: [
+                    '#ce4a2e',
+                    '#f0a875',
+                    '#fff8ba',
+                    '#bddd8a',
+                    '#5da73e',
+                    '#235117',
+                  ],
+                  positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
+                },
+              });
+        scene.addLayer(layer);
+    }
+}

packages/layers/src/raster/index.ts

@@ -25,7 +25,7 @@ export default class RaterLayer extends BaseLayer<IRasterLayerStyleOptions> {
     // 根据 source 的类型判断 model type
     const parserType = this.layerSource.getParserType();
     switch (parserType) {
-      case 'raster':
+      case 'raster' || 'ndi':
         return 'raster';
       case 'rasterRgb':
         return 'rasterRgb';

packages/site/.dumirc.ts

@@ -557,26 +557,26 @@ export default defineConfig({
         slug: 'raster',
         icon: 'raster',
         title: {
-          zh: '栅格图层🌟',
-          en: 'Raster Layer🌟',
+          zh: '栅格图层',
+          en: 'Raster Layer',
         },
         order: 7,
       },
       {
         slug: 'tile',
         icon: 'raster',
         title: {
-          zh: '瓦片图层 🌟',
-          en: 'Tile Layer🌟 ',
+          zh: '瓦片图层',
+          en: 'Tile Layer',
         },
         order: 7,
       },
       {
         slug: 'Mask',
         icon: 'raster',
         title: {
-          zh: '图层掩膜 🌟',
-          en: 'Layer Mask🌟 ',
+          zh: '图层掩膜',
+          en: 'Layer Mask',
         },
         order: 7,
       },

packages/site/docs/api/common/source/raster/raster_single.zh.md → packages/site/docs/api/common/source/raster/raster_data.zh.md

@@ -1,7 +1,22 @@
+
+Raster data 数据栅格的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
+
+
+
+- data  数据
+- option 配置项
+  - parser 数据解析参数
+
+
 ### data
 
 data 解析后的数据，为数组
 
+```ts 
+type RasterDataType= Uint8Array | Int8Array | Uint16Array | Int16Array | Uint32Array | Int32Array | Float32Array | Float64Array
+
+```
+
 以 geotiff 为例需要先将数据解析出来，作为 data 输入给 source
 
 ```tsx
@@ -56,3 +71,8 @@ layer.source(rasterData, {
   },
 });
 ```
+
+### 完整示例
+
+[Raster ndi](../../../../examples/raster/data/#dem)
+

packages/site/docs/api/common/source/raster/raster_ndi.en.md

@@ -0,0 +1,62 @@
+raster-ndi(Normalized Difference Indices) source is to calculate the normalized index of multi-band data, such as calculating NDVI/NDWI and other indices.
+
+### demo
+
+```ts
+layer
+    .source(
+      bandsValues,
+      {
+        parser: {
+          type: 'ndi',
+          width: bandsValues.width,
+          height: bandsValues.height,
+          bands: [4, 3], // start from zero
+          extent: [
+            130.39565357746957, 46.905730725742366, 130.73364094187343,
+            47.10217234153133,
+          ],
+        },
+      },
+    )
+```
+
+### data
+
+```ts
+type RasterDataType= Uint8Array | Int8Array | Uint16Array | Int16Array | Uint32Array | Int32Array | Float32Array | Float64Array
+```
+
+data is an array type`RasterDataType[]`
+
+* If it is a multi-band Tiff, you can directly use geotiff,js to read all bands.
+* If it is a single file and single band data, it needs to be read separately and merged into one data.
+
+Single file multi-band reading example
+
+```ts
+async function getTiffData(url: string) {
+  const response = await fetch(url);
+  const arrayBuffer = await response.arrayBuffer();
+  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+  const image1 = await tiff.getImage();
+  const bandsValues = await image1.readRasters();
+  return bandsValues;
+}
+```
+
+### parser
+
+* type parsing type 'rgb'`必选`
+
+* bands `[number,number] 指定需要归一化的波段,data 数组长度需要大于等于 2  `Required\`
+
+  Note: The bands serial number starts from zero (5, 4 in landsat 8, the band should be set to 4, 3)
+
+* width length`必选`
+
+* height width`必选`
+
+### Complete example
+
+[Raster RGB](../../../../examples/raster/data_raster/#543)

packages/site/docs/api/common/source/raster/raster_ndi.zh.md

@@ -0,0 +1,68 @@
+raster-ndi(Normalized Difference Indices) source 是将多波段数据进行归一化指数计算，比如计算NDVI/NDWI 等指数，
+
+- data  数据
+- option 配置项
+  - parser 数据解析参数
+    - type 解析类型 `ndi`
+
+```ts
+layer
+    .source(
+      bandsValues,
+      {
+        parser: {
+          type: 'ndi',
+          width: bandsValues.width,
+          height: bandsValues.height,
+          bands: [4, 3], // 从零开始
+          extent: [
+            130.39565357746957, 46.905730725742366, 130.73364094187343,
+            47.10217234153133,
+          ],
+        },
+      },
+    )
+
+```
+### data
+
+
+```ts 
+type RasterDataType= Uint8Array | Int8Array | Uint16Array | Int16Array | Uint32Array | Int32Array | Float32Array | Float64Array
+
+```
+
+data 为数组类型 `RasterDataType[]`
+
+- 如果是多波段 Tiff 可以直接使用geotiff,js 读取所有波段，
+- 如果是单文件单波段数据，需要单独读取并合并成一个数据。
+
+单文件多波段读取示例
+
+```ts
+async function getTiffData(url: string) {
+  const response = await fetch(url);
+  const arrayBuffer = await response.arrayBuffer();
+  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+  const image1 = await tiff.getImage();
+  const bandsValues = await image1.readRasters();
+  return bandsValues;
+}
+
+```
+
+
+### parser
+
+- type 解析类型  'rgb' `必选`
+- bands `[number,number] 指定需要归一化的波段,data 数组长度需要大于等于 2  `必选`
+
+  注：bands 序号从零开始（landsat 8 里的 5，4, 波段这样要设置为 4,3）
+
+- width 长度 `必选`
+- height 宽度 `必选`
+
+### 完整示例
+
+[Raster ndi](../../../../examples/raster/ndi/#ndbi)
+