From a6b68a9bae699e575cc94e558e85e9c2ba4c0bb3 Mon Sep 17 00:00:00 2001
From: "@thinkinggis" <lzx199065@gmail.com>
Date: Wed, 27 Dec 2023 20:37:59 +0800
Subject: [PATCH] =?UTF-8?q?Update=20site&=E6=96=B0=E5=A2=9E=20raster=20ndi?=
 =?UTF-8?q?=20=E8=AE=A1=E7=AE=97=20(#2222)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 添加归一化指数 parse

* chore: 更新文档
---
 examples/demos/raster/index.ts                |   3 +-
 examples/demos/raster/ndvi.ts                 |  71 ++++++++
 packages/layers/src/raster/index.ts           |   2 +-
 packages/site/.dumirc.ts                      |  12 +-
 ...{raster_single.en.md => raster_data.en.md} |   0
 ...{raster_single.zh.md => raster_data.zh.md} |  20 +++
 .../api/common/source/raster/raster_ndi.en.md |  62 +++++++
 .../api/common/source/raster/raster_ndi.zh.md |  68 +++++++
 .../api/common/source/raster/raster_rgb.en.md | 166 +++++------------
 .../api/common/source/raster/raster_rgb.zh.md | 170 +++++-------------
 .../docs/api/common/source/tile/method.zh.md  |  28 +--
 .../site/docs/api/raster_layer/options.en.md  |   9 +
 .../site/docs/api/raster_layer/options.zh.md  |   9 +
 .../{raster_layer.en.md => raster.en.md}      |   2 +-
 .../site/docs/api/raster_layer/raster.zh.md   |  24 +++
 ...er_single_band.en.md => raster_data.en.md} |   6 +-
 .../docs/api/raster_layer/raster_data.zh.md   |  18 ++
 .../docs/api/raster_layer/raster_layer.zh.md  | 120 -------------
 .../api/raster_layer/raster_multi_band.zh.md  |  22 ---
 ...ster_multi_band.en.md => raster_ndi.en.md} |   8 +-
 .../docs/api/raster_layer/raster_ndi.zh.md    |  18 ++
 .../docs/api/raster_layer/raster_rgb.en.md    |   2 +-
 .../docs/api/raster_layer/raster_rgb.zh.md    |  10 +-
 .../api/raster_layer/raster_single_band.zh.md |  24 ---
 packages/site/docs/api/source/mvt.en.md       |   2 +-
 packages/site/docs/api/source/mvt.zh.md       |   2 +-
 packages/site/docs/api/source/raster.en.md    |   2 +-
 packages/site/docs/api/source/raster.zh.md    |   6 +-
 .../site/docs/api/source/raster_ndi.en.md     |   6 +
 .../site/docs/api/source/raster_ndi.zh.md     |   6 +
 .../site/docs/api/source/raster_tile.en.md    |   2 +-
 .../site/docs/api/source/raster_tile.zh.md    |   2 +-
 .../site/examples/raster/basic/index.en.md    |   4 -
 .../site/examples/raster/basic/index.zh.md    |   4 -
 .../{single_raster => data}/demo/dem.js       |   0
 .../demo/dem_quantize.js                      |   0
 .../{single_raster => data}/demo/light.js     |   0
 .../demo/light_default.js                     |   0
 .../{single_raster => data}/demo/meta.json    |   0
 .../{single_raster => data}/index.en.md       |   0
 .../index.en.md => data/index.zh.md}          |   2 +-
 .../examples/raster/data_raster/demo/NDBI.ts  |  91 ----------
 .../examples/raster/data_raster/demo/NDVI.ts  |  98 ----------
 .../examples/raster/data_raster/demo/NDWI.ts  |  90 ----------
 .../examples/raster/data_raster/index.zh.md   |   4 -
 .../data/ndviundefined.be75.tif               | Bin
 .../raster/{basic => image}/demo/image.js     |   0
 .../raster/{basic => image}/demo/meta.json    |   0
 .../raster/{basic => image}/demo/radar.js     |   0
 .../site/examples/raster/image/index.en.md    |   4 +
 .../site/examples/raster/image/index.zh.md    |   4 +
 .../{data_raster => ndi}/demo/meta.json       |  17 --
 .../raster/{data_raster => ndi}/demo/ndbi.ts  |  32 +---
 .../raster/{data_raster => ndi}/demo/ndvi.ts  |  32 +---
 .../raster/{data_raster => ndi}/demo/ndwi.ts  |  32 +---
 packages/site/examples/raster/ndi/index.en.md |   4 +
 packages/site/examples/raster/ndi/index.zh.md |   4 +
 .../raster/{data_raster => rgb}/demo/432.ts   |  34 ++--
 .../raster/{data_raster => rgb}/demo/543.ts   |  34 ++--
 .../site/examples/raster/rgb/demo/meta.json   |  25 +++
 .../{data_raster => rgb}/demo/multfile.ts     |   0
 .../raster/{data_raster => rgb}/demo/rgb.ts   |  35 +---
 packages/site/examples/raster/rgb/index.en.md |   4 +
 packages/site/examples/raster/rgb/index.zh.md |   4 +
 .../examples/raster/single_raster/index.zh.md |   4 -
 packages/source/src/index.ts                  |   4 +-
 packages/source/src/parser/raster/ndi.ts      |  51 ++++++
 packages/source/src/parser/raster/rgb.ts      |   5 +-
 68 files changed, 606 insertions(+), 918 deletions(-)
 create mode 100644 examples/demos/raster/ndvi.ts
 rename packages/site/docs/api/common/source/raster/{raster_single.en.md => raster_data.en.md} (100%)
 rename packages/site/docs/api/common/source/raster/{raster_single.zh.md => raster_data.zh.md} (76%)
 create mode 100644 packages/site/docs/api/common/source/raster/raster_ndi.en.md
 create mode 100644 packages/site/docs/api/common/source/raster/raster_ndi.zh.md
 create mode 100644 packages/site/docs/api/raster_layer/options.en.md
 create mode 100644 packages/site/docs/api/raster_layer/options.zh.md
 rename packages/site/docs/api/raster_layer/{raster_layer.en.md => raster.en.md} (99%)
 create mode 100644 packages/site/docs/api/raster_layer/raster.zh.md
 rename packages/site/docs/api/raster_layer/{raster_single_band.en.md => raster_data.en.md} (82%)
 create mode 100644 packages/site/docs/api/raster_layer/raster_data.zh.md
 delete mode 100644 packages/site/docs/api/raster_layer/raster_layer.zh.md
 delete mode 100644 packages/site/docs/api/raster_layer/raster_multi_band.zh.md
 rename packages/site/docs/api/raster_layer/{raster_multi_band.en.md => raster_ndi.en.md} (51%)
 create mode 100644 packages/site/docs/api/raster_layer/raster_ndi.zh.md
 delete mode 100644 packages/site/docs/api/raster_layer/raster_single_band.zh.md
 create mode 100644 packages/site/docs/api/source/raster_ndi.en.md
 create mode 100644 packages/site/docs/api/source/raster_ndi.zh.md
 delete mode 100644 packages/site/examples/raster/basic/index.en.md
 delete mode 100644 packages/site/examples/raster/basic/index.zh.md
 rename packages/site/examples/raster/{single_raster => data}/demo/dem.js (100%)
 rename packages/site/examples/raster/{single_raster => data}/demo/dem_quantize.js (100%)
 rename packages/site/examples/raster/{single_raster => data}/demo/light.js (100%)
 rename packages/site/examples/raster/{single_raster => data}/demo/light_default.js (100%)
 rename packages/site/examples/raster/{single_raster => data}/demo/meta.json (100%)
 rename packages/site/examples/raster/{single_raster => data}/index.en.md (100%)
 rename packages/site/examples/raster/{data_raster/index.en.md => data/index.zh.md} (75%)
 delete mode 100644 packages/site/examples/raster/data_raster/demo/NDBI.ts
 delete mode 100644 packages/site/examples/raster/data_raster/demo/NDVI.ts
 delete mode 100644 packages/site/examples/raster/data_raster/demo/NDWI.ts
 delete mode 100644 packages/site/examples/raster/data_raster/index.zh.md
 rename packages/site/examples/raster/{basic => image}/data/ndviundefined.be75.tif (100%)
 rename packages/site/examples/raster/{basic => image}/demo/image.js (100%)
 rename packages/site/examples/raster/{basic => image}/demo/meta.json (100%)
 rename packages/site/examples/raster/{basic => image}/demo/radar.js (100%)
 create mode 100644 packages/site/examples/raster/image/index.en.md
 create mode 100644 packages/site/examples/raster/image/index.zh.md
 rename packages/site/examples/raster/{data_raster => ndi}/demo/meta.json (53%)
 rename packages/site/examples/raster/{data_raster => ndi}/demo/ndbi.ts (67%)
 rename packages/site/examples/raster/{data_raster => ndi}/demo/ndvi.ts (68%)
 rename packages/site/examples/raster/{data_raster => ndi}/demo/ndwi.ts (66%)
 create mode 100644 packages/site/examples/raster/ndi/index.en.md
 create mode 100644 packages/site/examples/raster/ndi/index.zh.md
 rename packages/site/examples/raster/{data_raster => rgb}/demo/432.ts (63%)
 rename packages/site/examples/raster/{data_raster => rgb}/demo/543.ts (63%)
 create mode 100644 packages/site/examples/raster/rgb/demo/meta.json
 rename packages/site/examples/raster/{data_raster => rgb}/demo/multfile.ts (100%)
 rename packages/site/examples/raster/{data_raster => rgb}/demo/rgb.ts (66%)
 create mode 100644 packages/site/examples/raster/rgb/index.en.md
 create mode 100644 packages/site/examples/raster/rgb/index.zh.md
 delete mode 100644 packages/site/examples/raster/single_raster/index.zh.md
 create mode 100644 packages/source/src/parser/raster/ndi.ts

diff --git a/examples/demos/raster/index.ts b/examples/demos/raster/index.ts
index 2a59242fa0..4b99b2bbe9 100644
--- a/examples/demos/raster/index.ts
+++ b/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';
\ No newline at end of file
+export { MapRender as multiband } from './multiband';
+export { MapRender as ndvi } from './ndvi';
\ No newline at end of file
diff --git a/examples/demos/raster/ndvi.ts b/examples/demos/raster/ndvi.ts
new file mode 100644
index 0000000000..ea5a5b89dc
--- /dev/null
+++ b/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);
+    }
+}
diff --git a/packages/layers/src/raster/index.ts b/packages/layers/src/raster/index.ts
index 8774e0b453..88d67fe3cc 100644
--- a/packages/layers/src/raster/index.ts
+++ b/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';
diff --git a/packages/site/.dumirc.ts b/packages/site/.dumirc.ts
index eb83e94370..a6c81c19cc 100644
--- a/packages/site/.dumirc.ts
+++ b/packages/site/.dumirc.ts
@@ -557,8 +557,8 @@ export default defineConfig({
         slug: 'raster',
         icon: 'raster',
         title: {
-          zh: '栅格图层🌟',
-          en: 'Raster Layer🌟',
+          zh: '栅格图层',
+          en: 'Raster Layer',
         },
         order: 7,
       },
@@ -566,8 +566,8 @@ export default defineConfig({
         slug: 'tile',
         icon: 'raster',
         title: {
-          zh: '瓦片图层 🌟',
-          en: 'Tile Layer🌟 ',
+          zh: '瓦片图层',
+          en: 'Tile Layer',
         },
         order: 7,
       },
@@ -575,8 +575,8 @@ export default defineConfig({
         slug: 'Mask',
         icon: 'raster',
         title: {
-          zh: '图层掩膜 🌟',
-          en: 'Layer Mask🌟 ',
+          zh: '图层掩膜',
+          en: 'Layer Mask',
         },
         order: 7,
       },
diff --git a/packages/site/docs/api/common/source/raster/raster_single.en.md b/packages/site/docs/api/common/source/raster/raster_data.en.md
similarity index 100%
rename from packages/site/docs/api/common/source/raster/raster_single.en.md
rename to packages/site/docs/api/common/source/raster/raster_data.en.md
diff --git a/packages/site/docs/api/common/source/raster/raster_single.zh.md b/packages/site/docs/api/common/source/raster/raster_data.zh.md
similarity index 76%
rename from packages/site/docs/api/common/source/raster/raster_single.zh.md
rename to packages/site/docs/api/common/source/raster/raster_data.zh.md
index a249019a43..0970e89d04 100644
--- a/packages/site/docs/api/common/source/raster/raster_single.zh.md
+++ b/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)
+
diff --git a/packages/site/docs/api/common/source/raster/raster_ndi.en.md b/packages/site/docs/api/common/source/raster/raster_ndi.en.md
new file mode 100644
index 0000000000..6b3bf749ee
--- /dev/null
+++ b/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)
diff --git a/packages/site/docs/api/common/source/raster/raster_ndi.zh.md b/packages/site/docs/api/common/source/raster/raster_ndi.zh.md
new file mode 100644
index 0000000000..c63afd26f8
--- /dev/null
+++ b/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)
+
diff --git a/packages/site/docs/api/common/source/raster/raster_rgb.en.md b/packages/site/docs/api/common/source/raster/raster_rgb.en.md
index 3742aecf07..cf3c51687b 100644
--- a/packages/site/docs/api/common/source/raster/raster_rgb.en.md
+++ b/packages/site/docs/api/common/source/raster/raster_rgb.en.md
@@ -1,148 +1,64 @@
-### data
+raster-rgb source synthesizes multi-band data into RGB data for display. For example, for LandSat8 data, we can perform RGB combination display according to the 5,4,3 or 4,3,2 bands.
 
-Multi-band supports two data methods. The raster data coordinate system only supports 3857 projected raster. In the case of multi-band, data is an array type.
+### demo
 
-* Single file multiple bands
-* Multiple single-band files form multi-band
+```ts
+layer
+    .source(
+      bandsValues,
+      {
+        parser: {
+          type: 'rgb',
+          width: bandsValues.width,
+          height: bandsValues.height,
+          bands: [4, 3, 2], // 从零开始
+          extent: [
+            130.39565357746957, 46.905730725742366, 130.73364094187343,
+            47.10217234153133,
+          ],
+        },
+      },
+    )
+```
+
+### data
 
 ```ts
-[
-    {
-        data: tiffdata, // arraybuffer type raster source data
-        bands: [6, 5, 2].map((v) => v - 1),//Single file with multiple bands does not need to be transmitted, the format function is used
-    },
-    ],
+type RasterDataType= Uint8Array | Int8Array | Uint16Array | Int16Array | Uint32Array | Int32Array | Float32Array | Float64Array
 ```
 
-#### Single file multiple bands
+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.
 
-data is unparsed tiff arraybuffer data, which is standardized by format in parser.
+Single file multi-band reading example
 
 ```ts
-const url1 = 'https://gw.alipayobjects.com/zos/raptor/1667832825992/LC08_3857_clip_2.tif';
-  async function getTiffData(url: string) {
+async function getTiffData(url: string) {
   const response = await fetch(url);
   const arrayBuffer = await response.arrayBuffer();
-  return arrayBuffer;
-  }
+  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+  const image1 = await tiff.getImage();
+  const bandsValues = await image1.readRasters();
+  return bandsValues;
 }
-layer.source(
-    [
-    {
-        data: tiffdata,
-        bands: [6, 5, 2].map((v) => v - 1),
-    },
-    ],
-    {
-    parser: {
-        type: 'rasterRgb',
-        format: async (data, bands) => {
-        const tiff = await GeoTIFF.fromArrayBuffer(data);
-        const image1 = await tiff.getImage();
-        const value = await image1.readRasters();
-        return bands.map((band) => {
-            return {
-            rasterData: value[band],
-            width: value.width,
-            height: value.height,
-            };
-        });
-        },
-        operation: {
-        type: 'rgb',
-        },
-        extent: [
-        130.39565357746957, 46.905730725742366, 130.73364094187343,
-        47.10217234153133,
-        ],
-    },
-    },
-)
-```
-
-#### Multiple files and multiple bands
-
-```ts
-const urls = [
-  {
-    url: 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff',
-    bands: [0]
-  },
-  {
-    url: 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff'
-  },
-  ...
-]
-const tileSource = new Source(urls, {...});
 ```
 
 ### parser
 
-#### type:`rasterRgb`
+* type parsing type 'rgb'`必选`
 
-Multi-band data image synthesis
+* bands `[number,number,number] 指定 R/G/B 通道对应的数据索引,data 数组长度需要大于等于 3  `Required\`
 
-#### extent: the latitude and longitude range of the raster \[minlng, minlat,maxLng, maxLat]
+  Note: The bands serial number starts from zero (bands 5, 4, and 3 in landsat 8 should be set to 4, 3, 2)
 
-#### operation synthesis method
+* width length`必选`
 
-rgb will automatically stretch based on the maximum and minimum values
+* height width`必选`
 
-* type `rgb`
+* countCut color stretching depends on`[number,number]`Value is percentage, default value`[2,98]` `可选`
 
-#### format data processing method, raster data parsing method
+### Complete example
 
-* Input parameters:
-
-* data: source passed in parameters
-
-* bands band number
-
-* Return parameters:
-  Return data is array type
-
-```ts
-[{
-        rasterData: value[band],//parsed data
-        width: value.width, // Grid width
-        height: value.height, // grid height
-        };
-      ]
-```
-
-#### Example
-
-```ts
-layer.source(
-    [
-    {
-        data: tiffdata,
-        bands: [6, 5, 2].map((v) => v - 1),
-    },
-    ],
-    {
-    parser: {
-        type: 'rasterRgb',
-        format: async (data, bands) => {
-        const tiff = await GeoTIFF.fromArrayBuffer(data);
-        const image1 = await tiff.getImage();
-        const value = await image1.readRasters();
-        return bands.map((band) => {
-            return {
-            rasterData: value[band],
-            width: value.width,
-            height: value.height,
-            };
-        });
-        },
-        operation: {
-        type: 'rgb',
-        },
-        extent: [
-        130.39565357746957, 46.905730725742366, 130.73364094187343,
-        47.10217234153133,
-        ],
-    },
-    },
-)
-```
+[Raster RGB](../../../../examples/raster/data_raster/#543)
diff --git a/packages/site/docs/api/common/source/raster/raster_rgb.zh.md b/packages/site/docs/api/common/source/raster/raster_rgb.zh.md
index e8e1d82360..671553a941 100644
--- a/packages/site/docs/api/common/source/raster/raster_rgb.zh.md
+++ b/packages/site/docs/api/common/source/raster/raster_rgb.zh.md
@@ -1,144 +1,70 @@
-### data
 
-多波段支持两种数据方式，栅格数据坐标系只支持 3857 投影的栅格，多波段情况 data 为数组类型
+raster-rgb source 是将多波段数据合成 RGB数据进行展示，如对 LandSat8 数据我们可以按照 5,4,3 或者 4,3,2 波段进行RGB组合显示
 
-- 单文件多波段
-- 多个单波段文件组成多波段
+- data  数据
+- option 配置项
+  - parser 数据解析参数
+     - type 解析类型 `rgb`
 
 ```ts
-[
-    {
-        data: tiffdata, // arraybuffer 类型栅格源数据
-        bands: [6, 5, 2].map((v) => v - 1),// 单文件多波段可以不传，format 函数使用
-    },
-    ],
+layer
+    .source(
+      bandsValues,
+      {
+        parser: {
+          type: 'rgb',
+          width: bandsValues.width,
+          height: bandsValues.height,
+          bands: [4, 3, 2], // 从零开始
+          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 读取所有波段，
+- 如果是单文件单波段数据，需要单独读取并合并成一个数据。
 
-data 为未解析过 tiff arraybuffer 数据，在 parser 中 通过 format 进行数据标准化，
+单文件多波段读取示例
 
 ```ts
-  const url1 = 'https://gw.alipayobjects.com/zos/raptor/1667832825992/LC08_3857_clip_2.tif';
-  async function getTiffData(url: string) {
+async function getTiffData(url: string) {
   const response = await fetch(url);
   const arrayBuffer = await response.arrayBuffer();
-  return arrayBuffer;
-  }
+  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+  const image1 = await tiff.getImage();
+  const bandsValues = await image1.readRasters();
+  return bandsValues;
 }
-layer.source(
-    [
-    {
-        data: tiffdata,
-        bands: [6, 5, 2].map((v) => v - 1),
-    },
-    ],
-    {
-    parser: {
-        type: 'rasterRgb',
-        format: async (data, bands) => {
-        const tiff = await GeoTIFF.fromArrayBuffer(data);
-        const image1 = await tiff.getImage();
-        const value = await image1.readRasters();
-        return bands.map((band) => {
-            return {
-            rasterData: value[band],
-            width: value.width,
-            height: value.height,
-            };
-        });
-        },
-        operation: {
-        type: 'rgb',
-        },
-        extent: [
-        130.39565357746957, 46.905730725742366, 130.73364094187343,
-        47.10217234153133,
-        ],
-    },
-    },
-)
 
 ```
-#### 多文件多波段
 
-```ts
-
-const urls = [
-  {
-    url: 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff',
-    bands: [0]
-  },
-  {
-    url: 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff'
-  },
-  ...
-]
-const tileSource = new Source(urls, {...});
-```
 
 ### parser
 
-#### type: `rasterRgb`
-  多波段数据影像合成
-####  extent: 栅格的经纬度范围 [minlng, minlat,maxLng, maxLat]
+- type 解析类型  'rgb' `必选`
+- bands `[number,number,number] 指定 R/G/B 通道对应的数据索引,data 数组长度需要大于等于 3  `必选`
+  
+  注：bands 序号从零开始（landsat 8 里的 5，4,3 波段这样要设置为 4,3, 2）
 
-####  operation 合成方式
- rgb 会自动根据最大值最小值进行拉伸处理
+- width 长度 `必选`
+- height 宽度 `必选`
+- countCut 颜色拉伸参数 `[number,number]` 数值为百分比，默认值 `[2,98]` `可选`
 
-  - type `rgb`
+### 完整示例
+
+[Raster RGB](../../../../examples/raster/rgb/#543)
 
-#### format 数据处理方法，栅格数据解析方式
-  
-  - 入参数：
-  - data: source 传入参数
-  - bands 波段序号
-
--  返回参数：
-    返回数据为数组类型
-  ```ts
-      [{
-          rasterData: value[band],// 解析后的数据
-          width: value.width, // 栅格宽度
-          height: value.height, // 栅格高度
-          };
-        ]
-  ```
-
-
-#### 示例
-```ts
-layer.source(
-    [
-    {
-        data: tiffdata,
-        bands: [6, 5, 2].map((v) => v - 1),
-    },
-    ],
-    {
-    parser: {
-        type: 'rasterRgb',
-        format: async (data, bands) => {
-        const tiff = await GeoTIFF.fromArrayBuffer(data);
-        const image1 = await tiff.getImage();
-        const value = await image1.readRasters();
-        return bands.map((band) => {
-            return {
-            rasterData: value[band],
-            width: value.width,
-            height: value.height,
-            };
-        });
-        },
-        operation: {
-        type: 'rgb',
-        },
-        extent: [
-        130.39565357746957, 46.905730725742366, 130.73364094187343,
-        47.10217234153133,
-        ],
-    },
-    },
-)
-```
\ No newline at end of file
diff --git a/packages/site/docs/api/common/source/tile/method.zh.md b/packages/site/docs/api/common/source/tile/method.zh.md
index c792bf324e..ce9016d579 100644
--- a/packages/site/docs/api/common/source/tile/method.zh.md
+++ b/packages/site/docs/api/common/source/tile/method.zh.md
@@ -1,28 +1,28 @@
-### 瓦片source 属性
+## 瓦片source 属性
 
-#### tileSet 
+### tileSet 
  瓦片数据集，可以获取当前视野内的瓦片信息, 瓦片状态
 
  ```ts
  const source = layer1.getSource();
  const tileSet = source.tileset;
  ```
- ##### 属性
+ #### 属性
  
-###### isLoaded 
+##### isLoaded 
 
 瓦片是否加载完成
 
-###### currentTiles
+##### currentTiles
 当前瓦片对象
 
-###### currentZoom
+##### currentZoom
 
 当前瓦片层级；这里的曾经和map 的缩放层级不相等
 
- ##### 事件
+ #### 事件
 
- ###### tiles-load-start
+ ##### tiles-load-start
 
 地图拖动，需要加载新的瓦片时触发
 
@@ -35,7 +35,7 @@
  ```
   
 
-###### tiles-load-finished
+##### tiles-load-finished
 
 所有需要加载的瓦片资源加载完成后触发
 
@@ -45,9 +45,9 @@
         })
 ```
 
-### 瓦片source 方法
+## 瓦片source 方法
 
-#### reloadAllTile
+### reloadAllTile
 
 重新加载瓦片，会重新请求数据，适用与动态瓦片场景，如瓦片数据发生了更新，或者瓦片Join 的数据发生了更新
 
@@ -55,7 +55,7 @@
 source.reloadAllTile();
 ```
 
-#### reloadTilebyId
+### reloadTilebyId
 
 重新加载特定瓦片的 
 
@@ -68,7 +68,7 @@ source.reloadAllTile();
 source.reloadTileById(z,x,y);
 ```
 
-#### reloadTileByExtent
+### reloadTileByExtent
 
 根据经纬度范围更新瓦片
 
@@ -77,7 +77,7 @@ source.reloadTileById(z,x,y);
 - extent: 经纬范围 [minLng,minLat,maxLng,maxLat]
 - zoom: 缩放等级
 
-#### reloadTileByLnglat
+### reloadTileByLnglat
 
 根据经纬度更新瓦片，经纬度坐标转换成瓦片坐标更新
 
diff --git a/packages/site/docs/api/raster_layer/options.en.md b/packages/site/docs/api/raster_layer/options.en.md
new file mode 100644
index 0000000000..a2d6f284f2
--- /dev/null
+++ b/packages/site/docs/api/raster_layer/options.en.md
@@ -0,0 +1,9 @@
+---
+title: Options
+order: 1
+---
+
+<embed src="@/docs/api/common/style.md"></embed>
+
+
+<embed src="@/docs/api/common/layer/options.en.md"></embed>
\ No newline at end of file
diff --git a/packages/site/docs/api/raster_layer/options.zh.md b/packages/site/docs/api/raster_layer/options.zh.md
new file mode 100644
index 0000000000..11631c675e
--- /dev/null
+++ b/packages/site/docs/api/raster_layer/options.zh.md
@@ -0,0 +1,9 @@
+---
+title: Options
+order: 1
+---
+
+<embed src="@/docs/api/common/style.md"></embed>
+
+
+<embed src="@/docs/api/common/layer/options.zh.md"></embed>
\ No newline at end of file
diff --git a/packages/site/docs/api/raster_layer/raster_layer.en.md b/packages/site/docs/api/raster_layer/raster.en.md
similarity index 99%
rename from packages/site/docs/api/raster_layer/raster_layer.en.md
rename to packages/site/docs/api/raster_layer/raster.en.md
index be35526e25..e4e1606c5f 100644
--- a/packages/site/docs/api/raster_layer/raster_layer.en.md
+++ b/packages/site/docs/api/raster_layer/raster.en.md
@@ -1,5 +1,5 @@
 ---
-title: Raster
+title: RasterLayer
 order: 0
 ---
 
diff --git a/packages/site/docs/api/raster_layer/raster.zh.md b/packages/site/docs/api/raster_layer/raster.zh.md
new file mode 100644
index 0000000000..48871683a6
--- /dev/null
+++ b/packages/site/docs/api/raster_layer/raster.zh.md
@@ -0,0 +1,24 @@
+---
+title: RasterLayer
+order: 0
+---
+
+<embed src="@/docs/api/common/style.md"></embed>
+
+## 简介
+
+`RasterLayer` 图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
+
+
+### Raster Data
+
+单波段，根据栅格数据值，映射为颜色
+
+### Raster RGB
+
+多波段，不同不波段映射为 R/G/B 三通道可视化展示
+
+### Raster NDI
+
+多波段，提供两个波段，进行归一化指数计算 `b-a)/(b+a)`
+
diff --git a/packages/site/docs/api/raster_layer/raster_single_band.en.md b/packages/site/docs/api/raster_layer/raster_data.en.md
similarity index 82%
rename from packages/site/docs/api/raster_layer/raster_single_band.en.md
rename to packages/site/docs/api/raster_layer/raster_data.en.md
index 6d37093c9d..4918cf136c 100644
--- a/packages/site/docs/api/raster_layer/raster_single_band.en.md
+++ b/packages/site/docs/api/raster_layer/raster_data.en.md
@@ -1,6 +1,6 @@
 ---
-title: RasterLayer data encode
-order: 0
+title: Raster Data
+order: 2
 ---
 
 <embed src="@/docs/api/common/style.md"></embed>
@@ -17,7 +17,7 @@ Single-band raster data rendering, visual coloring based on raster data
 
 ## source
 
-<embed src="@/docs/api/common/source/raster/raster_single.en.md"></embed>
+<embed src="@/docs/api/common/source/raster/raster_data.en.md"></embed>
 
 ## style
 
diff --git a/packages/site/docs/api/raster_layer/raster_data.zh.md b/packages/site/docs/api/raster_layer/raster_data.zh.md
new file mode 100644
index 0000000000..36122c4753
--- /dev/null
+++ b/packages/site/docs/api/raster_layer/raster_data.zh.md
@@ -0,0 +1,18 @@
+---
+title: Raster Data
+order: 2
+---
+
+<embed src="@/docs/api/common/style.md"></embed>
+
+## 简介
+
+单波段栅格数据渲染、根据栅格数据进行可视化着色
+
+## source
+
+<embed src="@/docs/api/common/source/raster/raster_data.zh.md"></embed>
+
+## style
+
+<embed src="@/docs/api/common/layer/raster/style.zh.md"></embed>
diff --git a/packages/site/docs/api/raster_layer/raster_layer.zh.md b/packages/site/docs/api/raster_layer/raster_layer.zh.md
deleted file mode 100644
index 0ecdbdf759..0000000000
--- a/packages/site/docs/api/raster_layer/raster_layer.zh.md
+++ /dev/null
@@ -1,120 +0,0 @@
----
-title: Raster 栅格
-order: 0
----
-
-<embed src="@/docs/api/common/style.md"></embed>
-
-## 简介
-
-`RasterLayer` 图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
-
-- L7 本身内部没有提供栅格数据格式, 需要将外部的栅格数据文件解析后或者提供解析方法做传入、如 `tiff`、`lerc`。
-- 栅格图层除了支持简单渲染之外还支持栅格数据的多波段计算，可以用于绘制遥感彩色影像。
-
-### 数据绘制
-
-我们可以直接在外部计算出栅格的波段数据后传给栅格图层使用。
-
-- 不需要额外提供栅格数据的提取方法，在外部解析传入解析好的栅格数据。
-- 这种方式只支持对单波段数据进行染色，无法进行波段计算。
-
-```js
-const layer = new RasterLayer({})
-  .source(tiffdata.data, {
-    parser: {
-      type: 'raster',
-      width: tiffdata.width,
-      height: tiffdata.height,
-      min: 0,
-      max: 80,
-      extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
-    },
-  })
-  .style({
-    opacity: 0.8,
-    domain: [0, 2000],
-    rampColors: {
-      colors: [
-        '#FF4818',
-        '#F7B74A',
-        '#FFF598',
-        '#91EABC',
-        '#2EA9A1',
-        '#206C7C',
-      ].reverse(),
-      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-    },
-  });
-```
-
-### 多波段计算
-
-我们可以将请求得到的栅格文件传给栅格图层使用。
-
-- 需要额外提供栅格数据的解析方法，不同格式的栅格文件有需要对应的方法，如 `tiff` 格式的文件我们一般借助 `geotiff.js` 进行解析。
-- 直接传入一（多）个栅格文件的时候，我们可以读取文件中包含的所有波段的栅格数据，同时支持对波段数据进行简单的数学运算。
-
-<div>
-  <div style="width:60%;float:left; margin: 10px;">
-    <img  width="80%" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*lmJFT7WONcoAAAAAAAAAAAAAARQnAQ'>
-  </div>
-</div>
-
-#### 计算 NDVI
-
-```javascript
-async function getTiffData(url: string) {
-  const response = await fetch(url);
-  const arrayBuffer = await response.arrayBuffer();
-  return arrayBuffer;
-}
-// tiffdata 是请求到的二进制的栅格文件
-const tiffdata = await getTiffData('https: // xxx');
-const layer = new RasterLayer({})
-  .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();
-          const image1 = await tiff.getImage(1);
-          const value1 = await image1.readRasters();
-          const value = value1;
-          return [
-            { 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],
-    },
-  });
-```
diff --git a/packages/site/docs/api/raster_layer/raster_multi_band.zh.md b/packages/site/docs/api/raster_layer/raster_multi_band.zh.md
deleted file mode 100644
index dbe2629eb4..0000000000
--- a/packages/site/docs/api/raster_layer/raster_multi_band.zh.md
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: RasterLayer 多波段计算
-order: 2
----
-
-<embed src="@/docs/api/common/style.md"></embed>
-
-## 简介
-
-多波段数据叠加计算着色。
-
-## Option
-
-<embed src="@/docs/api/common/layer/options.zh.md"></embed>
-
-## source
-
-<embed src="@/docs/api/common/source/raster/raster_band_calc.zh.md"></embed>
-
-## style
-
-<embed src="@/docs/api/common/layer/raster/style.zh.md"></embed>
diff --git a/packages/site/docs/api/raster_layer/raster_multi_band.en.md b/packages/site/docs/api/raster_layer/raster_ndi.en.md
similarity index 51%
rename from packages/site/docs/api/raster_layer/raster_multi_band.en.md
rename to packages/site/docs/api/raster_layer/raster_ndi.en.md
index 6d0820f54b..baed966231 100644
--- a/packages/site/docs/api/raster_layer/raster_multi_band.en.md
+++ b/packages/site/docs/api/raster_layer/raster_ndi.en.md
@@ -1,13 +1,13 @@
 ---
-title: RasterLayer multi band
-order: 2
+title: Raster NDI
+order: 4
 ---
 
 <embed src="@/docs/api/common/style.md"></embed>
 
 ## Introduction
 
-Multi-band data overlay calculation coloring.
+`Raster NDI`Normalized Difference Indices Calculation of normalized indices, providing another band for normalized calculation
 
 ## Option
 
@@ -15,7 +15,7 @@ Multi-band data overlay calculation coloring.
 
 ## source
 
-<embed src="@/docs/api/common/source/raster/raster_band_calc.en.md"></embed>
+<embed src="@/docs/api/common/source/raster/raster_ndi.en.md"></embed>
 
 ## style
 
diff --git a/packages/site/docs/api/raster_layer/raster_ndi.zh.md b/packages/site/docs/api/raster_layer/raster_ndi.zh.md
new file mode 100644
index 0000000000..0645b205ac
--- /dev/null
+++ b/packages/site/docs/api/raster_layer/raster_ndi.zh.md
@@ -0,0 +1,18 @@
+---
+title: Raster NDI
+order: 4
+---
+
+<embed src="@/docs/api/common/style.md"></embed>
+
+## 简介
+
+`Raster NDI`  Normalized Difference Indices 归一化指数计算，提供另个波段，进行归一化计算
+
+## source
+
+<embed src="@/docs/api/common/source/raster/raster_ndi.zh.md"></embed>
+
+## style
+
+<embed src="@/docs/api/common/layer/raster/style.zh.md"></embed>
diff --git a/packages/site/docs/api/raster_layer/raster_rgb.en.md b/packages/site/docs/api/raster_layer/raster_rgb.en.md
index 0ecae25fa4..798a46c1cc 100644
--- a/packages/site/docs/api/raster_layer/raster_rgb.en.md
+++ b/packages/site/docs/api/raster_layer/raster_rgb.en.md
@@ -1,6 +1,6 @@
 ---
 title: RasterLayer Composite band
-order: 1
+order: 3
 ---
 
 <embed src="@/docs/api/common/style.md"></embed>
diff --git a/packages/site/docs/api/raster_layer/raster_rgb.zh.md b/packages/site/docs/api/raster_layer/raster_rgb.zh.md
index 499e67757d..ad4446c541 100644
--- a/packages/site/docs/api/raster_layer/raster_rgb.zh.md
+++ b/packages/site/docs/api/raster_layer/raster_rgb.zh.md
@@ -1,17 +1,13 @@
 ---
-title: RasterLayer 多波段合成
-order: 1
+title: Raster RGB
+order: 3
 ---
 
 <embed src="@/docs/api/common/style.md"></embed>
 
 ## 简介
 
-`RasterLayer` 图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
-
-## Option
-
-<embed src="@/docs/api/common/layer/options.zh.md"></embed>
+`Raster RGB ` 波段组合可视化，不同波段映射到 R/G/B 通道可视化
 
 ## source
 
diff --git a/packages/site/docs/api/raster_layer/raster_single_band.zh.md b/packages/site/docs/api/raster_layer/raster_single_band.zh.md
deleted file mode 100644
index 7228f0ae5e..0000000000
--- a/packages/site/docs/api/raster_layer/raster_single_band.zh.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: RasterLayer 单波段
-order: 0
----
-
-<embed src="@/docs/api/common/style.md"></embed>
-
-## 简介
-
-单波段栅格数据渲染、根据栅格数据进行可视化着色
-
-## Option
-
-<embed src="@/docs/api/common/layer/options.zh.md"></embed>
-
-`RasterLayer` 图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
-
-## source
-
-<embed src="@/docs/api/common/source/raster/raster_single.zh.md"></embed>
-
-## style
-
-<embed src="@/docs/api/common/layer/raster/style.zh.md"></embed>
diff --git a/packages/site/docs/api/source/mvt.en.md b/packages/site/docs/api/source/mvt.en.md
index 3ea0f557cf..539f4bb32e 100644
--- a/packages/site/docs/api/source/mvt.en.md
+++ b/packages/site/docs/api/source/mvt.en.md
@@ -1,5 +1,5 @@
 ---
-title: MVTTile 矢量瓦片
+title: MVT Tile
 order: 6
 ---
 
diff --git a/packages/site/docs/api/source/mvt.zh.md b/packages/site/docs/api/source/mvt.zh.md
index d1fdae84c9..ec47ca6ebd 100644
--- a/packages/site/docs/api/source/mvt.zh.md
+++ b/packages/site/docs/api/source/mvt.zh.md
@@ -1,5 +1,5 @@
 ---
-title: MVTTile 矢量瓦片
+title: MVT Tile
 order: 6
 ---
 
diff --git a/packages/site/docs/api/source/raster.en.md b/packages/site/docs/api/source/raster.en.md
index b788c29c8c..d6dbab5ac7 100644
--- a/packages/site/docs/api/source/raster.en.md
+++ b/packages/site/docs/api/source/raster.en.md
@@ -7,4 +7,4 @@ order: 5
 
 The Raster layer mainly realizes the visualization of raster data. The main source of raster data is satellite remote sensing data, such as digital elevation map, vegetation distribution map, and night light map.
 
-<embed src="@/docs/api/common/source/raster/raster_single.zh.md"></embed>
+<embed src="@/docs/api/common/source/raster/raster_data.zh.md"></embed>
diff --git a/packages/site/docs/api/source/raster.zh.md b/packages/site/docs/api/source/raster.zh.md
index 868661cce5..24d77eeb5d 100644
--- a/packages/site/docs/api/source/raster.zh.md
+++ b/packages/site/docs/api/source/raster.zh.md
@@ -1,10 +1,8 @@
 ---
-title: Raster
+title: Raster Data
 order: 5
 ---
 
 <embed src="@/docs/api/common/style.md"></embed>
 
-Raster 图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
-
-<embed src="@/docs/api/common/source/raster/raster_single.zh.md"></embed>
+<embed src="@/docs/api/common/source/raster/raster_data.zh.md"></embed>
diff --git a/packages/site/docs/api/source/raster_ndi.en.md b/packages/site/docs/api/source/raster_ndi.en.md
new file mode 100644
index 0000000000..8a6e4a25c8
--- /dev/null
+++ b/packages/site/docs/api/source/raster_ndi.en.md
@@ -0,0 +1,6 @@
+---
+title: Raster NDI
+order: 5
+---
+
+<embed src="@/docs/api/common/source/raster/raster_ndi.zh.md"></embed>
diff --git a/packages/site/docs/api/source/raster_ndi.zh.md b/packages/site/docs/api/source/raster_ndi.zh.md
new file mode 100644
index 0000000000..8a6e4a25c8
--- /dev/null
+++ b/packages/site/docs/api/source/raster_ndi.zh.md
@@ -0,0 +1,6 @@
+---
+title: Raster NDI
+order: 5
+---
+
+<embed src="@/docs/api/common/source/raster/raster_ndi.zh.md"></embed>
diff --git a/packages/site/docs/api/source/raster_tile.en.md b/packages/site/docs/api/source/raster_tile.en.md
index 25967a6e92..3ddf4dc272 100644
--- a/packages/site/docs/api/source/raster_tile.en.md
+++ b/packages/site/docs/api/source/raster_tile.en.md
@@ -1,5 +1,5 @@
 ---
-title: RasterTile 栅格瓦片
+title: Raster Tile
 order: 7
 ---
 
diff --git a/packages/site/docs/api/source/raster_tile.zh.md b/packages/site/docs/api/source/raster_tile.zh.md
index 122a8359af..418c30b7b0 100644
--- a/packages/site/docs/api/source/raster_tile.zh.md
+++ b/packages/site/docs/api/source/raster_tile.zh.md
@@ -1,5 +1,5 @@
 ---
-title: RasterTile 栅格瓦片
+title: Raster Tile
 order: 7
 ---
 
diff --git a/packages/site/examples/raster/basic/index.en.md b/packages/site/examples/raster/basic/index.en.md
deleted file mode 100644
index 39ed3aaf30..0000000000
--- a/packages/site/examples/raster/basic/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Raster Map
-order: 0
----
diff --git a/packages/site/examples/raster/basic/index.zh.md b/packages/site/examples/raster/basic/index.zh.md
deleted file mode 100644
index f6a87349ce..0000000000
--- a/packages/site/examples/raster/basic/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 图片栅格
-order: 0
----
diff --git a/packages/site/examples/raster/single_raster/demo/dem.js b/packages/site/examples/raster/data/demo/dem.js
similarity index 100%
rename from packages/site/examples/raster/single_raster/demo/dem.js
rename to packages/site/examples/raster/data/demo/dem.js
diff --git a/packages/site/examples/raster/single_raster/demo/dem_quantize.js b/packages/site/examples/raster/data/demo/dem_quantize.js
similarity index 100%
rename from packages/site/examples/raster/single_raster/demo/dem_quantize.js
rename to packages/site/examples/raster/data/demo/dem_quantize.js
diff --git a/packages/site/examples/raster/single_raster/demo/light.js b/packages/site/examples/raster/data/demo/light.js
similarity index 100%
rename from packages/site/examples/raster/single_raster/demo/light.js
rename to packages/site/examples/raster/data/demo/light.js
diff --git a/packages/site/examples/raster/single_raster/demo/light_default.js b/packages/site/examples/raster/data/demo/light_default.js
similarity index 100%
rename from packages/site/examples/raster/single_raster/demo/light_default.js
rename to packages/site/examples/raster/data/demo/light_default.js
diff --git a/packages/site/examples/raster/single_raster/demo/meta.json b/packages/site/examples/raster/data/demo/meta.json
similarity index 100%
rename from packages/site/examples/raster/single_raster/demo/meta.json
rename to packages/site/examples/raster/data/demo/meta.json
diff --git a/packages/site/examples/raster/single_raster/index.en.md b/packages/site/examples/raster/data/index.en.md
similarity index 100%
rename from packages/site/examples/raster/single_raster/index.en.md
rename to packages/site/examples/raster/data/index.en.md
diff --git a/packages/site/examples/raster/data_raster/index.en.md b/packages/site/examples/raster/data/index.zh.md
similarity index 75%
rename from packages/site/examples/raster/data_raster/index.en.md
rename to packages/site/examples/raster/data/index.zh.md
index ea1d5ff535..3e947805d9 100644
--- a/packages/site/examples/raster/data_raster/index.en.md
+++ b/packages/site/examples/raster/data/index.zh.md
@@ -1,4 +1,4 @@
 ---
 title: Raster Data
-order: 0
+order: 1
 ---
diff --git a/packages/site/examples/raster/data_raster/demo/NDBI.ts b/packages/site/examples/raster/data_raster/demo/NDBI.ts
deleted file mode 100644
index 86aa14daae..0000000000
--- a/packages/site/examples/raster/data_raster/demo/NDBI.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-// @ts-ignore
-import { RasterLayer, Scene } from '@antv/l7';
-// @ts-ignore
-import { Map } 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;
-}
-
-const scene = new Scene({
-  id: 'map',
-  map: new Map({
-    center: [130.5, 47],
-    zoom: 10.5,
-  }),
-});
-
-scene.on('loaded', async () => {
-  const url1 =
-    'https://gw.alipayobjects.com/zos/raptor/1667832825992/LC08_3857_clip_2.tif';
-  const tiffdata = await getTiffData(url1);
-  const url2 =
-    'https://t0.tianditu.gov.cn/img_w/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&';
-
-  const layer2 = new RasterLayer({
-    zIndex: 1,
-  }).source(url2, {
-    parser: {
-      type: 'rasterTile',
-      tileSize: 256,
-      zoomOffset: 1,
-      wmtsOptions: {
-        layer: 'img',
-        tileMatrixset: 'w',
-        format: 'tiles',
-      },
-    },
-  });
-  // NDBI 6,5
-  // NDWI 3,5
-  const layer = new RasterLayer({
-    zIndex: 10,
-  });
-
-  layer
-    .source(
-      [
-        {
-          data: tiffdata,
-          bands: [6, 5].map((v) => v - 1),
-        },
-      ],
-      {
-        parser: {
-          type: 'raster',
-          format: async (data, bands) => {
-            const tiff = await GeoTIFF.fromArrayBuffer(data);
-            const image = await tiff.getImage();
-            const width = image.getWidth();
-            const height = image.getHeight();
-            const values = await image.readRasters();
-            return [
-              { rasterData: values[bands[0]], width, height }, // R
-              { rasterData: values[bands[1]], width, height }, // NIR
-            ];
-          },
-          operation: {
-            type: 'nd',
-          },
-          extent: [
-            130.39565357746957, 46.905730725742366, 130.73364094187343,
-            47.10217234153133,
-          ],
-        },
-      },
-    )
-    .style({
-      domain: [-0.35, 0.6],
-      rampColors: {
-        colors: ['#276419', '#f7f7f7', '#ff0000'].reverse(),
-        positions: [0, 0.38, 1.0],
-      },
-    });
-
-  scene.addLayer(layer2);
-  scene.addLayer(layer);
-});
diff --git a/packages/site/examples/raster/data_raster/demo/NDVI.ts b/packages/site/examples/raster/data_raster/demo/NDVI.ts
deleted file mode 100644
index 301c6413b6..0000000000
--- a/packages/site/examples/raster/data_raster/demo/NDVI.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-// @ts-ignore
-import { RasterLayer, Scene } from '@antv/l7';
-// @ts-ignore
-import { Map } 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;
-}
-
-
-const scene = new Scene({
-  id: 'map',
-  map: new Map({
-    center: [130.5, 47],
-    zoom: 10.5,
-  }),
-});
-
-scene.on('loaded', async () => {
-  const url1 =
-    'https://gw.alipayobjects.com/zos/raptor/1667832825992/LC08_3857_clip_2.tif';
-  const tiffdata = await getTiffData(url1);
-  const url2 =
-    'https://t0.tianditu.gov.cn/img_w/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&';
-
-  const layer2 = new RasterLayer({
-    zIndex: 1,
-  }).source(url2, {
-    parser: {
-      type: 'rasterTile',
-      tileSize: 256,
-      wmtsOptions: {
-        layer: 'img',
-        tileMatrixset: 'w',
-        format: 'tiles',
-      },
-    },
-  });
-  // NDBI 6,5
-  // NDWI 3,5
-  const layer = new RasterLayer({
-    zIndex: 10,
-  });
-
-  layer
-    .source(
-      [
-        {
-          data: tiffdata,
-          bands: [4, 5].map((v) => v - 1),
-        },
-      ],
-      {
-        parser: {
-          type: 'raster',
-          format: async (data, bands) => {
-            const tiff = await GeoTIFF.fromArrayBuffer(data);
-            const image = await tiff.getImage();
-            const width = image.getWidth();
-            const height = image.getHeight();
-            const values = await image.readRasters();
-            return [
-              { rasterData: values[bands[0]], width, height }, // R
-              { rasterData: values[bands[1]], width, height }, // NIR
-            ];
-          },
-          operation: {
-            type: 'nd',
-          },
-          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(layer2);
-  scene.addLayer(layer);
-});
diff --git a/packages/site/examples/raster/data_raster/demo/NDWI.ts b/packages/site/examples/raster/data_raster/demo/NDWI.ts
deleted file mode 100644
index 7f9723ef84..0000000000
--- a/packages/site/examples/raster/data_raster/demo/NDWI.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-// @ts-ignore
-import { RasterLayer, Scene } from '@antv/l7';
-// @ts-ignore
-import { Map } 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;
-}
-
-const scene = new Scene({
-  id: 'map',
-  map: new Map({
-    center: [130.5, 47],
-    zoom: 10.5,
-  }),
-});
-
-scene.on('loaded', async () => {
-  const url1 =
-    'https://gw.alipayobjects.com/zos/raptor/1667832825992/LC08_3857_clip_2.tif';
-  const tiffdata = await getTiffData(url1);
-  const url2 =
-    'https://t0.tianditu.gov.cn/img_w/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&';
-
-  const layer2 = new RasterLayer({
-    zIndex: 1,
-  }).source(url2, {
-    parser: {
-      type: 'rasterTile',
-      tileSize: 256,
-      wmtsOptions: {
-        layer: 'img',
-        tileMatrixset: 'w',
-        format: 'tiles',
-      },
-    },
-  });
-  // NDBI 6,5
-  // NDWI 3,5
-  const layer = new RasterLayer({
-    zIndex: 10,
-  });
-
-  layer
-    .source(
-      [
-        {
-          data: tiffdata,
-          bands: [3, 5].map((v) => v - 1),
-        },
-      ],
-      {
-        parser: {
-          type: 'raster',
-          format: async (data, bands) => {
-            const tiff = await GeoTIFF.fromArrayBuffer(data);
-            const image = await tiff.getImage();
-            const width = image.getWidth();
-            const height = image.getHeight();
-            const values = await image.readRasters();
-            return [
-              { rasterData: values[bands[0]], width, height }, // R
-              { rasterData: values[bands[1]], width, height }, // NIR
-            ];
-          },
-          operation: {
-            type: 'nd',
-          },
-          extent: [
-            130.39565357746957, 46.905730725742366, 130.73364094187343,
-            47.10217234153133,
-          ],
-        },
-      },
-    )
-    .style({
-      domain: [0, 1],
-      rampColors: {
-        colors: ['#0000FF', '#FF0000'],
-        positions: [0, 1.0],
-      },
-    });
-
-  scene.addLayer(layer2);
-  scene.addLayer(layer);
-});
diff --git a/packages/site/examples/raster/data_raster/index.zh.md b/packages/site/examples/raster/data_raster/index.zh.md
deleted file mode 100644
index a7a5a8bfd7..0000000000
--- a/packages/site/examples/raster/data_raster/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 多波段
-order: 0
----
diff --git a/packages/site/examples/raster/basic/data/ndviundefined.be75.tif b/packages/site/examples/raster/image/data/ndviundefined.be75.tif
similarity index 100%
rename from packages/site/examples/raster/basic/data/ndviundefined.be75.tif
rename to packages/site/examples/raster/image/data/ndviundefined.be75.tif
diff --git a/packages/site/examples/raster/basic/demo/image.js b/packages/site/examples/raster/image/demo/image.js
similarity index 100%
rename from packages/site/examples/raster/basic/demo/image.js
rename to packages/site/examples/raster/image/demo/image.js
diff --git a/packages/site/examples/raster/basic/demo/meta.json b/packages/site/examples/raster/image/demo/meta.json
similarity index 100%
rename from packages/site/examples/raster/basic/demo/meta.json
rename to packages/site/examples/raster/image/demo/meta.json
diff --git a/packages/site/examples/raster/basic/demo/radar.js b/packages/site/examples/raster/image/demo/radar.js
similarity index 100%
rename from packages/site/examples/raster/basic/demo/radar.js
rename to packages/site/examples/raster/image/demo/radar.js
diff --git a/packages/site/examples/raster/image/index.en.md b/packages/site/examples/raster/image/index.en.md
new file mode 100644
index 0000000000..0a659243c3
--- /dev/null
+++ b/packages/site/examples/raster/image/index.en.md
@@ -0,0 +1,4 @@
+---
+title: Raster Image
+order: 0
+---
diff --git a/packages/site/examples/raster/image/index.zh.md b/packages/site/examples/raster/image/index.zh.md
new file mode 100644
index 0000000000..0a659243c3
--- /dev/null
+++ b/packages/site/examples/raster/image/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: Raster Image
+order: 0
+---
diff --git a/packages/site/examples/raster/data_raster/demo/meta.json b/packages/site/examples/raster/ndi/demo/meta.json
similarity index 53%
rename from packages/site/examples/raster/data_raster/demo/meta.json
rename to packages/site/examples/raster/ndi/demo/meta.json
index cce36fc2f0..2010326790 100644
--- a/packages/site/examples/raster/data_raster/demo/meta.json
+++ b/packages/site/examples/raster/ndi/demo/meta.json
@@ -4,16 +4,6 @@
     "en": "BaseMap"
   },
   "demos": [
-    {
-      "filename": "543.ts",
-      "title": "标准假彩色",
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uOX7RaIElMsAAAAAAAAAAAAADmJ7AQ/original"
-    },
-    {
-      "filename": "432.ts",
-      "title": "自然色彩",
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*JhucSo3pVVAAAAAAAAAAAAAADmJ7AQ/original"
-    },
     {
       "filename": "ndbi.ts",
       "title": "建筑指数",
@@ -29,13 +19,6 @@
       "title": "水体指数",
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*L4AcTbE69qcAAAAAAAAAAAAADmJ7AQ/original"
     }
-    ,
-    {
-      "filename": "rgb.ts",
-      "title": "TiFF 正射影像",
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HWiES58tAhYAAAAAAAAAAAAADmJ7AQ/original"
-    }
-
     
   ]
 }
diff --git a/packages/site/examples/raster/data_raster/demo/ndbi.ts b/packages/site/examples/raster/ndi/demo/ndbi.ts
similarity index 67%
rename from packages/site/examples/raster/data_raster/demo/ndbi.ts
rename to packages/site/examples/raster/ndi/demo/ndbi.ts
index 86aa14daae..1cdb19f11b 100644
--- a/packages/site/examples/raster/data_raster/demo/ndbi.ts
+++ b/packages/site/examples/raster/ndi/demo/ndbi.ts
@@ -8,9 +8,11 @@ import * as GeoTIFF from 'geotiff';
 async function getTiffData(url: string) {
   const response = await fetch(url);
   const arrayBuffer = await response.arrayBuffer();
-  return arrayBuffer;
+  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+  const image1 = await tiff.getImage();
+  const bandsValues = await image1.readRasters();
+  return bandsValues;
 }
-
 const scene = new Scene({
   id: 'map',
   map: new Map({
@@ -48,29 +50,13 @@ scene.on('loaded', async () => {
 
   layer
     .source(
-      [
-        {
-          data: tiffdata,
-          bands: [6, 5].map((v) => v - 1),
-        },
-      ],
+      tiffdata,
       {
         parser: {
-          type: 'raster',
-          format: async (data, bands) => {
-            const tiff = await GeoTIFF.fromArrayBuffer(data);
-            const image = await tiff.getImage();
-            const width = image.getWidth();
-            const height = image.getHeight();
-            const values = await image.readRasters();
-            return [
-              { rasterData: values[bands[0]], width, height }, // R
-              { rasterData: values[bands[1]], width, height }, // NIR
-            ];
-          },
-          operation: {
-            type: 'nd',
-          },
+          type: 'ndi',
+          width: tiffdata.width,
+          height: tiffdata.height,
+          bands:[5,4],
           extent: [
             130.39565357746957, 46.905730725742366, 130.73364094187343,
             47.10217234153133,
diff --git a/packages/site/examples/raster/data_raster/demo/ndvi.ts b/packages/site/examples/raster/ndi/demo/ndvi.ts
similarity index 68%
rename from packages/site/examples/raster/data_raster/demo/ndvi.ts
rename to packages/site/examples/raster/ndi/demo/ndvi.ts
index 301c6413b6..b2ab378420 100644
--- a/packages/site/examples/raster/data_raster/demo/ndvi.ts
+++ b/packages/site/examples/raster/ndi/demo/ndvi.ts
@@ -8,10 +8,12 @@ import * as GeoTIFF from 'geotiff';
 async function getTiffData(url: string) {
   const response = await fetch(url);
   const arrayBuffer = await response.arrayBuffer();
-  return arrayBuffer;
+  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+  const image1 = await tiff.getImage();
+  const bandsValues = await image1.readRasters();
+  return bandsValues;
 }
 
-
 const scene = new Scene({
   id: 'map',
   map: new Map({
@@ -48,29 +50,13 @@ scene.on('loaded', async () => {
 
   layer
     .source(
-      [
-        {
-          data: tiffdata,
-          bands: [4, 5].map((v) => v - 1),
-        },
-      ],
+      tiffdata,
       {
         parser: {
-          type: 'raster',
-          format: async (data, bands) => {
-            const tiff = await GeoTIFF.fromArrayBuffer(data);
-            const image = await tiff.getImage();
-            const width = image.getWidth();
-            const height = image.getHeight();
-            const values = await image.readRasters();
-            return [
-              { rasterData: values[bands[0]], width, height }, // R
-              { rasterData: values[bands[1]], width, height }, // NIR
-            ];
-          },
-          operation: {
-            type: 'nd',
-          },
+          type: 'ndi',
+          width: tiffdata.width,
+          height: tiffdata.height,
+          bands:[3,4],
           extent: [
             130.39565357746957, 46.905730725742366, 130.73364094187343,
             47.10217234153133,
diff --git a/packages/site/examples/raster/data_raster/demo/ndwi.ts b/packages/site/examples/raster/ndi/demo/ndwi.ts
similarity index 66%
rename from packages/site/examples/raster/data_raster/demo/ndwi.ts
rename to packages/site/examples/raster/ndi/demo/ndwi.ts
index 7f9723ef84..c29c86947d 100644
--- a/packages/site/examples/raster/data_raster/demo/ndwi.ts
+++ b/packages/site/examples/raster/ndi/demo/ndwi.ts
@@ -8,9 +8,11 @@ import * as GeoTIFF from 'geotiff';
 async function getTiffData(url: string) {
   const response = await fetch(url);
   const arrayBuffer = await response.arrayBuffer();
-  return arrayBuffer;
+  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+  const image1 = await tiff.getImage();
+  const bandsValues = await image1.readRasters();
+  return bandsValues;
 }
-
 const scene = new Scene({
   id: 'map',
   map: new Map({
@@ -47,29 +49,13 @@ scene.on('loaded', async () => {
 
   layer
     .source(
-      [
-        {
-          data: tiffdata,
-          bands: [3, 5].map((v) => v - 1),
-        },
-      ],
+      tiffdata,
       {
         parser: {
-          type: 'raster',
-          format: async (data, bands) => {
-            const tiff = await GeoTIFF.fromArrayBuffer(data);
-            const image = await tiff.getImage();
-            const width = image.getWidth();
-            const height = image.getHeight();
-            const values = await image.readRasters();
-            return [
-              { rasterData: values[bands[0]], width, height }, // R
-              { rasterData: values[bands[1]], width, height }, // NIR
-            ];
-          },
-          operation: {
-            type: 'nd',
-          },
+          type: 'ndi',
+          width: tiffdata.width,
+          height: tiffdata.height,
+          bands:[2,4],
           extent: [
             130.39565357746957, 46.905730725742366, 130.73364094187343,
             47.10217234153133,
diff --git a/packages/site/examples/raster/ndi/index.en.md b/packages/site/examples/raster/ndi/index.en.md
new file mode 100644
index 0000000000..9c33c01c6e
--- /dev/null
+++ b/packages/site/examples/raster/ndi/index.en.md
@@ -0,0 +1,4 @@
+---
+title: Raster NDI
+order: 3
+---
diff --git a/packages/site/examples/raster/ndi/index.zh.md b/packages/site/examples/raster/ndi/index.zh.md
new file mode 100644
index 0000000000..9c33c01c6e
--- /dev/null
+++ b/packages/site/examples/raster/ndi/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: Raster NDI
+order: 3
+---
diff --git a/packages/site/examples/raster/data_raster/demo/432.ts b/packages/site/examples/raster/rgb/demo/432.ts
similarity index 63%
rename from packages/site/examples/raster/data_raster/demo/432.ts
rename to packages/site/examples/raster/rgb/demo/432.ts
index 76e171c823..72c7753d98 100644
--- a/packages/site/examples/raster/data_raster/demo/432.ts
+++ b/packages/site/examples/raster/rgb/demo/432.ts
@@ -7,7 +7,10 @@ import * as GeoTIFF from 'geotiff';
 async function getTiffData(url: string) {
   const response = await fetch(url);
   const arrayBuffer = await response.arrayBuffer();
-  return arrayBuffer;
+  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+  const image1 = await tiff.getImage();
+  const bandsValues = await image1.readRasters();
+  return bandsValues;
 }
 
 const scene = new Scene({
@@ -38,35 +41,18 @@ scene.on('loaded', async () => {
   scene.addLayer(layer2);
   const url1 =
     'https://gw.alipayobjects.com/zos/raptor/1667832825992/LC08_3857_clip_2.tif';
-  const tiffdata = await getTiffData(url1);
+  const bandsValues = await getTiffData(url1);
 
   const layer = new RasterLayer({ zIndex: 10 });
   layer
     .source(
-      [
-        {
-          data: tiffdata,
-          bands: [4, 3, 2].map((v) => v - 1),
-        },
-      ],
+      bandsValues,
       {
         parser: {
-          type: 'rasterRgb',
-          format: async (data, bands) => {
-            const tiff = await GeoTIFF.fromArrayBuffer(data);
-            const image1 = await tiff.getImage();
-            const value = await image1.readRasters();
-            return bands.map((band) => {
-              return {
-                rasterData: value[band],
-                width: value.width,
-                height: value.height,
-              };
-            });
-          },
-          operation: {
-            type: 'rgb',
-          },
+          type: 'rgb',
+          bands: [3, 2, 1], // 从零开始
+          width: bandsValues.width,
+          height: bandsValues.height,
           extent: [
             130.39565357746957, 46.905730725742366, 130.73364094187343,
             47.10217234153133,
diff --git a/packages/site/examples/raster/data_raster/demo/543.ts b/packages/site/examples/raster/rgb/demo/543.ts
similarity index 63%
rename from packages/site/examples/raster/data_raster/demo/543.ts
rename to packages/site/examples/raster/rgb/demo/543.ts
index 6efa7955cf..8c85a9478c 100644
--- a/packages/site/examples/raster/data_raster/demo/543.ts
+++ b/packages/site/examples/raster/rgb/demo/543.ts
@@ -7,7 +7,10 @@ import * as GeoTIFF from 'geotiff';
 async function getTiffData(url: string) {
   const response = await fetch(url);
   const arrayBuffer = await response.arrayBuffer();
-  return arrayBuffer;
+  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+  const image1 = await tiff.getImage();
+  const bandsValues = await image1.readRasters();
+  return bandsValues;
 }
 
 const scene = new Scene({
@@ -38,35 +41,18 @@ scene.on('loaded', async () => {
   scene.addLayer(layer2);
   const url1 =
     'https://gw.alipayobjects.com/zos/raptor/1667832825992/LC08_3857_clip_2.tif';
-  const tiffdata = await getTiffData(url1);
+  const bandsValues = await getTiffData(url1);
 
   const layer = new RasterLayer({ zIndex: 10 });
   layer
     .source(
-      [
-        {
-          data: tiffdata,
-          bands: [5, 4, 3].map((v) => v - 1),
-        },
-      ],
+      bandsValues,
       {
         parser: {
-          type: 'rasterRgb',
-          format: async (data, bands) => {
-            const tiff = await GeoTIFF.fromArrayBuffer(data);
-            const image1 = await tiff.getImage();
-            const value = await image1.readRasters();
-            return bands.map((band) => {
-              return {
-                rasterData: value[band],
-                width: value.width,
-                height: value.height,
-              };
-            });
-          },
-          operation: {
-            type: 'rgb',
-          },
+          type: 'rgb',
+          width: bandsValues.width,
+          height: bandsValues.height,
+          bands: [4, 3, 2], // 从零开始
           extent: [
             130.39565357746957, 46.905730725742366, 130.73364094187343,
             47.10217234153133,
diff --git a/packages/site/examples/raster/rgb/demo/meta.json b/packages/site/examples/raster/rgb/demo/meta.json
new file mode 100644
index 0000000000..a769aa47f1
--- /dev/null
+++ b/packages/site/examples/raster/rgb/demo/meta.json
@@ -0,0 +1,25 @@
+{
+  "title": {
+    "zh": "地图底图",
+    "en": "BaseMap"
+  },
+  "demos": [
+    {
+      "filename": "543.ts",
+      "title": "标准假彩色",
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uOX7RaIElMsAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "432.ts",
+      "title": "自然色彩",
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*JhucSo3pVVAAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "rgb.ts",
+      "title": "TiFF 正射影像",
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*kpd0TpM3wxAAAAAAAAAAAAAADmJ7AQ/original"
+    }
+
+    
+  ]
+}
diff --git a/packages/site/examples/raster/data_raster/demo/multfile.ts b/packages/site/examples/raster/rgb/demo/multfile.ts
similarity index 100%
rename from packages/site/examples/raster/data_raster/demo/multfile.ts
rename to packages/site/examples/raster/rgb/demo/multfile.ts
diff --git a/packages/site/examples/raster/data_raster/demo/rgb.ts b/packages/site/examples/raster/rgb/demo/rgb.ts
similarity index 66%
rename from packages/site/examples/raster/data_raster/demo/rgb.ts
rename to packages/site/examples/raster/rgb/demo/rgb.ts
index be4202ab4c..9cda4f1424 100644
--- a/packages/site/examples/raster/data_raster/demo/rgb.ts
+++ b/packages/site/examples/raster/rgb/demo/rgb.ts
@@ -7,10 +7,12 @@ import * as GeoTIFF from 'geotiff';
 async function getTiffData(url: string) {
   const response = await fetch(url);
   const arrayBuffer = await response.arrayBuffer();
-  return arrayBuffer;
+  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+  const image1 = await tiff.getImage();
+  const bandsValues = await image1.readRasters();
+  return bandsValues;
 }
 
-
 const scene = new Scene({
   id: 'map',
  
@@ -36,32 +38,13 @@ scene.on('loaded', async () => {
   });
   layer
     .source(
-      [
-        {
-          data: tiffdata,
-          bands: [0, 1, 2],
-        },
-      ],
+      tiffdata,
       {
         parser: {
-          type: 'rasterRgb',
-          format: async (data, bands) => {
-            const tiff = await GeoTIFF.fromArrayBuffer(data);
-            const image1 = await tiff.getImage();
-            const value = await image1.readRasters();
-
-            return bands.map((band) => {
-              return {
-                rasterData: value[band],
-                width: value.width,
-                height: value.height,
-              };
-            });
-          },
-          operation: {
-            type: 'rgb',
-            options: {},
-          },
+          type: 'rgb',
+          width: tiffdata.width,
+          height: tiffdata.height,
+          bands: [0, 1, 2],
           extent: [
             ...metersToLngLat([
               8182125.2558000003919005, 427435.8622000003233552,
diff --git a/packages/site/examples/raster/rgb/index.en.md b/packages/site/examples/raster/rgb/index.en.md
new file mode 100644
index 0000000000..07750ffda0
--- /dev/null
+++ b/packages/site/examples/raster/rgb/index.en.md
@@ -0,0 +1,4 @@
+---
+title: Raster RGB
+order: 2
+---
diff --git a/packages/site/examples/raster/rgb/index.zh.md b/packages/site/examples/raster/rgb/index.zh.md
new file mode 100644
index 0000000000..07750ffda0
--- /dev/null
+++ b/packages/site/examples/raster/rgb/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: Raster RGB
+order: 2
+---
diff --git a/packages/site/examples/raster/single_raster/index.zh.md b/packages/site/examples/raster/single_raster/index.zh.md
deleted file mode 100644
index 90e548f6f7..0000000000
--- a/packages/site/examples/raster/single_raster/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 单波段
-order: 0
----
diff --git a/packages/source/src/index.ts b/packages/source/src/index.ts
index ae9581072d..6004894691 100644
--- a/packages/source/src/index.ts
+++ b/packages/source/src/index.ts
@@ -10,7 +10,8 @@ import raster from './parser/raster';
 import rasterTile, { rasterDataTypes } from './parser/raster-tile';
 import rasterRgb from './parser/rasterRgb';
 import testTile from './parser/testTile';
-import rgb from './parser/raster/rgb'
+import rgb from './parser/raster/rgb';
+import ndi from './parser/raster/ndi';
 import Source from './source';
 import { cluster } from './transform/cluster';
 import { filter } from './transform/filter';
@@ -40,6 +41,7 @@ registerParser('json', json);
 registerParser('raster', raster);
 registerParser('rasterRgb', rasterRgb);
 registerParser('rgb', rgb);
+registerParser('ndi', ndi);
 registerTransform('cluster', cluster);
 registerTransform('filter', filter);
 registerTransform('join', join);
diff --git a/packages/source/src/parser/raster/ndi.ts b/packages/source/src/parser/raster/ndi.ts
new file mode 100644
index 0000000000..7f8d7e9500
--- /dev/null
+++ b/packages/source/src/parser/raster/ndi.ts
@@ -0,0 +1,51 @@
+import type { IParserData } from '@antv/l7-core';
+import type { IRasterCfg } from '../../interface';
+
+
+/**
+ * @description: 栅格数据解析
+ */
+export type RasterDataType = Uint8Array | Int8Array | Uint16Array | Int16Array | Uint32Array | Int32Array | Float32Array | Float64Array;
+
+export interface IRGBParseCfg extends IRasterCfg {
+    bands?: [number, number, number];
+    countCut?: [number, number];
+    RMinMax?: [number, number];
+    GMinMax?: [number, number];
+    BMinMax?: [number, number];
+}
+
+export default function rasterRgb(
+    data: RasterDataType[],
+    cfg: IRGBParseCfg,
+): IParserData {
+    const { extent, width, height, ...options } = cfg;
+    if (data.length < 2) {
+        console.warn('RGB解析需要2个波段的数据')
+    }
+    const [n, d] = options.bands || [0, 1];
+    const bandsData = [data[n], data[d]];
+    const ndidata = [];
+
+    for (let i = 0; i < bandsData[0].length; i++) {
+        ndidata.push((bandsData[1][i] - bandsData[0][i]) / (bandsData[1][i] + bandsData[0][i]));
+    }
+
+    const resultData = {
+        _id: 1,
+        dataArray: [
+            {
+                _id: 1,
+                data: ndidata,
+                width,
+                height,
+                ...options,
+                coordinates: [
+                    [extent[0], extent[1]],
+                    [extent[2], extent[3]],
+                ],
+            },
+        ],
+    };
+    return resultData;
+}
diff --git a/packages/source/src/parser/raster/rgb.ts b/packages/source/src/parser/raster/rgb.ts
index 13140ab496..844dae1e3f 100644
--- a/packages/source/src/parser/raster/rgb.ts
+++ b/packages/source/src/parser/raster/rgb.ts
@@ -21,7 +21,10 @@ export default function rasterRgb(
     cfg: IRGBParseCfg,
 ): IParserData {
     const { extent, width, height, ...options } = cfg;
-    const [r, g, b] = options.bands!;
+    if(data.length<3){
+        console.warn('RGB解析需要三个波段的数据')
+    }
+    const [r, g, b] = options.bands || [0, 1, 2];
     const bandsData = [data[r], data[g], data[b]];
     const rgbdata = [];
     const [low, high] = options?.countCut || [2, 98];