leaflet 使用kriging.js实现前端自定义插值

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、实现功能效果：

leaflet 使用kriging.js实现前端自定义插值

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 );
  }

  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上的原始版本。