openlayers4 入門開發系列之前端動態渲染克裏金插值 kriging 篇（附源碼下載）
阿新 • • 發佈：2019-05-12
db2 block i++ 參數 source 文件 str value 地圖
前言
openlayers4 官網的 api 文檔介紹地址 openlayers4 api，裏面詳細的介紹 openlayers4 各個類的介紹，還有就是在線例子：openlayers4 官網在線例子，這個也是學習 openlayers4 的好素材。
openlayers4 入門開發系列的地圖服務基於 Geoserver 發布的，關於 Geoserver 方面操作的博客，可以參考以下幾篇文章：
- geoserver 安裝部署步驟
- geoserver 發布地圖服務 WMS
- geoserver 發布地圖服務 WMTS
- geoserver 集成以及部署 arcgis server 瓦片數據
內容概覽
1.基於 openlayers4 實現前端動態渲染克裏金插值 kriging 效果
2.源代碼 demo 下載
本篇的重點內容是利用 openlayers4 實現前端動態渲染克裏金插值 kriging 功能，根據配置顏色模型不同渲染效果不同：
-
顏色數組配置顏色帶少，不夠圓滑效果
-
顏色數組配置顏色帶多，比較圓滑效果
實現思路
- 利用開源 js 庫克裏金插值 kriging.js，源碼 github 見這裏：github；
關於 kriging.js 的相關介紹詳情說明，自行看 github 以及結合百度搜索。 - kriging.js 插值需要插值點，包括點坐標以及插值權重字段值，還需要插值範圍邊界，我這裏的模擬插值點以及插值邊界分別存儲在 point.js 以及 world.js 文件。
point.js：
var points = [ { "attributes": { "FID": 0, "NAME": "綿竹鎮", "TN_": 25.6 }, "geometry": { "x": 103.6905556, "y": 29.62972222 } }, { "attributes": { "FID": 1, "NAME": "高橋鎮", "TN_": 22.9 }, "geometry": { "x": 103.4222222, "y": 29.52638889 } }, ……省略號 ]
world.js :
var world = [ [ [ 104.13092800000004, 29.022763000000054 ], [ 104.11851800000005, 28.966904000000056 ], [ 104.10646800000006, 28.953798000000063 ], [ 104.08176800000007, 28.958551000000057 ], [ 104.07084300000008, 28.941115000000025 ], ……省略號 ] ]
- kriging.js 核心三個函數：
- kriging.train
- var variogram=kriging.train(t,x,y,params.krigingModel,params.krigingSigma2,params.krigingAlpha);
- kriging.grid
- var grid=kriging.grid(world,variogram,(extent[2]-extent[0])/200);
- kriging.plot
- //使用分層設色渲染
- kriging.plot(canvas,grid,[extent[0],extent[2]],[extent[1],extent[3]],params.colors);
下面詳細介紹上述函數用到的參數值：
- params 常量配置值：
var params={ krigingModel:‘exponential‘,//model還可選‘gaussian‘,‘spherical‘ krigingSigma2:0, krigingAlpha:100, canvasAlpha:0.9,//canvas圖層透明度 colors:["#00A600", "#01A600", "#03A700", "#04A700", "#05A800", "#07A800", "#08A900", "#09A900", "#0BAA00", "#0CAA00", "#0DAB00", "#0FAB00", "#10AC00", "#12AC00", "#13AD00", "#14AD00", "#16AE00", "#17AE00", "#19AF00", "#1AAF00", "#1CB000", "#1DB000", "#1FB100", "#20B100", "#22B200", "#23B200", "#25B300", "#26B300", "#28B400", "#29B400", "#2BB500", "#2CB500", "#2EB600", "#2FB600", "#31B700", "#33B700", "#34B800", "#36B800", "#37B900", "#39B900", "#3BBA00", "#3CBA00", "#3EBB00", "#3FBB00", "#41BC00", "#43BC00", "#44BD00", "#46BD00", "#48BE00", "#49BE00", "#4BBF00", "#4DBF00", "#4FC000", "#50C000", "#52C100", "#54C100", "#55C200", "#57C200", "#59C300", "#5BC300", "#5DC400", "#5EC400", "#60C500", "#62C500", "#64C600", "#66C600", "#67C700", "#69C700", "#6BC800", "#6DC800", "#6FC900", "#71C900", "#72CA00", "#74CA00", "#76CB00", "#78CB00", "#7ACC00", "#7CCC00", "#7ECD00", "#80CD00", "#82CE00", "#84CE00", "#86CF00", "#88CF00", "#8AD000", "#8BD000", "#8DD100", "#8FD100", "#91D200", "#93D200", "#95D300", "#97D300", "#9AD400", "#9CD400", "#9ED500", "#A0D500", "#A2D600", "#A4D600", "#A6D700", "#A8D700", "#AAD800", "#ACD800", "#AED900", "#B0D900", "#B2DA00", "#B5DA00", "#B7DB00", "#B9DB00", "#BBDC00", "#BDDC00", "#BFDD00", "#C2DD00", "#C4DE00", "#C6DE00", "#C8DF00", "#CADF00", "#CDE000", "#CFE000", "#D1E100", "#D3E100", "#D6E200", "#D8E200", "#DAE300", "#DCE300", "#DFE400", "#E1E400", "#E3E500", "#E6E600", "#E6E402", "#E6E204", "#E6E105", "#E6DF07", "#E6DD09", "#E6DC0B", "#E6DA0D", "#E6D90E", "#E6D710", "#E6D612", "#E7D414", "#E7D316", "#E7D217", "#E7D019", "#E7CF1B", "#E7CE1D", "#E7CD1F", "#E7CB21", "#E7CA22", "#E7C924", "#E8C826", "#E8C728", "#E8C62A", "#E8C52B", "#E8C42D", "#E8C32F", "#E8C231", "#E8C133", "#E8C035", "#E8BF36", "#E9BE38", "#E9BD3A", "#E9BC3C", "#E9BB3E", "#E9BB40", "#E9BA42", "#E9B943", "#E9B945", "#E9B847", "#E9B749", "#EAB74B", "#EAB64D", "#EAB64F", "#EAB550", "#EAB552", "#EAB454", "#EAB456", "#EAB358", "#EAB35A", "#EAB35C", "#EBB25D", "#EBB25F", "#EBB261", "#EBB263", "#EBB165", "#EBB167", "#EBB169", "#EBB16B", "#EBB16C", "#EBB16E", "#ECB170", "#ECB172", "#ECB174", "#ECB176", "#ECB178", "#ECB17A", "#ECB17C", "#ECB17E", "#ECB27F", "#ECB281", "#EDB283", "#EDB285", "#EDB387", "#EDB389", "#EDB38B", "#EDB48D", "#EDB48F", "#EDB591", "#EDB593", "#EDB694", "#EEB696", "#EEB798", "#EEB89A", "#EEB89C", "#EEB99E", "#EEBAA0", "#EEBAA2", "#EEBBA4", "#EEBCA6", "#EEBDA8", "#EFBEAA", "#EFBEAC", "#EFBFAD", "#EFC0AF", "#EFC1B1", "#EFC2B3", "#EFC3B5", "#EFC4B7", "#EFC5B9", "#EFC7BB", "#F0C8BD", "#F0C9BF", "#F0CAC1", "#F0CBC3", "#F0CDC5", "#F0CEC7", "#F0CFC9", "#F0D1CB", "#F0D2CD", "#F0D3CF", "#F1D5D1", "#F1D6D3", "#F1D8D5", "#F1D9D7", "#F1DBD8", "#F1DDDA", "#F1DEDC", "#F1E0DE", "#F1E2E0", "#F1E3E2", "#F2E5E4", "#F2E7E6", "#F2E9E8", "#F2EBEA", "#F2ECEC", "#F2EEEE", "#F2F0F0", "#F2F2F2"] //colors:["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf","#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"] };
- 讀取插值點數據源，動態構造 kriging.js 插值參數t，x， y值：
var i, j, k, n ; n = points.length; var t = Array(n); var x = Array(n); var y = Array(n); for(i = 0;i < n ; i++){ t[i] = points[i].attributes.TN_; x[i] = points[i].geometry.x; y[i] = points[i].geometry.y; var feature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([x[i], y[i]], ‘EPSG:4326‘, ‘EPSG:4326‘)), value: t[i] }); feature.setStyle(new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({color: "#00F"}) }) })); WFSVectorSource.addFeature(feature); }
更多的詳情見：GIS之家小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關註一波
openlayers4 入門開發系列之前端動態渲染克裏金插值 kriging 篇（附源碼下載）