@ruijingrs/ol-raster-tile-layer v0.9.5

基于 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. 参数说明

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。

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类型不支持取值回调
• 裁切瓦片后未显示部分也会返回数据，需根据经纬度范围自行判断。

数据类型对应单位

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());
});