OpenLayers WebGL瓦片图层和样式

最新推荐文章于 2025-11-19 10:33:51 发布

原创

最新推荐文章于 2025-11-19 10:33:51 发布 · 4.6k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前言

       OpenLayers普通图层使用canvas渲染，样式配置使用Style相关API，若想进一步控制渲染过程，对于layer对象通常有postrender方法（示例见Custom Animation），使用RasterSource（示例见Color Manipulation），Style的renderer方法（示例见Custom Circle Render），source的tileLoadFunction方法也可以从参数中获取当前瓦片的image。
       此外，WebGLPoints，WebGLTileLayer图层使用WebGL进行渲染，不适用原来基于canvas的样式配置和操作。其中WebGLPoints用于海量点渲染，WebGLTileLayer用于渲染瓦片地图，比如COG(具体概念见Cloud Optimized GeoTIFF，在下面_GeoTIFF源介绍_这一节有简介)。基于目前最新的API版本（v6.13.0），WebGLPoints只有相关Example，但API文档并不完整；WebGLTileLayer既有API文档又有示例。
       本文简单介绍WebGLTileLayer的图层和数据源，重点介绍其样式配置，辅以基于当前版本API的一些示例。

WebGLTile：图层和数据源介绍

该图层继承自BaseTileLayer，继承了一些通用属性，下图简单标注
在这里插入图片描述

该图层的source数据源可以指定两种，DataTileSource和TileImage
在这里插入图片描述

其中DataTileSource是GeoTIFFSource，也就是将要着重介绍的，用于加载COG的数据源的父类。该数据源没有常见的url参数，而是使用loader参数，将数组解析为瓦片。
在这里插入图片描述

这里仅介绍该类原理，常用的是它的子类GeoTIFFSource。GeoTIFFSource用于加载COG网络地址，其原理简单介绍就是使用Geotiff.js解析tif原始图像信息，和范围、波段等元信息（metaData）。这里介绍原理是为了，若将来需要对此过程进行扩展修改，也可以手动将tif信息以此种方式转为数组，使用DataTileSource的loader方法加载。
除DataTileSource外，还可以加载TileImage类的数据源。TileImage是各种瓦片地图数据源类的父类，很少直接使用，而是使用其子类，见下图
在这里插入图片描述

根据地图服务类型自行选择。
这里补充下。一般情况下，这些瓦片数据源可以使用瓦片图层（TileLayer）加载，使用WebGLTileLayer加载可以使用WebGLTileLayer的style，控制其曝光度、对比度、饱和度等，见示例WebGL Tile Layer Styles。至于常用于控制GeoTIFFSource波段渲染的color属性是否适用于瓦片地图源，并没有做测试，也暂时没想到要这样做的原因。

GeoTIFF源介绍

       GeoTIFF数据源的基础知识。这里先介绍几个概念
       遥感影像：可以简单理解为卫星照片，用像素值记录地面信息。不同的卫星、传感器产生不同的影像种类。
       波段：遥感影像分波段记录同一位置的像素。至少一个，常见3或4个，一般是红绿蓝和近红外，但也不一定。
单波段影像

真/假彩色合成：对多波段影像，将波段进行组合显示的两类方式。由于屏幕等介质一般是按照R-G-B方式显现颜色，而波段只有序号数字，数量和顺序不一定对的上，所以需要人工设定。真彩色指合成出来的影像符合真实颜色，假彩色就是不符合。
真彩色合成

假彩色合成

tif/geoTif：比较常见的遥感影像文件格式，里面有各波段图像像素信息，和坐标系、波段值、nodata（表达空值的像素值）等元信息。
COG：云优化GeoTiff，对普通tif进行处理，内部生成切片、概览，经过压缩的tif文件。
COG可以放在nginx等云容器内，网络地址作为GeoTIFFSource的url参数，见下图
Cloud Optimized GeoTIFF (COG)
在这里插入图片描述

若COG是按照R-G-B三个波段且值是0-255，可以不设置style直接渲染真彩色。若COG波段没有按照该标准或需要另设置样式，就需要设置Style参数。

Style API简介

这里简单介绍WebGLTileLayer的style参数对象
在这里插入图片描述

简单机翻了下。左侧为配置对象的key，右侧为值类型。这里可见，除variables（表达式变量）使用{key[字符串]:value[字符串|数字]}类型外，其他都使用ExpressionValue（样式表达式）。这里结合一个示例介绍下使用方法。
WebGL Tile Layer Styles
在这里插入图片描述

在这里插入图片描述

样式表达式

API文档见ExpressionValue，最好结合下面例子看。
这里先给出测试demo的主要代码，下面的几种例子都只是替换其中的style变量

// COG地址
const url = "";
// 这个获取元信息的方法附录里会解释
const metaData = await this.getGeoTifMetaData(url);
// 输出的元信息，见下图
console.log(metaData);
// 取出元信息里的波段最大最小值
const ba

最低0.47元/天解锁文章