示例效果：

代码演示：

//！ 网格位置
// 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最小的值时，则奖励0if(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 = [];// ！ 根据dataif (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 links = new Uint32Array(6);links[0] = 0;links[1] = 1;links[2] = 2;links[3] = 1;links[4] = 3;links[5] = 4;}// ! 创建图元绘制var geometryMesh = new Cesium.Geometry({attributes: {position: new Cesium.GeometryAttribute({componentDatatype: Cesium.ComponentDatatype.DOUBLE,componentsPerAttribute: 3,values: curdataArr}),color: new Cesium.GeometryAttribute({componentDatatype : Cesium.ComponentDatatype.FLOAT,componentsPerAttribute : 4,values: colorArr})},indices: links,primitiveType: Cesium.PrimitiveType.TRIANGLES   ,boundingSphere: Cesium.BoundingSphere.fromVertices(curdataArr),vertexFormat: Cesium.VertexFormat.POSITION_AND_COLOR});//网格放置位置(放置到起点经纬度位置)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();// ！ 根据dataif (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++){arr.push(tmMa[i]==undefined?1:tmMa[i].Z);}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]);}}}//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){debuggerinstances2DMesh[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})}));
}

感谢支持技术分享，请扫码点赞支持：

cesium实现绘制网格效果相关推荐

Cesium解决方案绘制网格绘制经纬度栅格
遇到的客户需求在Cesium的地图上绘制可随缩放变化的网格以及固定的经纬度栅格需求1:绘制网格附上代码 var GridImagery = new Cesium.GridImageryProvi ...
【MATLAB】三维图形绘制 ( 绘制网格 + 等高线 | meshc 函数 | 绘制平面 + 等高线 | surfc 函数 )
文章目录一.绘制网格 + 等高线 1.meshc 函数 2.代码示例二.绘制平面 + 等高线 1.surfc 函数 2.代码示例一.绘制网格 + 等高线 1.meshc 函数 meshc 函数参 ...
使用c#制作打字游戏_使用打字稿iii绘制网格构建游戏4 5
使用c#制作打字游戏 Chapter III in the series of tutorials on how to build a game from scratch with TypeScrip ...
制作多重叠加网格效果
本文介绍使用动作为图像添加任意形状的多重叠加网格效果的方法. 原图效果图 ◆ ◆ ◆ 步骤及说明使用钢笔工具或形状工具自定义路径. 比如,使用矩形工具绘制正方形的路径,再使用自由变换命令旋转 ...
ps制作网格效果步骤和ps怎么做网格的思路
常看见一些带网格的图片来做背景,那么ps教程中怎么做网格效果的背景图片呢?对PS感兴趣的朋友可加PS学习交流群:142574315 下面是ps制作网格背景图片的制作步骤: 1.在photoshop软件 ...
【超图+CESIUM】【基础API使用示例】22、超图｜CESIUM - 标绘面：Cesium.DrawHandler绘制面Cesium.DrawMode.Polygon
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
【AI实用教程】-用AI绘制网格花卉，你知道吗？
借助这款行业标准的矢量图形软件,您可以制作适用于印刷.Web.视频和移动设备的徽标.图标.绘图.版式和插图的矢量图设计软件.作为一款非常好的矢量图形处理工具,该软件主要应用于印刷出版.海报书籍排版.专 ...
[Direct2D开发] 绘制网格
[Direct2D开发] 绘制网格原文: [Direct2D开发] 绘制网格转载请注明出处:http://www.cnblogs.com/Ray1024 一.引言最近在使用Direct2D进行绘 ...
【MATLAB】三维图形绘制 ( 三维平面图 | 二维网格 | meshgrid 函数 | 绘制网格 | mesh 函授 | 绘制平面 | surf 函数 | 绘制等高线 | contour 函数 )
文章目录一.二维网格 1.线图与平面图 2.meshgrid 函数生成二维网格二.绘制网格 1.mesh 函数绘制网格 2.代码示例三.绘制平面 1.surf 函数绘制平面 2.代码示例四 ...

cesium实现绘制网格效果

感谢支持技术分享，请扫码点赞支持：

cesium实现绘制网格效果相关推荐

最新文章

热门文章