1、GitHub地址：https://github.com/oeo4b/kriging.js
2、核心功能
var variogram = kriging.train(t, x, y, model, sigma2, alpha):使用gaussian、exponential或spherical等模型對數據集進行訓練，返回的是一個variogram對象；
var grid = kriging.grid(polygons,variogram,width)；polygons是插值之后需要裁切的圖形邊界信息，最后一個參數，是插值格點精度大小
kriging.plot(canvas,grid,xlim,ylim,colors);將得到的格網grid渲染至canvas上。
3、離散的點如果過多，js會報異常，因此如果遇到這種情況，需要對點進行抽稀。
4、實現功能效果：
5、示例代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>leaflet克里金空間插值</title>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
cursor: default;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet@2.2.4/dist/esri-leaflet.js"></script>
<script src="kriging.js"></script>
<script src="point.js"></script>
<script src="world.js"></script>
</head>
<body>
<canvas id="canvasMap" style="display: none;" ></canvas>
<div id="map"></div>
<script>
var map = L.map('map', {
center: [38.65953686, 120.8696333],
zoom: 9
});
L.esri.tiledMapLayer({
url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}'
}).addTo(map);
//world.js,是插值之后需要裁切的圖形邊界信息
//point.js,是要插值的離散的點
//遍歷world邊界數據，生成scope邊界線
var positions = [];
world[0].forEach(function (point) {
positions.push([point[1], point[0]]);
});
var scope = L.polyline(positions, {color: 'red'}).addTo(map);
map.fitBounds(scope.getBounds());
//根據scope邊界線，生成范圍信息
var xlim =[scope.getBounds()._southWest.lng,scope.getBounds()._northEast.lng];
var ylim =[scope.getBounds()._southWest.lat,scope.getBounds()._northEast.lat];
//進行克里金插值
function loadkriging()
{
var canvas = document.getElementById("canvasMap");
canvas.width = 1000;
canvas.height = 1000;
var n = points.length;
var t = [];//數值
var x = [];//經度
var y = [];//緯度
for (var i = 0; i < n; i++)
{
t.push(points[i].attributes.TN_);
x.push(points[i].geometry.x);
y.push(points[i].geometry.y);
L.circle([y[i], x[i]], {radius: 1}).addTo(map);
}
//對數據集進行訓練
var variogram = kriging.train(t, x, y, "exponential", 0, 100);
//使用variogram對象使polygons描述的地理位置內的格網元素具備不一樣的預測值,最后一個參數，是插值格點精度大小
var grid = kriging.grid(world, variogram, (ylim[1]-ylim[0])/150);
var colors = ["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"];
//將得到的格網grid渲染至canvas上
kriging.plot(canvas, grid, [xlim[0], xlim[1]], [ylim[0], ylim[1]], colors);
}
//將canvas對象轉換成image的URL
function returnImgae() {
var mycanvas = document.getElementById("canvasMap");
return mycanvas.toDataURL("image/png");
}
loadkriging();
var imageBounds =[[ylim[0], xlim[0]], [ylim[1], xlim[1]]];
L.imageOverlay(returnImgae(), imageBounds, {opacity: 0.8}).addTo(map);
</script>
</body>
</html>
6、完整案例代碼下載：
http://117.33.134.182:18061/file/leaflet_kriging.rar
特殊說明：本案例對kriging.js進行了定制改造，如果您繪制顏色不對，您需要把kriging.js替換成github上的原始版本。