@ruijingrs/ol-raster-tile-layer

基于 Openlayers 的栅格数据瓦片图层

1. 介绍

欢迎使用中科锐景数据产品。

基于中科锐景的栅格数据瓦片服务，提供基于Openlayers的栅格数据瓦片图层，方便用户快速集成数据瓦片图层。

2. 安装

npm install @ruijingrs/ol-raster-tile-layer
# or
yarn add @ruijingrs/ol-raster-tile-layer

3. 基础使用(以 PM2.5 为例)

import { RasterTileLayer } from '@ruijingrs/ol-raster-tile-layer';

const instance = new RasterTileLayer({
  type: 'PM25',
  agg: 'daily',
  time: '2023/01/01 00:00:00',
  token: 'token from ruijing',
  opacity: 0.88,
  clipGeoJsonUrl: '/geojson/450000.json',
  pickTrigger: 'hover',
  pickDataCallback: (value) => {
    if (value) {
      // do something with value
    }
  },
});

const { dataTileLayer, clipLayer } = instance;

new Map({
  layers: [tianditu, tiandituAn, dataTileLayer, clipLayer],
  target: 'map',
  view: new View({
    projection: 'EPSG:3857',
    center: fromLonLat([108, 23]),
    zoom: 7,
    minZoom: 4,
    maxZoom: 16,
  }),
});

4. 参数说明

类型	是否必填	默认值	说明
type	必填	-	数据类型，目前支持 PM25、 PM10、 O3、 O3TCD、 NO2、NO2TCD、 SO2、 CO2、 CH4、 CO、 HCHO、 TMP、 PRE、 VIS、 RH、 PRS、 UVA、 UVB、UVT、AOD、 TCOLOR、 DCOLOR。
agg	必填	-	栅格数据聚合类型, 目前支持none、daily、monthly
time	必填	-	栅格数据时间，格式为YYYY/MM/DD HH:mm:ss
token	必填	-	获取栅格数据瓦片用户凭证
domainAndColors	选填	-	数据值域及颜色配置，如需配置，建议数组长度大于4，如[{ min: 0, max: 45, color: '#01a0ff', }, { min: 45, max: 55, color: '#00c8c7', }, { min: 55, max: 65, color: '#00dc00', }, { min: 65, max: 75, color: '#a1e632', }, { min: 75, max: 85, color: '#e6dc33'}]
visible	选填	true	图层是否可见
opacity	选填	1	图层透明度
clipGeoJsonUrl	选填	-	裁剪图层的 geojson 文件地址
pickTrigger	选填	'click'	触发 pickDataCallback 的事件类型，目前支持 'click', 'hover'
pickDataCallback	选填	-	当鼠标 hover 或者 click 时，返回当前像素点携带的数据

4.1 type(必填)

当前数据类型，指定后，将使用对应的解码公式解析源瓦片像素点所携带的数值。目前支持 PM25、 PM10、 O3、 O3TCD、 NO2、NO2TCD、 SO2、 CO2、 CH4、 CO、 HCHO、 TMP、 PRE、 VIS、 RH、 PRS、 UVA、 UVB、UVT、AOD、 TCOLOR、 DCOLOR。

类型	说明
PM25	粒径小于或等于 2.5 微米的 颗粒物
PM10	粒径在 10 微米以下的颗粒物
O3	臭氧
O3TCD	臭氧柱浓度
NO2	二氧化氮
NO2TCD	二氧化氮柱浓度
SO2	二氧化硫
CO2	二氧化碳
CH4	甲烷
CO	一氧化碳
HCHO	甲醛
TMP	温度
PRE	降水
VIS	能见度
RH	相对湿度
PRS	气压
UVA	紫外线 A
UVB	紫外线 B
UVT	总辐射
AOD	大气光学厚度
TCOLOR	真彩图
DCOLOR	假彩图

4.2 agg(必填)

栅格数据瓦片聚合类型

• type取值CO2 时，agg只能设置为monthly
• type取值O3、O3TCD、NO2、NO2TCD、SO2、CH4、CO、HCHO时，agg只能设置为daily
• type取值TCOLOR、DCOLOR时，agg只能设置为none
• type取值PM25、PM10、AOD、TMP、PRE、VIS、RH、PRS、UVA、UVB、UVT时，agg可设置为none或daily

4.3 time(必填)

栅格数据瓦片的数据时间，格式为YYYY/MM/DD HH:mm:ss，如2023/01/01 00:00:00。

• agg取值为none时，time可按小时聚合设置为2023/02/01 09:00:00、2023/02/01 10:00:00
• agg取值为daily时，小时只能为00点, 如2023/02/20 00:00:00
• agg取值为monthly时，time可设置为当月第一天的00点，如2023/02/01 00:00:00

4.4 token(必填)

获取栅格数据瓦片的用户凭证

4.5 domainAndColor(可选)

包含值域最大值和最小值及颜色的数组，如

const domainAndColor = [
  {
    min: 0,
    max: 5,
    color: '#34b300',
  },
  {
    min: 5,
    max: 10,
    color: '#3ecf00',
  },
  {
    min: 10,
    max: 15,
    color: '#46e800',
  },
  {
    min: 15,
    max: 20,
    color: '#99fd0b',
  },
  {
    min: 20,
    max: 25,
    color: '#a9ff00',
  },
  {
    min: 25,
    max: 30,
    color: '#daff00',
  },
  // ...
];

4.6 visible(可选)

图层是否可见，默认为 true。

4.7 opacity(可选)

图层的透明度，范围：0-1，默认为 1。

4.8 clipGeoJsonUrl(可选)

用于裁切图层的 GeoJSON 数据地址，如果不配置，则不进行裁切。

4.9 pickDataCallback(可选)

鼠标划过或者点击时，返回当前像素点携带的数据，返回值为数字或 null。

• TCOLOR及DCOLOR类型不支持取值回调
• 裁切瓦片后未显示部分也会返回数据，需根据经纬度范围自行判断。

数据类型对应单位

类型	单位
PM25	ug/m³
PM10	ug/m³
O3	ug/m³
O3TCD	ug/m³
NO2	ug/m³
NO2TCD	1e16molec./c㎡
SO2	du
CO2	PPM
CH4	ppb
CO	1e19molec./cm²
HCHO	1e16molec./c㎡
TMP	℃
PRE	mm
VIS	km
RH	%
PRS	hPa
UVA	W/m²
UVB	W/m²
UVT	W/m²
AOD	无

4.10 pickTrigger(可选)

pickDataCallback的触发方式，目前支持hover和click，默认为click。

5. 实例方法

5.1 setType(type)

重新设置图层的数据类型

const instance = new RasterTileLayer({
  type: 'PM25',
  agg: 'daily',
  time: '2023/01/01 00:00:00',
  token: 'token from ruijing',
});

const { dataTileLayer, clipLayer } = instance;

document.querySelector('#typeSelect').addEventListener('change', (e) => {
  const { value } = e.target; // PM25 | PM10 | ....

  instance.setType(value);
});

5.2 setAgg(agg)

重新设置图层的数据聚合类型，注：setAgg一般与setTime配合使用

const instance = new RasterTileLayer({
  type: 'PM25',
  agg: 'daily',
  time: '2023/01/01 00:00:00',
  token: 'token from ruijing',
});

const { dataTileLayer, clipLayer } = instance;

document.querySelector('#aggSelect').addEventListener('change', (e) => {
  const { value } = e.target; // none | daily | monthly

  instance.setAgg(value);
});

5.3 setTime(time)

重新设置图层的数据聚合类型

const instance = new RasterTileLayer({
  type: 'PM25',
  agg: 'daily',
  time: '2023/01/01 00:00:00',
  token: 'token from ruijing',
});

const { dataTileLayer, clipLayer } = instance;

document.querySelector('#changeTimeBtn').addEventListener('click', (e) => {
  instance.setTime('2023/02/01 00:00:00');
});

5.4 setDomainAndColor(domainAndColor)

根据瓦片携带的数据，以配置的值域及颜色进行显示，TCOLOR及DCOLOR类型不支持设置值域及颜色

const instance = new RasterTileLayer({
  type: 'PM25',
  agg: 'daily',
  time: '2023/01/01 00:00:00',
  token: 'token from ruijing',
});

// 更新图层值域范围及颜色
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
  instance.setDomainAndColors([
    {
      min: 0,
      max: 5,
      color: '#c60000',
    },
    {
      min: 5,
      max: 10,
      color: '#9d0056',
    },
    // ...
  ]);
});

5.5 getCurrentDomainAndColor()

获取当前图层值域范围和颜色，用于图例展示等。

const instance = new RasterTileLayer({
  type: 'PM25',
  agg: 'daily',
  time: '2023/01/01 00:00:00',
  token: 'token from ruijing',
});

const domainAndColor = instance.getCurrentDomainAndColor();

6. 图层方法

6.1 setOpacity(number)

设置图层透明度

// ...
const { dataTileLayer, clipLayer } = instance;

const rangeInput = document.querySelector('#range');
rangeInput.addEventListener('change', (e) => {
  dataTileLayer.setOpacity(e.target.value / 100);
});

6.2 setVisible(boolean)

设置图层可见性

// ...
const { dataTileLayer, clipLayer } = instance;

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
  dataTileLayer.setVisible(!dataTileLayer.getVisible());
});