cesium + kriging.js動態生成克里金圖

kriging.js GIThub地址 :: https://github.com/oeo4b/kriging.js/blob/master/kriging.js.

js文件下載下來直接引用就可以

直接貼代碼

HTML半部分:

// 引入js文件 <script src="js/kriging.js" type="text/javascript"></script><canvas id="canvasMap" style="display:none;"></canvas>

js部分:

function loadkriging() {// 獲取畫布var canvas = document.getElementById("canvasMap");canvas.width = 2000;canvas.height = 2000;var n = stationData.length;var t = [];var x = [];var y = [];for (var i = 0; i < n; i++) {if (aqTypeCurrent == 'aqi'){t.push(stationData[i].aqi); // 權重值 數據值}// 經緯度點x.push(stationData[i].lon);// xy.push(stationData[i].lat); // y}var variogram = kriging.train(t, x, y, "exponential", 0, 100);var grid = kriging.grid(data_scoure, variogram, 0.0008);// 顏色var colors = ['#68b0dc','#85bcd2','#a9c9c6','#bdd5bd','#d4ddb5','#e4eaa9','#fafb97','#f4e58d','#f8cb72','#f1b079','#fc9b5e','#f5875e','#ef604f',];kriging.plot(canvas, grid, [114.03797, 114.89431], [36.36971, 36.90616], colors);}function returnImgae() {var mycanvas = document.getElementById("canvasMap");return mycanvas.toDataURL("image/png"); }loadkriging();viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({url:returnImgae(),rectangle: new Cesium.Rectangle(Cesium.Math.toRadians(114.03797),Cesium.Math.toRadians(36.36971),Cesium.Math.toRadians(114.89431),Cesium.Math.toRadians(36.90616))}));// data_scoure 面邊界數據 格式[[],[],[],[],....[],[],] // [114.03797, 114.89431], [36.36971, 36.90616] 畫布范圍

效果:

總結

以上是生活随笔為你收集整理的cesium + kriging.js动态生成克里金图的全部內容，希望文章能夠幫你解決所遇到的問題。

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