示例效果：

代码演示：

//！ 网格位置
// 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 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();
    // ！ 根据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++)
        {
            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){
            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
        })
    }));
}

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