image.png
遥感数据一般比较大，一般几百MB 或者几个 GB，如何在前端浏览器可视化确实是个问题，数据量不仅数据加载缓慢、而且地图渲染性能也是个问题。
本文介绍 一个 Tiff 切片小工具，你可以非常快速的将一个大的 Tiff文件，切成不同层级地图瓦片，然后使用 L7 可视化引擎即可在前端进行可视化了。

如何使用

首先确保你电脑上已经有了 node 环境了、没有请自行安装。

安装工具包

打开命令窗口安装工具吧

  1. npm install -g rastertile

使用

  1. tiff2Tile  -s ./src/landcover.tiff -o ./tile -z 0 -Z 5

参数介绍

  • -o 瓦片输出路径
  • -s 需要切片的 tiff 文件
  • -z 切片最小等级

  • -Z 切片最大等级

    使用

  • 目前支持单波段数据切片，不支持多波段

  • 仅支持 3857 切片,如果不是需要先进行数据转换。

可视化

  1. const layer = new RasterLayer({
  2.   mask: true,
  3.   maskfence: maskData // 掩膜
  4. });
  6. const tileSource = new Source('https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff',
  7.         {
  8.           parser: {
  9.             type: 'rasterTile',
  10.             dataType: 'arraybuffer',
  11.             tileSize: 256,
  12.             maxZoom: 13.1,
  13.             format: async data => {
  14.               const tiff = await GeoTIFF.fromArrayBuffer(data);
  15.               const image = await tiff.getImage();
  16.               const width = image.getWidth();
  17.               const height = image.getHeight();
  18.               const values = await image.readRasters();
  19.               return { rasterData: values[0], width, height };
  20.             }
  21.           }
  22.         });
  24.       layer.source(tileSource)
  25.         .style({
  26.           domain: [ 0.001, 11.001 ],
  27.           clampLow: false,
  28.           rampColors: {
  29.             colors: colorList,
  30.             positions
  31.           }
  32.         });
  34.       scene.addLayer(layer);

在线demo https://l7.antv.vision/zh/examples/tile/raster#tiff
切片工具源码:https://github.com/lzxue/raster2tiles