欢迎使用中科锐景数据产品。
基于中科锐景的栅格数据瓦片服务,提供基于Leaflet
的栅格数据瓦片图层,方便用户快速集成数据瓦片图层。
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<!-- 引入对应版本js -->
<script src="https://unpkg.com/@ruijingrs/leaflet-raster-tile-layer@{Version}/dist/index.min.js"></script>
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);
类型 | 是否必填 | 默认值 | 说明 |
---|---|---|---|
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 时,返回当前像素点携带的数据 |
当前数据类型,指定后,将使用对应的解码公式解析源瓦片像素点所携带的数值。目前支持 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 | 假彩图 |
栅格数据瓦片聚合类型
-
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
栅格数据瓦片的数据时间,格式为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
获取栅格数据瓦片的用户凭证
包含值域最大值和最小值及颜色的数组,如
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',
},
// ...
];
图层的透明度,范围:0-1,默认为 1。
鼠标划过或者点击时,返回当前像素点携带的数据,返回值为数字或 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 | 无 |
pickDataCallback
的触发方式,目前支持hover
和click
,默认为click
。
重新设置图层的数据类型
document.getElementById('type').addEventListener('change', (e) => {
const { value } = e.target;
layer.setType(value);
});
重新设置图层的数据聚合类型,注: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);
});
重新设置图层的数据聚合类型
document.getElementById('btn').addEventListener('click', (e) => {
layer.setTime('2023/02/20 00:00:00');
});
根据瓦片携带的数据,以配置的值域及颜色进行显示,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',
},
]);
});
获取当前图层值域范围和颜色,用于图例展示等。
document.getElementById('getDomain').addEventListener('click', (e) => {
const value = layer.getCurrentDomainAndColor();
console.log(value);
});
重新设置图层的裁切区域
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]]);
});
});
设置图层透明度(0-1)
// ...
document.getElementById('opacity').addEventListener('change', (e) => {
const { value } = e.target;
layer.setOpacity(value);
});