Raster Layer 迁移到 Device API (#2128)

* chore: raster * chore: raster * docs: 文档描述 * feat: raster * fix: raster rgb --------- Co-authored-by: yuqi.pyq <[email protected]>
antvis · Dec 13, 2023 · 45a03ba · 45a03ba
1 parent e16d42b
commit 45a03ba
Show file tree

Hide file tree

Showing 32 changed files with 408 additions and 318 deletions.
diff --git a/dev-demos/features/point/pointFillImage.md b/dev-demos/features/point/pointFillImage.md
@@ -56,7 +56,7 @@ export default () => {
         })
         .shape('marker')
         .size(36)
-        .active(true)
+        // .active(true)
         .style({
             rotation: 90
         })

diff --git a/dev-demos/raster/image/demos/image.tsx b/dev-demos/raster/image/demos/image.tsx
@@ -10,6 +10,7 @@ export default () => {
 
     const scene = new Scene({
         id: 'map',
+        renderer: 'device',
         map: new GaodeMap({
           style: 'light',
           center: [ 121.268, 30.3628 ],
@@ -18,17 +19,17 @@ export default () => {
       });
 
       scene.on('loaded', () => {
-     const url1 =
-        'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788';
-      const layer1 = new RasterLayer({
-        zIndex: 0,
-      }).source(url1, {
-        parser: {
-          type: 'rasterTile',
-          tileSize: 256,
-        },
-      });
-      scene.addLayer(layer1);
+    //  const url1 =
+    //     'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788';
+    //   const layer1 = new RasterLayer({
+    //     zIndex: 0,
+    //   }).source(url1, {
+    //     parser: {
+    //       type: 'rasterTile',
+    //       tileSize: 256,
+    //     },
+    //   });
+      // scene.addLayer(layer1);
         const layer = new ImageLayer({});
 
         layer.source(
@@ -41,6 +42,7 @@ export default () => {
           }
         );
         scene.addLayer(layer);
+        // scene.startAnimate();
 
 
       })

diff --git a/dev-demos/raster/image/image.md b/dev-demos/raster/image/image.md
@@ -1,6 +1,6 @@
 ---
 group:
-  path: 'image'
+  path: 'image-device'
   title: 图片
 ---
 ### 图片图层

diff --git a/dev-demos/raster/multiband/lc_08/432.tsx b/dev-demos/raster/multiband/lc_08/432.tsx
@@ -4,8 +4,8 @@ import { Select } from 'antd';
 import 'antd/es/select/style/index';
 // @ts-ignore
 import { Map } from '@antv/l7-maps';
-import React, { useEffect } from 'react';
 import * as GeoTIFF from 'geotiff';
+import React, { useEffect } from 'react';
 
 async function getTiffData(url: string) {
   const response = await fetch(url);
@@ -19,6 +19,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
+      renderer: 'device',
       map: new Map({
         center: [130.5, 47],
         zoom: 10.5,
@@ -29,20 +30,20 @@ export default () => {
       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',
-          },
-        },
-      });
-      scene.addLayer(layer2);
+      // const layer2 = new RasterLayer({
+      //   zIndex: 1,
+      // }).source(url2, {
+      //   parser: {
+      //     type: 'rasterTile',
+      //     tileSize: 256,
+      //     wmtsOptions: {
+      //       layer: 'img',
+      //       tileMatrixset: 'w',
+      //       format: 'tiles',
+      //     },
+      //   },
+      // });
+      // scene.addLayer(layer2);
       const url1 =
         'https://gw.alipayobjects.com/zos/raptor/1667832825992/LC08_3857_clip_2.tif';
       const tiffdata = await getTiffData(url1);

diff --git a/dev-demos/raster/multiband/lc_08/NDBI.tsx b/dev-demos/raster/multiband/lc_08/NDBI.tsx
@@ -2,8 +2,8 @@
 import { RasterLayer, Scene } from '@antv/l7';
 // @ts-ignore
 import { Map } from '@antv/l7-maps';
-import React, { useEffect } from 'react';
 import * as GeoTIFF from 'geotiff';
+import React, { useEffect } from 'react';
 
 async function getTiffData(url: string) {
   const response = await fetch(url);
@@ -15,6 +15,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
+      renderer: 'device',
       map: new Map({
         center: [130.5, 47],
         zoom: 10.5,
@@ -88,7 +89,7 @@ export default () => {
           },
         });
 
-      scene.addLayer(layer2);
+      // scene.addLayer(layer2);
       scene.addLayer(layer);
     });
   }, []);

diff --git a/dev-demos/raster/multiband/lc_08/NDVI.tsx b/dev-demos/raster/multiband/lc_08/NDVI.tsx
@@ -2,8 +2,8 @@
 import { RasterLayer, Scene } from '@antv/l7';
 // @ts-ignore
 import { Map } from '@antv/l7-maps';
-import React, { useEffect } from 'react';
 import * as GeoTIFF from 'geotiff';
+import React, { useEffect } from 'react';
 
 async function getTiffData(url: string) {
   const response = await fetch(url);
@@ -15,6 +15,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
+      renderer: 'device',
       map: new Map({
         center: [130.5, 47],
         zoom: 10.5,

diff --git a/dev-demos/raster/multiband/lc_08/NDWI.tsx b/dev-demos/raster/multiband/lc_08/NDWI.tsx
@@ -2,8 +2,8 @@
 import { RasterLayer, Scene } from '@antv/l7';
 // @ts-ignore
 import { Map } from '@antv/l7-maps';
-import React, { useEffect } from 'react';
 import * as GeoTIFF from 'geotiff';
+import React, { useEffect } from 'react';
 
 async function getTiffData(url: string) {
   const response = await fetch(url);
@@ -15,6 +15,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
+      renderer: 'device',
       map: new Map({
         center: [130.5, 47],
         zoom: 10.5,
@@ -87,7 +88,7 @@ export default () => {
           },
         });
 
-      scene.addLayer(layer2);
+      // scene.addLayer(layer2);
       scene.addLayer(layer);
     });
   }, []);

diff --git a/dev-demos/raster/multiband/lc_08/rgb.tsx b/dev-demos/raster/multiband/lc_08/rgb.tsx
@@ -2,8 +2,8 @@
 import { RasterLayer, Scene, metersToLngLat } from '@antv/l7';
 // @ts-ignore
 import { Map } from '@antv/l7-maps';
-import React, { useEffect } from 'react';
 import * as GeoTIFF from 'geotiff';
+import React, { useEffect } from 'react';
 
 async function getTiffData(url: string) {
   const response = await fetch(url);
@@ -15,7 +15,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
-
+      renderer: 'device',
       map: new Map({
         center: [130.5, 47],
         zoom: 2,
@@ -33,8 +33,8 @@ export default () => {
       ).json();
       const layer = new RasterLayer({
         zIndex: 10,
-        mask: true,
-        maskfence: maskData,
+        // mask: true,
+        // maskfence: maskData,
       });
       layer
         .source(
@@ -78,6 +78,8 @@ export default () => {
         .style({
           opacity: 1,
         });
+
+      scene.startAnimate();
       scene.addLayer(layer);
     });
   }, []);

diff --git a/dev-demos/raster/single/demos/light.tsx b/dev-demos/raster/single/demos/light.tsx
@@ -2,8 +2,8 @@
 import { RasterLayer, Scene } from '@antv/l7';
 // @ts-ignore
 import { Map } from '@antv/l7-maps';
-import React, { useEffect } from 'react';
 import * as GeoTIFF from 'geotiff';
+import React, { useEffect } from 'react';
 
 async function getTiffData() {
   const response = await fetch(
@@ -16,79 +16,91 @@ async function getTiffData() {
 export default () => {
   useEffect(() => {
     const scene = new Scene({
-        id: 'map',
-        map: new Map({
-          center: [ 105, 37.5 ],
-          zoom: 2.5
-        })
-      });
-      scene.on('loaded', () => {
-        addLayer();
+      id: 'map',
+      renderer: 'device',
+      map: new Map({
+        center: [105, 37.5],
+        zoom: 2.5,
+      }),
+    });
+    scene.on('loaded', () => {
+      addLayer();
+    });
+    async function getTiffData() {
+      const response = await fetch(
+        'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF182013.tiff',
+      );
+      const arrayBuffer = await response.arrayBuffer();
+      const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+      const image = await tiff.getImage();
+      const width = image.getWidth();
+      const height = image.getHeight();
+      const values = await image.readRasters();
+      return {
+        data: values[0],
+        width,
+        height,
+      };
+    }
+
+    async function addLayer() {
+      const tiffdata = await getTiffData();
+
+      const layer = new RasterLayer({
+        zIndex: 2,
+        visible: true,
       });
-      async function getTiffData() {
-        const response = await fetch(
-          'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF182013.tiff'
-        );
-        const arrayBuffer = await response.arrayBuffer();
-        const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
-        const image = await tiff.getImage();
-        const width = image.getWidth();
-        const height = image.getHeight();
-        const values = await image.readRasters();
-        return {
-          data: values[0],
-          width,
-          height
-        };
-      }
-
-      async function addLayer() {
-        const tiffdata = await getTiffData();
-
-        const layer = new RasterLayer({
-          zIndex: 2,
-          visible:false,
-        });
-        layer
-          .source(tiffdata.data, {
-            parser: {
-              type: 'raster',
-              width: tiffdata.width,
-              height: tiffdata.height,
-              extent: [ 73.4821902409999979, 3.8150178409999995, 135.1066187319999869, 57.6300459959999998 ]
-            }
-          })
-          .style({
-            clampLow: false,
-            clampHigh: false,
-            domain: [ 0, 90 ],
-            nodataValue: 0,
-            rampColors: {
-              // type:'quantize',
-              // colors:['#1b9e77','#d95f02','#7570b3','#e7298a','#66a61e','#e6ab02'],
-              colors: [ 'rgba(92,58,16,0)', 'rgba(92,58,16,0)', '#fabd08', '#f1e93f', '#f1ff8f', '#fcfff7' ],
-              positions: [ 0, 0.05, 0.1, 0.25, 0.5, 1.0 ]
-            }
-          });
-          const raster = new RasterLayer({
-            zIndex: 2,
-            maskLayers: [layer],
-            visible: true,
-            enableMask: true,
-        }).source(
-            'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788',
-            {
-                parser: {
-                    type: 'rasterTile',
-                    tileSize: 256,
-                },
-            },
-        ).style({
-            opacity: 1
+      layer
+        .source(tiffdata.data, {
+          parser: {
+            type: 'raster',
+            width: tiffdata.width,
+            height: tiffdata.height,
+            extent: [
+              73.4821902409999979, 3.8150178409999995, 135.1066187319999869,
+              57.6300459959999998,
+            ],
+          },
+        })
+        .style({
+          clampLow: false,
+          clampHigh: false,
+          domain: [0, 90],
+          nodataValue: 0,
+          rampColors: {
+            // type:'quantize',
+            // colors:['#1b9e77','#d95f02','#7570b3','#e7298a','#66a61e','#e6ab02'],
+            colors: [
+              'rgba(92,58,16,0)',
+              'rgba(92,58,16,0)',
+              '#fabd08',
+              '#f1e93f',
+              '#f1ff8f',
+              '#fcfff7',
+            ],
+            positions: [0, 0.05, 0.1, 0.25, 0.5, 1.0],
+          },
         });
-        scene.addLayer(raster);
-        scene.addLayer(layer);
-      }
+      //   const raster = new RasterLayer({
+      //     zIndex: 2,
+      //     maskLayers: [layer],
+      //     visible: true,
+      //     enableMask: true,
+      // }).source(
+      //     'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788',
+      //     {
+      //         parser: {
+      //             type: 'rasterTile',
+      //             tileSize: 256,
+      //         },
+      //     },
+      // ).style({
+      //     opacity: 1
+      // });
+      // scene.addLayer(raster);
+      scene.addLayer(layer);
+      scene.startAnimate();
+    }
   }, []);
   return (
     <div