一、效果图集
图一
图二
图三
二、核心代码
1.调用drawKriging传入参数
// lons:经度数组
// lats:纬度数组
// values:已知的值数组
// coords:是一个cesium的数据格式,[114,25,114,23,114,22],不用闭合,就一个面上所有点。
// cartesian3List:是Cartesian3格式的面的数组
// optionsValues: 自定义属性
drawKriging(lngs, lats, values, coords, cartesian3List, optionsValues) {
if (values.length > 3) {
const polygon = new Cesium.PolygonGeometry({
polygonHierarchy: new Cesium.PolygonHierarchy(cartesian3List)
})
//构造面,方便计算范围
let extent = Cesium.PolygonGeometry.computeRectangle({
polygonHierarchy: new Cesium.PolygonHierarchy(cartesian3List)
})
let canvas = this.getCanvas(values, lngs, lats, coords, extent, this.colors, optionsValues)
if (canvas != null) {
let ent = cesiumContourViewer.entities.add({
polygon: {
hierarchy: cartesian3List,
material: new Cesium.ImageMaterialProperty({
image: canvas,//使用贴图的方式将结果贴到面上
alpha: 0.6
}),
perPositionHeight: this.perPositionHeight === '0' ? false : true, // 指定是否使用每个位置的高度。
extrudedHeightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
}
});
floatingPointList.push(ent)
}
}
},
2.计算canvas画布宽和高
// 计算画布的宽度和高度
getCanvasWidthOrHeight(defaultsValues, optionsValues, extent){
// 将经纬度坐标转换为网络墨卡托投影
var WMP = new Cesium.WebMercatorProjection();
var sw = WMP.project(Cesium.Cartographic.fromDegrees(extent.west, extent.south));
var ne = WMP.project(Cesium.Cartographic.fromDegrees(extent.east, extent.north));
let webMercatorExtent = {
north: ne.y,
east: ne.x,
south: sw.y,
west: sw.x
};
defaultsValues.width = ((webMercatorExtent.east > 0 && webMercatorExtent.west < 0) ? webMercatorExtent.east + Math.abs(webMercatorExtent.west) : Math.abs(webMercatorExtent.east - webMercatorExtent.west));
defaultsValues.height = ((webMercatorExtent.north > 0 && webMercatorExtent.south < 0) ? webMercatorExtent.north + Math.abs(webMercatorExtent.south) : Math.abs(webMercatorExtent.north - webMercatorExtent.south));
if (defaultsValues.width > defaultsValues.height && defaultsValues.width > defaultsValues.maxCanvasSize) {
defaultsValues.factor = defaultsValues.width / defaultsValues.maxCanvasSize;
if (defaultsValues.height / defaultsValues.factor < defaultsValues.minCanvasSize) {
defaultsValues.factor = defaultsValues.height / defaultsValues.minCanvasSize;
}
} else if (defaultsValues.height > defaultsValues.width && defaultsValues.height > defaultsValues.maxCanvasSize) {
defaultsValues.factor = defaultsValues.height / defaultsValues.maxCanvasSize;
if (defaultsValues.width / defaultsValues.factor < defaultsValues.minCanvasSize) {
defaultsValues.factor = defaultsValues.width / defaultsValues.minCanvasSize;
}
} else if (defaultsValues.width < defaultsValues.height && defaultsValues.width < defaultsValues.minCanvasSize) {
defaultsValues.factor = defaultsValues.width / defaultsValues.minCanvasSize;
if (defaultsValues.height / defaultsValues.factor > defaultsValues.maxCanvasSize) {
defaultsValues.factor = defaultsValues.height / defaultsValues.maxCanvasSize;
}
} else if (defaultsValues.height < defaultsValues.width && defaultsValues.height < defaultsValues.minCanvasSize) {
defaultsValues.factor = defaultsValues.height / defaultsValues.minCanvasSize;
if (defaultsValues.width / defaultsValues.factor > defaultsValues.maxCanvasSize) {
defaultsValues.factor = defaultsValues.width / defaultsValues.maxCanvasSize;
}
}
defaultsValues.width = defaultsValues.width / defaultsValues.factor;
defaultsValues.height = defaultsValues.height / defaultsValues.factor;
// 如果未设定半径,则使用数据点大小因子(高度和宽度中的较大者除以这个数字产生使用的半径)
optionsValues.radius = Math.round((optionsValues.radius) ? optionsValues.radius : ((defaultsValues.width > defaultsValues.height) ? defaultsValues.width / defaultsValues.radiusFactor : defaultsValues.height / defaultsValues.radiusFactor));
// 间距计算(点半径乘以间距系数产生间距)
let spacing = optionsValues.radius * defaultsValues.spacingFactor;
// 计算canvas的最终宽度和高度
defaultsValues.width = Math.round(defaultsValues.width + spacing * 2);
defaultsValues.height = Math.round(defaultsValues.height + spacing * 2);
return defaultsValues
}
3.等值线生计算及canvas画布生成
//等值线计算canvas画布生成
getCanvas(values, lngs, lats, coords, extent, colors, optionsValues) {
let defaultsValues = {
factor: 1, // 默认值
minCanvasSize: 700, // 热力图画布的最大尺寸(以像素为单位) 默认值
maxCanvasSize: 2000, // 热力图画布的最大尺寸(以像素为单位) 默认值
radiusFactor: 60, // 半径因子(如果没有给出半径,则使用数据点大小因子(高度和宽度中的较大者除以这个数字产生使用的半径)) 默认值
spacingFactor: 1.5, // 间距系数( 边界周围的额外空间(点半径乘以这个数字产生间距)) 默认值
}
//范围(弧度)
let minx = Cesium.Math.toDegrees(extent.west);//转换为经纬度
let miny = Cesium.Math.toDegrees(extent.south);
let maxx = Cesium.Math.toDegrees(extent.east);
let maxy = Cesium.Math.toDegrees(extent.north);
let degreesExtent = {west: minx, south:miny, east: maxx, north: maxy}
defaultsValues = this.getCanvasWidthOrHeight(defaultsValues, optionsValues, degreesExtent)
let canvas = null;
//1.用克里金训练一个variogram对象
let variogram = kriging.train(values, lngs, lats, 'exponential', 0, 100);
//2.使用刚才的variogram对象使polygons描述的地理位置内的格网元素具备不一样的预测值;最后一个参数,是插值格点精度大小【(maxy - miny) / 300】/300值越大精度越高,
let grid = kriging.grid(coords, variogram,(maxy - miny) / 450);
canvas = document.createElement('canvas');
canvas.width = defaultsValues.width;
canvas.height = defaultsValues.height;
canvas.style.display = 'none';
canvas.getContext('2d').globalAlpha = this.canvasGlobalAlpha;//设置透明度
//3.将得到的格网预测值渲染到canvas画布上
canvas = kriging.plot(canvas, grid, [minx, maxx], [miny, maxy], colors);
return canvas
}
三、等值线色带配置
色带加载 方式一
let colors:[
{ min: 100, max: 9999, color: "#FF0000" },
{ min: 95, max: 100, color: "#FF4100" },
{ min: 90, max: 95, color: "#FF8100" },
{ min: 85, max: 90, color: "#FFC200" },
{ min: 80, max: 85, color: "#FDFF00" },
{ min: 75, max: 80, color: "#CFFF00" },
{ min: 70, max: 75, color: "#A1FF00" },
{ min: 65, max: 70, color: "#73FF00" },
{ min: 60, max: 65, color: "#46FF00" },
{ min: 55, max: 60, color: "#18FF00" },
{ min: 50, max: 55, color: "#00FF17" },
{ min: 45, max: 50, color: "#00FF49" },
{ min: 40, max: 45, color: "#00FF7A" },
{ min: 35, max: 40, color: "#00FFAB" },
{ min: 30, max: 35, color: "#00FFDD" },
{ min: 25, max: 30, color: "#00F0FF" },
{ min: 20, max: 25, color: "#00C0FF" },
{ min: 15, max: 20, color: "#0090FF" },
{ min: 10, max: 15, color: "#0060FF" },
{ min: 5, max: 10, color: "#0030FF" },
{ min: 0, max: 5, color: "#0000FF" },
]
色带加载 方式二
let colors = ["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"];
四、krigingjs插件库(已修改源码)
krigingjs:下载krigingjs插件库
下载后将文件添加到static静态文件下,引用方式如下:
import kriging from "../../static/kriging/kriging"