Cesium之单体化--classificationType

最新推荐文章于 2025-06-17 14:32:00 发布

Alice爱俪丝

最新推荐文章于 2025-06-17 14:32:00 发布

阅读量1.2w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Cesium JavaScript webGIS 文章标签： Cesium JavaScript 单体化

本文链接：https://blog.youkuaiyun.com/qq_18144905/article/details/82499032

JavaScript 同时被 3 个专栏收录

51 篇文章

订阅专栏

Cesium

26 篇文章

订阅专栏

webGIS

25 篇文章

订阅专栏

本文介绍如何使用Cesium中的classificationType参数实现三维场景中树木的单体化显示，通过具体代码示例展示了四棵树的位置设定、旋转和平移操作，以及不同颜色和透明度的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

略做修改的官网demo

Cesium中提供的【classificationType : Cesium.ClassificationType.CESIUM_3D_TILE】参数，可以轻松实现单体化，下面的四棵树可以明显区分。

center = new Cesium.Cartesian3(1216409.0189737265, -4736252.144235287, 4081393.6027081604);
modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
hprRotation = Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(5.785339046755887, 0.0, 0.0));
hpr = Cesium.Matrix4.fromRotationTranslation(hprRotation, new Cesium.Cartesian3(0.4, 0.0, -2.0));
Cesium.Matrix4.multiply(modelMatrix, hpr, modelMatrix);

var treeHighlight1 = scene.primitives.add(new Cesium.ClassificationPrimitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry : new Cesium.EllipsoidGeometry({
            radii : new Cesium.Cartesian3(3.25, 5.0, 4.0)
        }),
        modelMatrix : modelMatrix,
        attributes : {
            color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString('#F26419').withAlpha(0.5)),
            show : new Cesium.ShowGeometryInstanceAttribute(true)
        },
        id : 'volume 1'
    }),
    classificationType : Cesium.ClassificationType.CESIUM_3D_TILE
}));

center = new Cesium.Cartesian3(1216404.8844045496, -4736255.287065536, 4081392.010192471);
modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
hprRotation = Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(5.785339046755887, 0.0, 0.0));
hpr = Cesium.Matrix4.fromRotationTranslation(hprRotation, new Cesium.Cartesian3(-0.25, 0.0, -2.0));
Cesium.Matrix4.multiply(modelMatrix, hpr, modelMatrix);

var treeHighlight2 = scene.primitives.add(new Cesium.ClassificationPrimitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry : new Cesium.EllipsoidGeometry({
            radii : new Cesium.Cartesian3(3.25, 5.0, 4.0)
        }),
        modelMatrix : modelMatrix,
        attributes : {
            color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString('#F03A47').withAlpha(0.5)),
            show : new Cesium.ShowGeometryInstanceAttribute(true)
        },
        id : 'volume 2'
    }),
    classificationType : Cesium.ClassificationType.CESIUM_3D_TILE
}));

center = new Cesium.Cartesian3(1216398.813990024, -4736258.039875737, 4081387.9562678365);
modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
var translation = Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(0.0, 0.0, -2.0));
Cesium.Matrix4.multiply(modelMatrix, translation, modelMatrix);

var treeHighlight3 = scene.primitives.add(new Cesium.ClassificationPrimitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry : new Cesium.EllipsoidGeometry({
            radii : new Cesium.Cartesian3(2.45, 2.45, 3.0)
        }),
        modelMatrix : modelMatrix,
        attributes : {
            color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString('#004FFF').withAlpha(0.5)),
            show : new Cesium.ShowGeometryInstanceAttribute(true)
        },
        id : 'volume 3'
    }),
    classificationType : Cesium.ClassificationType.CESIUM_3D_TILE
}));

center = new Cesium.Cartesian3(1216393.6257790313, -4736259.809075361, 4081384.4858198245);
modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
translation = Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(0.0, 0.0, -1.0));
Cesium.Matrix4.multiply(modelMatrix, translation, modelMatrix);

var treeHighlight4 = scene.primitives.add(new Cesium.ClassificationPrimitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry : new Cesium.SphereGeometry({
            radius : 2.0
        }),
        modelMatrix : modelMatrix,
        attributes : {
            color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString('#55DDE0').withAlpha(0.5)),
            show : new Cesium.ShowGeometryInstanceAttribute(true)
        },
        id : 'volume 4'
    }),
    classificationType : Cesium.ClassificationType.CESIUM_3D_TILE
}));