cesium 绘制网格

最新推荐文章于 2025-03-07 17:32:40 发布

liyan_gis

最新推荐文章于 2025-03-07 17:32:40 发布

阅读量2.3k

点赞数

分类专栏： 3D 文章标签： java servlet 前端

原文链接：https://blog.youkuaiyun.com/weixin_42496466/article/details/107644193

版权

3D 专栏收录该内容

10 篇文章

订阅专栏

来源于网络，有时间的时候可以实验一下。反馈将在后面加进来

示例效果：

代码演示：

//！网格位置
// var modelMatrixWhereTo = Cesium.Transforms.eastNorthUpToFixedFrame(
// Cesium.Cartesian3.fromDegrees(113.802689907, 35.373933211, 0.00000));

//！网格容器
var custom_2DMesh = [];
var instances2DMesh = [];

function Clear2DMeshPloygons() {
//! 关闭网格
if(custom_2DMesh)
{
custom_2DMesh.show = false;
map3d.cesium3Dview.scene.primitives.remove(custom_2DMesh);
}
}

//设置值的区间(16个区间)
var range = [48,52,56,60,64,68,72,76,80,84,88,92,96,100,104];
// var range=[0,1152.1424547605388, 1218.128785640212, 1284.1151165198853, 1350.1014473995588, 1416.0877782792318, 1482.0741091589052, 1548.0604400385785, 1814.0467709182517]
//设置对应颜色信息(16颜色值)
var colorRange = [Cesium.Color.fromBytes(127, 1, 131, 255),
Cesium.Color.fromBytes(85, 1, 171, 255),
Cesium.Color.fromBytes(40, 0, 212, 255),
Cesium.Color.fromBytes(2, 1, 253, 255),
Cesium.Color.fromBytes(2, 56, 226, 255),
Cesium.Color.fromBytes(1, 109, 194, 255),
Cesium.Color.fromBytes(2, 167, 167, 255),
Cesium.Color.fromBytes(0, 196, 108, 255),
Cesium.Color.fromBytes(0, 226, 57, 255),
Cesium.Color.fromBytes(0, 255, 0, 255),
Cesium.Color.fromBytes(84, 255, 1, 255),
Cesium.Color.fromBytes(171, 255, 1, 255),
Cesium.Color.fromBytes(255, 255, 3, 255),
Cesium.Color.fromBytes(255, 171, 2, 255),
Cesium.Color.fromBytes(253, 85, 3, 255),
Cesium.Color.fromBytes(254, 1, 3, 255)
];
// var colorRange = [Cesium.Color.fromBytes(0, 16, 295, 255),
// Cesium.Color.fromBytes(0, 142, 114, 255),
// Cesium.Color.fromBytes(0, 240, 10, 255),
// Cesium.Color.fromBytes(72, 254, 0, 255),
// Cesium.Color.fromBytes(2, 56, 226, 255),
// Cesium.Color.fromBytes(1, 109, 194, 255),
// Cesium.Color.fromBytes(2, 167, 167, 255),
// Cesium.Color.fromBytes(0, 196, 108, 255),
// Cesium.Color.fromBytes(0, 226, 57, 255),
// Cesium.Color.fromBytes(0, 255, 0, 255),
// Cesium.Color.fromBytes(84, 255, 1, 255),
// Cesium.Color.fromBytes(171, 255, 1, 255),
// Cesium.Color.fromBytes(255, 255, 3, 255),
// Cesium.Color.fromBytes(255, 171, 2, 255),
// Cesium.Color.fromBytes(253, 85, 3, 255),
// Cesium.Color.fromBytes(254, 1, 3, 255)
// ];

//查找所在区间的颜色
function findRangeColor(array, val){
//如果值小于range最小的值时，则奖励0
if(val < Math.min.apply(null,array)){
return 0;
}
//如果值大于range最大的值时，则奖励最高一档
if(val > Math.max.apply(null,array)){
return array.length-1;
}
var idx = 0,i = 0,j = array.length;
for(i; i < j; i++){
if(array[i] > val){
idx = i;
break;
}
}
return idx;
};

function GenerateMeshColor(rainValue, alphaDefault) {
var curColor = Cesium.Color.fromBytes(255,255,255,120);

if(alphaDefault == undefined)
{
alphaDefault = 0.2;
}
//根据数据查询颜色值
if(rainValue > 0)
{
curColor = colorRange[findRangeColor(range, rainValue)];
}

return curColor;
}

//! 绘制维网格
function Draw2DMeshPloygons(data, ifFill, value) {
Clear2DMeshPloygons();
instances2DMesh = [];

// ！根据data
if (data != undefined) {
// var vertexs = data.vertexs;
var links = data.links;
var curdataArr = data.vertexs;

var colorArr = [];
range=[0];
var arr=[];
for(var i = 0; i != curdataArr.length / 3; ++i)
{
var zFieldValue = curdataArr[3*(i+1) - 1];
zFieldValue += parseInt(value);
arr.push(zFieldValue);

}
arr.sort(function (a, b) {
return a-b;
});
var min = arr[0];
var max = arr[arr.length - 1];
var intvl=max-min;
for(var i=0;i<15;i++){
if(i==14){
range.push(max+1);
}else {
range.push(min+(intvl/15)*(i+1));
}

}
var legendTitles=[];
for(var i = 1;i < range.length; i++){
if(i==1){
legendTitles.push('低于'+range[i]);
}
else {
if(i==range.length-1){
legendTitles.push(range[i-1] + 'range[i]' + range[i]);
legendTitles.push('高于' + range[i]);
}
else {
legendTitles.push(range[i-1] + 'range[i]' + range[i]);
}
}
}
localStorage.MeshRange=range;
for(var i = 0; i != curdataArr.length / 3; ++i)
{
var zFieldValue = curdataArr[3*(i+1) - 1];
zFieldValue += parseInt(value);
var tempColor = GenerateMeshColor(zFieldValue, 0.6);
colorArr.push( tempColor.red );
colorArr.push( tempColor.green );
colorArr.push( tempColor.blue );
colorArr.push( tempColor.alpha);
}
} else {

var vertexs = [];
var lon = 0;
var lat = 0;

var curdataArr = [];
curdataArr[0] = lon;
curdataArr[1] = lat;
curdataArr[2] = 100;

curdataArr[3] = lon + 5000;
curdataArr[4] = lat;
curdataArr[5] = 100;

curdataArr[6] = lon + 5000;
curdataArr[7] = lat + 5000;
curdataArr[8] = 100;

curdataArr[9] = lon + 5000 + 5000;
curdataArr[10] = lat;
curdataArr[11] = 100;

curdataArr[12] = lon + 5000 + 5000;
curdataArr[13] = lat + 5000;
curdataArr[14] = 100;

//网格放置位置(放置到起点经纬度位置)
var fillOrMeshGeometry = geometryMesh;
if(!ifFill)
{
fillOrMeshGeometry = Cesium.GeometryPipeline.toWireframe(geometryMesh);
}

//！图元放置位置计算
var modelMatrixWhereTo = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(data.position.x,data.position.y, 0));

var instanceMesh = new Cesium.GeometryInstance({
//geometry: geometryMesh,
geometry : fillOrMeshGeometry,
modelMatrix: modelMatrixWhereTo,
// attributes: {
// color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUEVIOLET)
// }
});

instances2DMesh.push(instanceMesh);

custom_2DMesh = map3d.cesium3Dview.scene.primitives.add(new Cesium.Primitive({
geometryInstances : instances2DMesh,
// appearance:new Cesium.PerInstanceColorAppearance( {
// translucent : true,
// closed : true,
// material: Cesium.Material.fromType('Grid')
// } )
appearance : new Cesium.PolylineColorAppearance({
translucent : false
})
}));
}
//! 绘制维网格
function UpdateMeshGridColorsByTimeData(data, ifFill, value,tmMa) {
Clear2DMeshPloygons();
// ！根据data
if (data != undefined) {
// var vertexs = data.vertexs;
var links = data.links;
var curdataArr = data.vertexs;

}
var legendTitles=[];
for(var i = 1;i < range.length; i++){
if(i==1){
legendTitles.push('低于'+range[i]);
}
else {
if(i==range.length-1){
legendTitles.push(range[i-1] + 'range[i]' + range[i]);
legendTitles.push('高于' + range[i]);
}
else {
legendTitles.push(range[i-1] + 'range[i]' + range[i]);
}
}
}
//updateLegendByMAcesh(legendTitles);
localStorage.MeshRange=range;
for(var i = 0; i != curdataArr.length / 3; ++i)
{
// var zFieldValue = curdataArr[3*(i+1) - 1];
// zFieldValue += parseInt(value);
var tempColor = GenerateMeshColor(tmMa[i]==undefined?1:tmMa[i].Z, 0.6);
colorArr.push( tempColor.red );
colorArr.push( tempColor.green );
colorArr.push( tempColor.blue );
colorArr.push( tempColor.alpha);
}
}

// ! 创建图元绘制
if(instances2DMesh.length && instances2DMesh[0] != undefined){

if(instances2DMesh[0].geometry.attributes.color.values.length == colorArr.length){
debugger
instances2DMesh[0].geometry.attributes.color.values=colorArr;
}

}

custom_2DMesh = map3d.cesium3Dview.scene.primitives.add(new Cesium.Primitive({
geometryInstances : instances2DMesh,
// appearance:new Cesium.PerInstanceColorAppearance( {
// translucent : true,
// closed : true,
// material: Cesium.Material.fromType('Grid')
// } )
appearance : new Cesium.PolylineColorAppearance({
translucent : false
})
}));
}
————————————————
版权声明：本文为优快云博主「兴诚」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/weixin_42496466/article/details/107644193