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);
 
var width = 0.0005;
var grid = kriging.grid(world, variogram, width);
var colors = ["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf",
"#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"];
kriging.plot(canvas, grid, [121.75573509037618, 122.01776807642929], [39.18501934760944, 39.39127165938733], colors);
}

• 獲取容器圖片

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

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