leaflet 實現克里金插值功能(附源碼下載)

前言

leaflet 入門開發系列環境知識點了解：

• leaflet api文檔介紹，詳細介紹 leaflet 每個類的函數以及屬性等等
• leaflet 在線例子
• leaflet 插件，leaflet 的插件庫，非常有用

內容概覽

leaflet 實現克里金插值功能
源代碼 demo 下載

本篇 demo 利用 leaflet api 結合 kriging 實現克里金插值功能，效果圖如下：

實現思路
kriging 渲染空間插值在容器 canvas，然后 canvas 容器以圖片圖層形式疊加在 leaflet 地圖上

• 讀取插值數據源，初始化渲染克里金插值

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

• 獲取容器圖片

完整demo源碼見小專欄文章尾部：GIS之家leaflet小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波