遥感数据一般比较大,一般几百MB 或者几个 GB,如何在前端浏览器可视化确实是个问题,数据量不仅数据加载缓慢、而且地图渲染性能也是个问题。
本文介绍 一个 Tiff 切片小工具,你可以非常快速的将一个大的 Tiff文件,切成不同层级地图瓦片,然后使用 L7 可视化引擎即可在前端进行可视化了。
如何使用
首先确保你电脑上已经有了 node 环境了、没有请自行安装。
安装工具包
打开命令窗口安装工具吧
npm install -g rastertile
使用
tiff2Tile -s ./src/landcover.tiff -o ./tile -z 0 -Z 5
参数介绍
- -o 瓦片输出路径
- -s 需要切片的 tiff 文件
- -z 切片最小等级
- -Z 切片最大等级
使用
- 目前支持单波段数据切片,不支持多波段
- 仅支持 3857 切片,如果不是需要先进行数据转换。
可视化
const layer = new RasterLayer({
mask: true,
maskfence: maskData // 掩膜
});
const tileSource = new Source('https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff',
{
parser: {
type: 'rasterTile',
dataType: 'arraybuffer',
tileSize: 256,
maxZoom: 13.1,
format: async data => {
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[0], width, height };
}
}
});
layer.source(tileSource)
.style({
domain: [ 0.001, 11.001 ],
clampLow: false,
rampColors: {
colors: colorList,
positions
}
});
scene.addLayer(layer);
在线demo l7.antv.vision/zh/examples… 切片工具源码:github.com/lzxue/raste…