cesium加载krigingjs插件库⽣成等值线图⼀、效果图集
图⼀
图⼆
图三
⼆、核⼼代码
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 = puteRectangle({
polygonHierarchy: new Cesium.PolygonHierarchy(cartesian3List)
})
let canvas = Canvas(values, lngs, lats, coords, extent, lors, optionsValues)
if (canvas != null) {
青瓜的功效与作用
let ent = ities.add({
polygon: {
hierarchy: cartesian3List,
material: new Cesium.ImageMaterialProperty({
image: canvas,//使⽤贴图的⽅式将结果贴到⾯上
alpha: 0.6
}),
perPositionHeight: this.perPositionHeight === '0' ? fal : 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, h));
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 defaultsValues.height = ((h > 0 && webMercatorExtent.south < 0) ? h + Math.abs(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;
}
} el 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;
}
} el 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;
}
旅游见闻} el 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 = und((optionsValues.radius) ? optionsValues.radius : ((defaultsValues.width > defaultsValues.height) ? defaultsValues.width / de
// 间距计算(点半径乘以间距系数产⽣间距)
let spacing = optionsValues.radius * defaultsValues.spacingFactor;
// 计算canvas的最终宽度和⾼度
defaultsValues.width = und(defaultsValues.width + spacing * 2);幼儿剪纸图片
defaultsValues.height = und(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 = Degrees(extent.west);//转换为经纬度
let miny = Degrees(extent.south);
西游记99回概括
let maxx = Degrees(extent.east);
let maxy = h);
let degreesExtent = {west: minx, south:miny, east: maxx, north: maxy}
defaultsValues = CanvasWidthOrHeight(defaultsValues, optionsValues, degreesExtent)
let canvas = null;
//1.⽤克⾥⾦训练⼀个variogram对象
let variogram = ain(values, lngs, lats, 'exponential', 0, 100);
//2.使⽤刚才的variogram对象使polygons描述的地理位置内的格⽹元素具备不⼀样的预测值；最后⼀个参数，是插值格点精度⼤⼩【(maxy - miny) / 300】/300值越 let grid = id(coords, variogram,(maxy - miny) / 450);
canvas = ateElement('canvas');
canvas.width = defaultsValues.width;
canvas.height = defaultsValues.height;
canvas.style.display = 'none';
//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：
下载后将⽂件添加到static静态⽂件下，引⽤⽅式如下：
import kriging from "../../static/kriging/kriging"
