From cc71328133ca2064356b8650ced917df64b42bed Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+yiiiiiiqianyao@users.noreply.github.com> Date: Mon, 17 Oct 2022 17:06:01 +0800 Subject: [PATCH] chore: add bands demo (#1400) * chore: add demo * chore: add bands demo Co-authored-by: shihui --- .../features/rasterLayer/demos/rasterNDVI.tsx | 96 ++++++++++++++++ .../features/rasterLayer/demos/rasterRgb3.tsx | 108 ++++++++++++++++++ dev-demos/features/rasterLayer/rasterNDVI.md | 3 + dev-demos/features/rasterLayer/rasterRgb3.md | 3 + dev-demos/features/tile/worldmap.md | 3 + dev-demos/features/tile/worldmap.tsx | 57 +++++++++ 6 files changed, 270 insertions(+) create mode 100644 dev-demos/features/rasterLayer/demos/rasterNDVI.tsx create mode 100644 dev-demos/features/rasterLayer/demos/rasterRgb3.tsx create mode 100644 dev-demos/features/rasterLayer/rasterNDVI.md create mode 100644 dev-demos/features/rasterLayer/rasterRgb3.md create mode 100644 dev-demos/features/tile/worldmap.md create mode 100644 dev-demos/features/tile/worldmap.tsx diff --git a/dev-demos/features/rasterLayer/demos/rasterNDVI.tsx b/dev-demos/features/rasterLayer/demos/rasterNDVI.tsx new file mode 100644 index 0000000000..cff0fb0ae1 --- /dev/null +++ b/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 ( +
+ ); +}; diff --git a/dev-demos/features/rasterLayer/demos/rasterRgb3.tsx b/dev-demos/features/rasterLayer/demos/rasterRgb3.tsx new file mode 100644 index 0000000000..b9d1b6d7b8 --- /dev/null +++ b/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 ( +
+ ); +}; diff --git a/dev-demos/features/rasterLayer/rasterNDVI.md b/dev-demos/features/rasterLayer/rasterNDVI.md new file mode 100644 index 0000000000..86dd907871 --- /dev/null +++ b/dev-demos/features/rasterLayer/rasterNDVI.md @@ -0,0 +1,3 @@ +### RasterLayer - raster ndvi +#### ndvi + \ No newline at end of file diff --git a/dev-demos/features/rasterLayer/rasterRgb3.md b/dev-demos/features/rasterLayer/rasterRgb3.md new file mode 100644 index 0000000000..32fa0b9eb6 --- /dev/null +++ b/dev-demos/features/rasterLayer/rasterRgb3.md @@ -0,0 +1,3 @@ +### RasterLayer - rasterRgb3 +#### 普通 rgb3 rasterLayer + \ No newline at end of file diff --git a/dev-demos/features/tile/worldmap.md b/dev-demos/features/tile/worldmap.md new file mode 100644 index 0000000000..3dbcc49321 --- /dev/null +++ b/dev-demos/features/tile/worldmap.md @@ -0,0 +1,3 @@ +### world +world + \ No newline at end of file diff --git a/dev-demos/features/tile/worldmap.tsx b/dev-demos/features/tile/worldmap.tsx new file mode 100644 index 0000000000..b6902e77c6 --- /dev/null +++ b/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 ( +
+ ); +};