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

1. 介绍

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

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

2. 安装

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- 引入对应版本js -->
<script src="https://unpkg.com/@ruijingrs/leaflet-raster-tile-layer@{Version}/dist/index.min.js"></script>

3. 基本使用

const map = L.map('map', {
  center: [24.59, 112.29],
  zoom: 4,
  minZoom: 2,
  maxZoom: 16,
});

const layer = L.TileLayer.rasterTile({
  type: 'PM25',
  time: '2023/02/20 00:00:00',
  agg: 'daily',
  token: 'token from ruijing',
  mode: 'show',
  pickDataCallback: (value) => {
    document.getElementById('value').innerHTML = value || '';
  },
  minNativeZoom: 0,
  // 重要，瓦片最大缩放级别，不设置会导致数据不显示
  maxNativeZoom: 7,
  // 设置正确的bounds可过滤不需要的瓦片请求，有效提高瓦片加载效率
  bounds: [
    [21.389163, 104.492109],
    [26.373805, 112.057692],
  ],
});

layer.addTo(map);

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 | 图层是否可见 | | polygons | 选填 | - | 图层的显示区域，详细设置方法见setPolygons方法示例 | | opacity | 选填 | 1 | 图层透明度 | | 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 opacity(可选)

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

4.7 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.9 pickTrigger(可选)

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

5. 图层方法

5.1 setType

重新设置图层的数据类型

document.getElementById('type').addEventListener('change', (e) => {
  const { value } = e.target;
  layer.setType(value);
});

5.2 setAgg

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

document.getElementById('agg').addEventListener('change', (e) => {
  const { value } = e.target;
  let time;

  if (value === 'daily') {
    time = '2023/02/20 00:00:00';
  }

  if (value === 'none') {
    time = '2023/02/20 09:00:00';
  }

  if (value === 'monthly') {
    time = '2023/02/01 00:00:00';
  }

  layer.setAgg(value);
  layer.setTime(time);
});

5.3 setTime

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

document.getElementById('btn').addEventListener('click', (e) => {
  layer.setTime('2023/02/20 00:00:00');
});

5.4 setDomainAndColor

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

document.getElementById('domain').addEventListener('click', (e) => {
  layer.setDomainAndColor([
    {
      min: 0,
      max: 20,
      color: '#3b82f6',
    },
    {
      min: 20,
      max: 40,
      color: '#a4cdff',
    },
    {
      min: 40,
      max: 60,
      color: '#f6e05e',
    },
  ]);
});

5.5 getCurrentDomainAndColor

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

document.getElementById('getDomain').addEventListener('click', (e) => {
  const value = layer.getCurrentDomainAndColor();
  console.log(value);
});

5.6 setPolygons

重新设置图层的裁切区域

document.getElementById('region').addEventListener('change', (e) => {
  const { value } = e.target;
  fetch(`/geojson/${value}.json`)
    .then((resp) => resp.json())
    .then((data) => {
      const geojson = L.geoJSON(data);
      layer.setPolygons([geojson.getLayers()[0]]);
    });
});

5.7 setOpacity

设置图层透明度(0-1)

// ...
document.getElementById('opacity').addEventListener('change', (e) => {
  const { value } = e.target;
  layer.setOpacity(value);
});