Appearance
场景说明
以某区域长势数据为例,按照接口核心流程调取接口
接口的请求头统一为,ServiceKey 和 UserName 的获取请看入门指南
属性 | 说明 | 例如 | 是否必填 |
---|---|---|---|
ServiceKey | 密钥 | f35a*********e5680b8 | 必填 |
UserName | 用户名 | 156****1376 | 必填 |
1. 调取时间轴接口
js
// 请求:
axios.get(
'https://gw.datall.cn/productapi/jh-api/cropndviRegionApi/queryTimeAxisInfoBetweenDate',
{
params: {
regionId: 71041718850749,
cropId: 102
}
}
);
json
// 返回结果
{
"flag": true,
"code": null,
"msg": null,
"data": [
{
"dataTime": "2021-06-15",
"layerName": "JH_PRODUCT:ly_DST-HB-ZJKS_1719444224893_SummerCorn_20210615_S2_10M_grow_tif_rankid-1",
"regionId": null,
"regionCode": "DST-HB-ZJKS-YX",
"dictCropId": null,
"dictDatasetId": null,
"regionMinMaxPoint": "114.1914569701847,39.55500099601528,115.0638879039279,40.19755534804155",
"layerMinMaxPoint": "",
"thumbnailUrl": "https://gw.datall.cn/productapi/jh-api/geoserverApi/getAnimateThumbnail?layerName=JH_PRODUCT:ly_DST-HB-ZJKS_1719444224893_SummerCorn_20210615_S2_10M_grow_tif_rankid-1®ionCode=DST-HB-ZJKS-YX&BBOX=114.1914569701847,39.55500099601528,115.0638879039279,40.19755534804155&ServiceKey=1c3a0eeaafe6bbb44078bb0c2295b92b&UserName=19999999999",
"rankId": 1,
"landId": null,
"list": null,
"bbox": "114.1914569701847,39.55500099601528,115.0638879039279,40.19755534804155"
}
// ...
]
}
2. 渲染瓦片图层
以 openlayers 为例,使用刚才时间轴接口中的第一期数据,加载瓦片图层在地图上
js
import Map from 'ol/Map.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import TileWMS from 'ol/source/TileWMS.js';
import View from 'ol/View.js';
const layers = [
new TileLayer({
source: new TileWMS({
url: 'https://gw.datall.cn/productapi/jh-api/geoserverApi/wms',
params: {
LAYERS:
'JH_PRODUCT:ly_DST-HB-ZJKS_1719444224893_SummerCorn_20210615_S2_10M_grow_tif_rankid-1',
VERSION: '1.1.0',
FORMAT: 'image/png',
ServiceKey: 'f35a*************e5680b8',
UserName: '156****1376'
}
})
})
];
const map = new Map({
layers: layers,
target: 'map',
view: new View({
zoom: 4
// ...
})
});
3. 调取图例接口
js
// 请求
axios.get(
'https://gw.datall.cn/productapi/jh-api/cropndviRegionApi/queryStandard'
);
返回结果中,maxColor 为分级颜色,levelName 为分级名称
json
// 返回结果
{
"flag": true,
"code": null,
"msg": null,
"data": [
{
"id": 6,
"datasetId": 10040,
"levelName": "很差",
"min": null,
"max": 0.07,
"unit": null,
"orderNo": 1,
"minColor": "#A70024",
"maxColor": "#A70024",
"datasetName": "长势"
}
// ...
]
}
4. 调取接口,渲染图表
使用刚才时间轴接口中的第一期数据,获取当前区域长势分级数据
js
// 请求:
axios.get(
'https://gw.datall.cn/productapi/jh-api/cropndviRegionApi/queryRealtimeDataNew',
{
params: {
regionId: 71041718850749,
cropId: 102,
dataTime: '2021-06-15'
}
}
);
返回结果为当前区域各分级对应的面积,其中 areaNum 为面积,单位为亩,tenThousandAreaNum 单位为万亩
json
{
"flag": true,
"code": null,
"msg": null,
"data": {
"regionId": 71041718850749,
"datatime": "2021-06-15",
"cropId": 102,
"regionChinaName": "蔚县",
"regionEnglishName": "yuxian",
"cropName": "夏玉米",
"levelDataVos": [
{
"regionId": null,
"levelId": 12,
"areaNum": 221714.76,
"numberOfPlants": null,
"levelName": "很差",
"sortNo": 1,
"cropId": null,
"cropName": null,
"dataTime": null,
"colorCode": "#E8AF64",
"tenThousandAreaNum": 22.171476
},
{
"regionId": null,
"levelId": 18,
"areaNum": 253618.94,
"numberOfPlants": null,
"levelName": "差",
"sortNo": 2,
"cropId": null,
"cropName": null,
"dataTime": null,
"colorCode": "#D1B54D",
"tenThousandAreaNum": 25.361894
},
{
"regionId": null,
"levelId": 13,
"areaNum": 20433.63,
"numberOfPlants": null,
"levelName": "较差",
"sortNo": 3,
"cropId": null,
"cropName": null,
"dataTime": null,
"colorCode": "#B6BA36",
"tenThousandAreaNum": 2.043363
},
{
"regionId": null,
"levelId": 14,
"areaNum": 10288.26,
"numberOfPlants": null,
"levelName": "中等",
"sortNo": 4,
"cropId": null,
"cropName": null,
"dataTime": null,
"colorCode": "#83A624",
"tenThousandAreaNum": 1.028826
},
{
"regionId": null,
"levelId": 15,
"areaNum": 3029.7,
"numberOfPlants": null,
"levelName": "较好",
"sortNo": 5,
"cropId": null,
"cropName": null,
"dataTime": null,
"colorCode": "#508F15",
"tenThousandAreaNum": 0.30297
},
{
"regionId": null,
"levelId": 16,
"areaNum": 186.48,
"numberOfPlants": null,
"levelName": "好",
"sortNo": 6,
"cropId": null,
"cropName": null,
"dataTime": null,
"colorCode": "#267A0A",
"tenThousandAreaNum": 0.018648
},
{
"regionId": null,
"levelId": 17,
"areaNum": 0.0,
"numberOfPlants": null,
"levelName": "很好",
"sortNo": 7,
"cropId": null,
"cropName": null,
"dataTime": null,
"colorCode": "#006600",
"tenThousandAreaNum": 0.0
}
],
"meanOfLevelVos": null,
"cropStatistics": null,
"areaNum": 509271.77,
"numberOfPlants": 0,
"title": null,
"option": null,
"landId": null,
"levelId": null,
"tenThousandAreaNum": 50.927177,
"m": null
}
}
使用 echarts 插件渲染后得到图表
使用刚才时间轴接口中的第一期数据,获取下级区域长势分级数据
js
// 请求:
axios.get(
'https://gw.datall.cn/productapi/jh-api/cropndviRegionApi/queryRealtimeDataNextRegionNew',
{
params: {
regionId: 71041718850749,
cropId: 102,
dataTime: '2021-06-15'
}
}
);
返回结果为下级区域各分级对应的面积,其中 areaNum 为面积,单位为亩,tenThousandAreaNum 单位为万亩
json
{
"flag": true,
"code": null,
"msg": null,
"data": [
{
"regionId": 7105194972737,
"datatime": "2021-09-13",
"cropId": 102,
"regionChinaName": "西合营镇",
"regionEnglishName": "西合营镇",
"cropName": "夏玉米",
"levelDataVos": [
{
"regionId": null,
"levelId": 12,
"areaNum": 70.81,
"numberOfPlants": null,
"levelName": "很差",
"sortNo": 1,
"cropId": null,
"cropName": null,
"dataTime": null,
"colorCode": "#E8AF64",
"tenThousandAreaNum": 0.007081
},
{
"regionId": null,
"levelId": 18,
"areaNum": 62.51,
"numberOfPlants": null,
"levelName": "差",
"sortNo": 2,
"cropId": null,
"cropName": null,
"dataTime": null,
"colorCode": "#D1B54D",
"tenThousandAreaNum": 0.006251
},
{
"regionId": null,
"levelId": 13,
"areaNum": 404.85,
"numberOfPlants": null,
"levelName": "较差",
"sortNo": 3,
"cropId": null,
"cropName": null,
"dataTime": null,
"colorCode": "#B6BA36",
"tenThousandAreaNum": 0.040485
},
{
"regionId": null,
"levelId": 14,
"areaNum": 13867.71,
"numberOfPlants": null,
"levelName": "中等",
"sortNo": 4,
"cropId": null,
"cropName": null,
"dataTime": null,
"colorCode": "#83A624",
"tenThousandAreaNum": 1.386771
},
{
"regionId": null,
"levelId": 15,
"areaNum": 57725.7,
"numberOfPlants": null,
"levelName": "较好",
"sortNo": 5,
"cropId": null,
"cropName": null,
"dataTime": null,
"colorCode": "#508F15",
"tenThousandAreaNum": 5.77257
},
{
"regionId": null,
"levelId": 16,
"areaNum": 570.83,
"numberOfPlants": null,
"levelName": "好",
"sortNo": 6,
"cropId": null,
"cropName": null,
"dataTime": null,
"colorCode": "#267A0A",
"tenThousandAreaNum": 0.057083
},
{
"regionId": null,
"levelId": 17,
"areaNum": 0,
"numberOfPlants": null,
"levelName": "很好",
"sortNo": 7,
"cropId": null,
"cropName": null,
"dataTime": null,
"colorCode": "#006600",
"tenThousandAreaNum": 0
}
],
"meanOfLevelVos": null,
"cropStatistics": null,
"areaNum": 72702.41,
"numberOfPlants": 0,
"title": null,
"option": null,
"landId": null,
"levelId": null,
"tenThousandAreaNum": 7.270241,
"m": null
}
// ...
]
}
使用 echarts 插件渲染后得到图表