Openlayers利用kriging.js实现纯前端插值
关于空间插值这一块，也是GIS一个重要的分析。前端可以通过turf.js后端可以采用contour，如果仅有少量数据需要进行插值分析并进行展示，那应当如何做？可以采用turf.js但是turf.js插值效果是真的烂。通过检索发现可以通过kriging.js去做。kriging.js是基于canvas实现的在OL中可以通过imagecanvas来实现。
一、关于kriging.js
1、GitHub地址（https://github.com/oeo4b/kriging.js）
2、核心功能
- kriging.train(t, x, y, model, sigma2, alpha):使用gaussian、exponential或spherical模型对数据集进行训练，返回的是一个variogram对象；
- kriging.grid(polygons,variogram,width);使用刚才的variogram对象使polygons描述的地理位置内的格网元素具备不一样的预测值；
- kriging.plot(canvas,grid,xlim,ylim,colors);将得到的格网grid渲染至canvas上。
二、效果图
三、demo示例
前端空间插值
四、参考文章
1、https://www.jianshu.com/p/c8473ac0b08a
2、https://www.cnblogs.com/naaoveGIS/p/9444480.html
3、https://www.cnblogs.com/giserhome/p/10851799.html
4、https://mathiasleroy.com/georeferenced-dynamic-kriging/
五、data.js数据
var data={
"features": [
{
"attributes": {
"FID": 0,
"id": 1,
"name": "Beijing US Embassy",
"x": 116.468,
"y": 39.954999999999998,
"z": 46,
"xu": 454558.72859999997,
"yu": 4422898.159
},
"geometry": {
"x": 116.468,
"y": 39.954999999999998
}
},
{
"attributes": {
"FID": 1,
"id": 2,
"name": "Temple of Heaven",
"x": 116.407,
"y": 39.886000000000003,
"z": 36,
"xu": 449297.45990000002,
"yu": 4415272.716
},
"geometry": {
"x": 116.407,
"y": 39.886000000000003
}
},
{
"attributes": {
"FID": 2,
"id": 3,
"name": "Haidian Beijing Botanical Garden",
"x": 116.20699999999999,
"y": 40.002000000000002,
"z": 40,
"xu": 432311.35320000001,
"yu": 4428280.3169999998
},
"geometry": {
"x": 116.20699999999999,
"y": 40.002000000000002
}
},
{
"attributes": {
"FID": 3,
"id": 4,
"name": "Chaoyang Olympic Sports Center116.397",
"x": 116.39700000000001,
"y": 39.981999999999999,
"z": 43,
"xu": 448514.42090000003,
"yu": 4425933.4840000002
},
"geometry": {
"x": 116.39700000000001,
"y": 39.981999999999999
}
},
{
"attributes": {
"FID": 4,
"id": 5,
"name": "Chaoyang Agricultural Exhibition Hall",
"x": 116.461,
"y": 39.936999999999998,
"z": 52,
"xu": 453948.74660000001,
"yu": 4420903.926
},
"geometry": {
"x": 116.461,
"y": 39.936999999999998
}
},
{
"attributes": {
"FID": 5,
"id": 6,
"name": "Liangxiang",
"x": 116.136,
"y": 39.741999999999997,
"z": 123,
"xu": 425971.88909999997,
"yu": 4399479.2439999999
},
"geometry": {
"x": 116.136,
"y": 39.741999999999997
}
},
{
"attributes": {
"FID": 6,
"id": 7,
"name": "Fengtai Yungang",
"x": 116.146,
"y": 39.823999999999998,
"z": 85,
"xu": 426915.51539999997,
"yu": 4408572.0729999999
},
"geometry": {
"x": 116.146,
"y": 39.823999999999998
}
},
{
"attributes": {
"FID": 7,
"id": 8,
"name": "Shunyi New Town",
"x": 116.655,
"y": 40.127000000000002,
"z": 154,
"xu": 470605.50309999997,
"yu": 4441910.1670000004
},
"geometry": {
"x": 116.655,
"y": 40.127000000000002
}
},
{
"attributes": {
"FID": 8,
"id": 12,
"name": "Donggaocun Zhen",
"x": 117.12,
"y": 40.100000000000001,
"z": 172,
"xu": 510228.20750000002,
"yu": 4438863.2359999996
},
"geometry": {
"x": 117.12,
"y": 40.100000000000001
}
},
{
"attributes": {
"FID": 9,
"id": 13,
"name": "Tongzhou New Town",
"x": 116.663,
"y": 39.886000000000003,
"z": 216,
"xu": 471185.97159999999,
"yu": 4415158.7980000004
},
"geometry": {
"x": 116.663,
"y": 39.886000000000003
}
},
{
"attributes": {
"FID": 10,
"id": 14,
"name": "Huangcunzhen",
"x": 116.404,
"y": 39.718000000000004,
"z": 226,
"xu": 448916.78909999999,
"yu": 4396628.5209999997
},
"geometry": {
"x": 116.404,
"y": 39.718000000000004
}
},
{
"attributes": {
"FID": 11,
"id": 15,
"name": "BDA",
"x": 116.506,
"y": 39.795000000000002,
"z": 216,
"xu": 457706.38530000002,
"yu": 4405121.3250000002
},
"geometry": {
"x": 116.506,
"y": 39.795000000000002
}
},
{
"attributes": {
"FID": 12,
"id": 16,
"name": "Yufazhen",
"x": 116.3,
"y": 39.520000000000003,
"z": 204,
"xu": 439831.65490000002,
"yu": 4374718.0180000002
},
"geometry": {
"x": 116.3,
"y": 39.520000000000003
}
},
{
"attributes": {
"FID": 13,
"id": 17,
"name": "Yongledianzhen",
"x": 116.783,
"y": 39.712000000000003,
"z": 198,
"xu": 481399.35399999999,
"yu": 4395815.3370000003
},
"geometry": {
"x": 116.783,
"y": 39.712000000000003
}
},
{
"attributes": {
"FID": 14,
"id": 18,
"name": "Xianghe EPA",
"x": 117.009,
"y": 39.765999999999998,
"z": 204,
"xu": 500770.85320000001,
"yu": 4401786.0719999997
},
"geometry": {
"x": 117.009,
"y": 39.765999999999998
}
},
{
"attributes": {
"FID": 15,
"id": 19,
"name": "Badaling Northwest",
"x": 115.988,
"y": 40.365000000000002,
"z": 46,
"xu": 414076.95390000002,
"yu": 4468761.409
},
"geometry": {
"x": 115.988,
"y": 40.365000000000002
}
},
{
"attributes": {
"FID": 16,
"id": 20,
"name": "East Fourth Ring Road",
"x": 116.483,
"y": 39.939,
"z": 181,
"xu": 455829.68479999999,
"yu": 4421114.7860000003
},
"geometry": {
"x": 116.483,
"y": 39.939
}
},
{
"attributes": {
"FID": 17,
"id": 21,
"name": "Yanqing town",
"x": 115.97199999999999,
"y": 40.453000000000003,
"z": 59,
"xu": 412832.08510000003,
"yu": 4478545.159
},
"geometry": {
"x": 115.97199999999999,
"y": 40.453000000000003
}
},
{
"attributes": {
"FID": 18,
"id": 22,
"name": "Miyun Reservoir",
"x": 116.911,
"y": 40.499000000000002,
"z": 63,
"xu": 492458.57429999998,
"yu": 4483147.5360000003
},
"geometry": {
"x": 116.911,
"y": 40.499000000000002
}
},
{
"attributes": {
"FID": 19,
"id": 23,
"name": "Haidian Wanliu",
"x": 116.28700000000001,
"y": 39.987000000000002,
"z": 180,
"xu": 439126.71720000001,
"yu": 4426557.75
},
"geometry": {
"x": 116.28700000000001,
"y": 39.987000000000002
}
},
{
"attributes": {
"FID": 20,
"id": 24,
"name": "Yongdingmen Inner St",
"x": 116.39400000000001,
"y": 39.875999999999998,
"z": 196,
"xu": 448178.40250000003,
"yu": 4414170.284
},
"geometry": {
"x": 116.39400000000001,
"y": 39.875999999999998
}
},
{
"attributes": {
"FID": 21,
"id": 25,
"name": "Jianshe Road",
"x": 117.304,
"y": 39.719000000000001,
"z": 55,
"xu": 526055.42509999999,
"yu": 4396613.8959999997
},
"geometry": {
"x": 117.304,
"y": 39.719000000000001
}
},
{
"attributes": {
"FID": 22,
"id": 26,
"name": "Ligong, Chengde",
"x": 117.938,
"y": 41.011000000000003,
"z": 70,
"xu": 578874.61600000004,
"yu": 4540401.8559999997
},
"geometry": {
"x": 117.938,
"y": 41.011000000000003
}
},
{
"attributes": {
"FID": 23,
"id": 27,
"name": "Fengning County City Hall",
"x": 116.652,
"y": 41.215000000000003,
"z": 59,
"xu": 470827.95390000002,
"yu": 4562682.9199999999
},
"geometry": {
"x": 116.652,
"y": 41.215000000000003
}
},
{
"attributes": {
"FID": 24,
"id": 28,
"name": "Xiahuayuan EPA",
"x": 115.29600000000001,
"y": 40.508000000000003,
"z": 61,
"xu": 355627.29269999999,
"yu": 4485537.4510000004
},
"geometry": {
"x": 115.29600000000001,
"y": 40.508000000000003
}
},
{
"attributes": {
"FID": 25,
"id": 29,
"name": "Yuxian Secondary School",
"x": 114.596,
"y": 39.845999999999997,
"z": 61,
"xu": 294324.1188,
"yu": 4413430.4780000001
},
"geometry": {
"x": 114.596,
"y": 39.845999999999997
}
},
{
"attributes": {
"FID": 26,
"id": 30,
"name": "Zhouzhou Monitoring Stations",
"x": 116.03400000000001,
"y": 39.491999999999997,
"z": 80,
"xu": 416933.99089999998,
"yu": 4371822.0190000003
},
"geometry": {
"x": 116.03400000000001,
"y": 39.491999999999997
}
},
{
"attributes": {
"FID": 27,
"id": 31,
"name": "Guan Party School, Langfang",
"x": 116.30500000000001,
"y": 39.445,
"z": 70,
"xu": 440197.23119999998,
"yu": 4366391.0480000004
},
"geometry": {
"x": 116.30500000000001,
"y": 39.445
}
},
{
"attributes": {
"FID": 28,
"id": 32,
"name": "Guyuan County welfare",
"x": 115.681,
"y": 41.667999999999999,
"z": 63,
"xu": 390196.44390000001,
"yu": 4613756.0429999996
},
"geometry": {
"x": 115.681,
"y": 41.667999999999999
}
}
]
}