前言

leaflet 入門(mén)開(kāi)發(fā)系列環(huán)境知識(shí)點(diǎn)了解：

• leaflet api文檔介紹，詳細(xì)介紹 leaflet 每個(gè)類的函數(shù)以及屬性等等
• leaflet 在線例子
• leaflet 插件，leaflet 的插件庫(kù)，非常有用

內(nèi)容概覽

leaflet 實(shí)現(xiàn)克里金插值功能
源代碼 demo 下載

本篇 demo 利用 leaflet api 結(jié)合 kriging 實(shí)現(xiàn)克里金插值功能，效果圖如下：

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

• 讀取插值數(shù)據(jù)源，初始化渲染克里金插值

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源碼見(jiàn)小專欄文章尾部：GIS之家leaflet小專欄

文章尾部提供源代碼下載，對(duì)本專欄感興趣的話，可以關(guān)注一波