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、sphericalsigma2 : the variance parameters of the gaussian processalpha : 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 效果圖

總結

以上是生活随笔為你收集整理的OpenLayers6（5）：基于kriging.js实现插值渲染图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。