OpenLayers6（5）：基于kriging.js实现插值渲染图

1 版本

• OpenLayers：6.4.3

---

2 相关配置

import kriging from '@sakitam-gis/kriging';

---

3 使用kriging.js

3.1 数据准备

待准备数据以通用的geojson数据格式即可

• 待插值得矢量点数据：本例使用河南省XXX点数据
• 待插值的范围边界数据：本例使用河南省边界

3.2 样本训练

The train method in the kriging object fits your input to whatever variogram model you specify - gaussian, exponential or spherical - and returns a variogram object.

/**
 t : 代表需要进行插值的权重字段 数组
 x : X轴坐标 数组
 y : Y轴坐标 数组
 model : 模型 gaussian、exponential、spherical
 sigma2 : the variance parameters of the gaussian process
 alpha : the prior of the variogram model
*/
const variogram = kriging.train(t, x, y, model, sigma2, alpha)

3.3 生成插值格网

 /**
 coord : 格网剪裁的边界
 variogram : 上步生成的变异函数
 width : 格网宽度
*/
const grid = kriging.grid(coord, variogram, width);

3.4 openlayers中绘制canvas

/**
 本函数将grid绘制在canvas上
 canvas : canvas dom 元素
 grid : 上部创建的格网
 xlim : X轴长度
 ylim : Y轴长度
 color: 颜色数组，例如：["#9900FF", "#0500FF", "#00FFF3", "#00FF28", "#F3FF00", "#FF9E00", 
        "#FF0000"]
*/
kriging.plot(canvas, grid, xlim, ylim, color);

3.5 ImageCanvas加载插值图层

 Olkriging.prototype.addLayer = (grid, options) => {
            this_.mCanvasLayer = new ImageLayer({
                title: options.type,
                noSwitcherDelete: true,
                source: new ImageCanvasSource({
                    canvasFunction: (extent, resolution, pixelRatio, size) => {
                        const canvas = document.createElement('canvas');
                        canvas.width = size[0];
                        canvas.height = size[1];
                        canvas.style.display = 'block';
                        canvas.getContext('2d').globalAlpha = options.alpha / 100;
                        kriging.plot(canvas, grid, [extent[0], extent[2]], [extent[1], 
                        extent[3]], this_.mColor);
                        return canvas;
                    },
                    projection: 'EPSG:4326'
                })
            });
            this_.mMap.addLayer(this_.mCanvasLayer);
        }

3.6 查看预测值

/**
 xnew: X坐标
 ynew: Y坐标
 variogram: 变异函数
 predicted : 当前位置的预测值
*/
const predicted = kriging.predict(xnew, ynew, variogram);

---

4 效果图