、
栅格瓦片 Raster Tiles
L7 的栅格瓦片图层支持图片栅格和数据栅格数类型，图片栅格更多用作于地图底图，数据栅格侧重于业务数据交互与视分析。
图片栅格
图片栅格常用场景是地图底图和卫星底图等基础地图服务，支持加载第三方瓦片数据源如高德地图、天地图、Google 第三方数据服务。同时用户自定义发布底图服务，实现离线部署。
配置图片栅格瓦片服务
const tileSource = new Source( 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer/tile/{z}/{y}/{x}',{
parser: {
type: 'rasterTile',
tileSize: 256,
zoomOffset: 0
})
![]()
数据栅格
传统的栅格数据渲染更多的是服务端将渲染图片，前端请求对应图片，数据渲染配置发生改变时。则需要向服务端重新请求新的瓦片。由于服务端受到存储空间、计算资源和网络传输的限制，传统栅格渲染可配置性灵活性弱。
数据驱动可视化
L7 的数据栅格瓦片图层渲染借助高效 WebGL 渲染能力由前端渲染完成，服务端只需要提供原始数据。图层可以根据瓦片数据值类型进行动态着色，支持动态设置数据显示区间，同时支持对瓦片栅格数据拾取，整体效率，体验极好。
![]()
![]()
栅格数据交互拾取
L7 的栅格图层支持在鼠标事件中拾取对应位置的栅格数据。
![]()
支持多种栅格数据类
用户可自定义栅格数据的解析方法、实现支持多种类型数据只支持，常见的数据格式如 GeoTIFF、Lerc、Mapbox Terrain-RGB ，用户可以根据实际技术栈生产瓦片数据格式，不受技术平台技术选型影响。
使用 format 方法格式化数据
// Lerc
const image = Lerc.decode(buffer);
// Tiff
const tiff = await GeoTIFF.fromArrayBuffer(buffer);
const image = await tiff.getImage();
const width = image.getWidth();
const height = image.getHeight();
const values = await image.readRasters();
// jpg/png
const blob: Blob = new Blob([new Uint8Array(buffer)], {type: 'image/png'});
const img = await createImageBitmap(blob);
ctx.clearRect(0, 0, 256, 256);
ctx.drawImage(img, 0, 0, 256, 256);
let imgData = ctx.getImageData(0, 0, 256, 256).data;
let arr = [];
for (let i = 0; i < imgData.length; i += 4) {
const R = imgData[i];
const G = imgData[i + 1];
const B = imgData[i + 2];
arr.push(-10000 + (R * 256 * 256 + G * 256 + B) * 0.1); // Mapbox dem
}
![]()
在线案例：高程栅格数据
Mask 数据掩模
遥感数据是离散、连续分布的无边界概念，实际应用场景中更多是通过矢量数据进行区域化管理，有明确的范围。如行政区划边界可以省份或城市进维度行划分，在农业场景中会根据地块范围划分土地，区域化管理。
传统方案需要服务端对数据进行裁剪前端显示、服务端计算占用大量计算和存储资源，一旦区块发生变更需要重新计算。L7 提供了基于前端渲染的 Mask 方案，可实现前端灵活控制栅格数据显示内容。
![]()
![]()
在线案例：卫星图 + Mask 掩模
时序数据可视化
针对大数据时序可视化场景，需要根据时间频繁的更新数据，如何做到数据层现效果更流畅，数据变化趋势更直观。L7 提供了一种数据更新机制，解决时序数据高效渲染问题。目前暂支持了点、线、面、热力图等基础图层。
![]()
![]()
结语
目前 L7 瓦片数据可视化刚刚起步，很多能力需要持续完善和丰富，多线程数据解析、3D 瓦片可视化、面向栅格数据瓦片分析能力增强、栅格数据与 AI 端智能结合提供更丰富的可视分析能力以及更好的交互体验。无论是矢量和栅格瓦片可视化在不同的业务场景与有不同诉求，欢迎有相关领域的同学参与进来共同建设完备瓦片数据可视化解决方案。
最后，欢迎广大开发者参与技术交流、合作共建、提 Issue、Star！
