openlayers4 入门开发系列之前端动态渲染克里金插值 kriging 篇（附源码下载）

前言

openlayers4 官网的 api 文档介绍地址 openlayers4 api，里面详细的介绍 openlayers4 各个类的介绍，还有就是在线例子：openlayers4 官网在线例子，这个也是学习 openlayers4 的好素材。

openlayers4 入门开发系列的地图服务基于 Geoserver 发布的，关于 Geoserver 方面操作的博客，可以参考以下几篇文章：

内容概览

1.基于 openlayers4 实现前端动态渲染克里金插值 kriging 效果
2.源代码 demo 下载

本篇的重点内容是利用 openlayers4 实现前端动态渲染克里金插值 kriging 功能，根据配置颜色模型不同渲染效果不同：

  1. 颜色数组配置颜色带少，不够圆滑效果

  2. 颜色数组配置颜色带多，比较圆滑效果

实现思路

  • 利用开源 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 核心三个函数：
  1. kriging.train
  • var variogram=kriging.train(t,x,y,params.krigingModel,params.krigingSigma2,params.krigingAlpha);
  1. kriging.grid
  • var grid=kriging.grid(world,variogram,(extent[2]-extent[0])/200);
  1. kriging.plot
  • //使用分层设色渲染
  • kriging.plot(canvas,grid,[extent[0],extent[2]],[extent[1],extent[3]],params.colors);

下面详细介绍上述函数用到的参数值：

  1. 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"]
};

 

  1. 读取插值点数据源，动态构造 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之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

 

posted @ 2019-05-12 12:12  GIS之家  阅读(5464)  评论(8)  编辑  收藏  举报