【Cesium学习（七）】Cesium对模型各种属性设置和修改

龟中的程序员

已于 2024-06-11 09:03:19 修改

阅读量4.6k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： Cesium 文章标签：学习前端数据可视化 webgl vue.js javascript

于 2023-09-07 15:36:08 首次发布

本文链接：https://blog.youkuaiyun.com/HAI_GUI/article/details/132738069

Cesium 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何使用Cesium库对模型进行属性设置，包括位置、方向、颜色、轮廓等，以及如何通过API修改这些属性。

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

Cesium对模型各种属性设置和修改

在前面我们可以通过entites.add的方法来添加模型，现在我们来针对模型model的各个属性进行设置和修改！

创建一个模型

创建前先要初始化地图来获取viewer，这里不细展示，去看前面的文章初始化地图及封装链接
在前面我们学习到了通过entites的add方法来添加模型，我们再来看一看add方法的属性官方原文链接
在这里插入图片描述
在原文中我们看到有position（位置）,orientation（方向）model（设置模型）等等属性！这里我们主要就是针对model这个属性进来设置

初始化模型

初始化一个模型最主要的就是需要position，orientaion，model，所以我们需要先设置这个三个属性
创建几个属性

// 创建一个模型位置
const position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
//> 创建模型的航向
const heading = Cesium.Math.toRadians(135);
const pitch = 0; //> 俯仰角
const roll = 0; //> 翻滚角
//> 创建出一个航向，俯仰，翻滚的实例
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
//> 根据参考系计算四元数，其中参考系具有根据航向-俯仰-横滚角计算的轴以提供的原点为中心
const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

这个看看model有哪些属性（原文链接）
在这里插入图片描述
上面有很多属性，具体自己看文档，这个我们就演示模型颜色和模型轮廓这个几个属性
创建模型

//> 通过entities的add方法来添加一个模型
entity = window.viewer.entities.add({
    name: '模型',
    position,
    orientation,
    model: {
        uri: require('../public/models/CesiumAir/Cesium_Air.glb'),
        minimumPixelSize: 128,
        maximumScale: 20000,
        color: this.getColor('Red', 1.0), //> 模型颜色与透明度
        colorBlendMode: this.getColorBlendMode('Highlight'), //> 模型颜色模式
        colorBlendAmount: parseFloat(0.5), //> 模型混合度
        silhouetteColor: this.getColor('Red', 1.0), //> 模型轮廓颜色
        silhouetteSize: parseFloat(2), //> 模型轮廓大小
    },
});
window.viewer.trackedEntity = entity;

获取颜色和模式的方法

//-----------------------下面是获取颜色方法------------------
//> 获取模型颜色与透明度
getColor(colorName, alpha) {
    const color = Cesium.Color[colorName.toUpperCase()];
    return Cesium.Color.fromAlpha(color, parseFloat(alpha));
},
//> 获取目标颜色和图元的源颜色之间混合的不同模式  HIGHLIGHT将源颜色乘以目标颜色 REPLACE将源颜色替换为目标颜色 MIX将源颜色和目标颜色混合在一起
getColorBlendMode(colorBlendMode) {
    return Cesium.ColorBlendMode[colorBlendMode.toUpperCase()];
},

运行如下图
在这里插入图片描述

修改属性

其实修改属性很简单，只需要拿到创建模型的entity，在entity.model中选择想要修改的属性，直接修改就ok了！
例如：
修改设置的模型颜色和透明度

entity.model.color = this.getColor('green', 0.5);

修改设置的模型轮廓大小

entity.model.silhouetteSize = parseFloat(5);

在这里可以通过elementUI来选择合适的组件来进行设置和修改
例如我设计的控制器：
在这里插入图片描述
这里就不多说了，各位自行设计，我直接贴我的组件代码

完整代码

<template>
    <div class="SetModelsColor">
        <el-form ref="form" :model="form" label-width="100px">
            <h3 style="margin: 5px">模型颜色设置</h3>
            <el-form-item label="渲染模式">
                <el-select size="mini" v-model="form.colorBlendMode" placeholder="请选择" @change="colorBlendModeChange">
                    <el-option v-for="item in colorBlendModes" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="颜色">
                <el-select size="mini" v-model="form.color" placeholder="请选择" @change="colorChange">
                    <el-option v-for="item in colors" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="颜色透明度">
                <el-slider size="mini" v-model="form.alpha" :show-tooltip="false" :min="0" :max="1" :step="0.01" show-input @input="alphaChange"></el-slider>
            </el-form-item>
            <el-form-item label="混合度">
                <el-slider size="mini" :disabled="form.colorBlendMode != 'Mix'" v-model="form.colorBlendAmount" :show-tooltip="false" :min="0" :max="1" :step="0.01" show-input @input="colorBlendAmountChange"></el-slider>
            </el-form-item>
            <h3 style="margin: 5px">模型轮廓设置</h3>
            <el-form-item label="轮廓颜色">
                <el-select size="mini" v-model="form.silhouetteColor" placeholder="请选择" @change="silhouetteColorChange">
                    <el-option v-for="item in colors" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="轮廓透明度">
                <el-slider size="mini" v-model="form.silhouetteAlpha" :show-tooltip="false" :min="0" :max="1" :step="0.01" show-input @input="silhouetteAlphaChange"></el-slider>
            </el-form-item>
            <el-form-item label="轮廓大小">
                <el-slider size="mini" v-model="form.silhouetteSize" :show-tooltip="false" :min="0" :max="10" :step="0.01" show-input @input="silhouetteSizeChange"></el-slider>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
let entity = null;
export default {
    name: 'SetModelsColor',
    data() {
        return {
            form: {
                colorBlendMode: 'Highlight',
                color: 'Red',
                alpha: 1,
                colorBlendAmount: 0.5,
                silhouetteColor: 'Red',
                silhouetteAlpha: 1,
                silhouetteSize: 2,
            },
            colorBlendModes: [
                {
                    value: 'Highlight',
                    label: '颜色相乘',
                },
                {
                    value: 'Replace',
                    label: '颜色替换',
                },
                {
                    value: 'Mix',
                    label: '颜色混合',
                },
            ],
            colors: [
                {
                    value: 'White',
                    label: '白色',
                },
                {
                    value: 'Red',
                    label: '红色',
                },
                {
                    value: 'Green',
                    label: '绿色',
                },
                {
                    value: 'Blue',
                    label: '蓝色',
                },
                {
                    value: 'Yellow',
                    label: '黄色',
                },
                {
                    value: 'Gray',
                    label: '灰色',
                },
            ],
        };
    },
    mounted() {
        // this.createModel('../public/models/CesiumAir/Cesium_Air.glb', 5000.0);
    },
    methods: {
        //> 初始化模型 url：模型地址 height：模型高度
        createModel(url, height) {
            //> 创建一个模型位置
            const position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
            //> 创建模型的航向
            const heading = Cesium.Math.toRadians(135);
            const pitch = 0; //> 俯仰角
            const roll = 0; //> 翻滚角
            //> 创建出一个航向，俯仰，翻滚的实例
            const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
            //> 根据参考系计算四元数，其中参考系具有根据航向-俯仰-横滚角计算的轴以提供的原点为中心
            const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

            //> 通过entities的add方法来添加一个模型
            entity = window.viewer.entities.add({
                name: '模型',
                position,
                orientation,
                model: {
                    uri: url,
                    minimumPixelSize: 128,
                    maximumScale: 20000,
                    color: this.getColor(this.form.color, this.form.alpha), //> 模型颜色与透明度
                    colorBlendMode: this.getColorBlendMode(this.form.colorBlendMode), //> 模型颜色模式
                    colorBlendAmount: parseFloat(this.form.colorBlendAmount), //> 模型混合度
                    silhouetteColor: this.getColor(this.form.color, this.form.silhouetteAlpha), //> 模型轮廓颜色
                    silhouetteSize: parseFloat(2), //> 模型轮廓大小
                },
            });
            window.viewer.trackedEntity = entity;
        },
        //> 获取模型颜色与透明度
        getColor(colorName, alpha) {
            const color = Cesium.Color[colorName.toUpperCase()];
            return Cesium.Color.fromAlpha(color, parseFloat(alpha));
        },
        //> 获取目标颜色和图元的源颜色之间混合的不同模式  HIGHLIGHT将源颜色乘以目标颜色 REPLACE将源颜色替换为目标颜色 MIX将源颜色和目标颜色混合在一起
        getColorBlendMode(colorBlendMode) {
            return Cesium.ColorBlendMode[colorBlendMode.toUpperCase()];
        },
        //> 渲染模式选择
        colorBlendModeChange(value) {
            entity.model.colorBlendMode = this.getColorBlendMode(value);
        },
        //> 颜色选择
        colorChange(value) {
            entity.model.color = this.getColor(value, this.form.alpha);
        },
        //> 颜色透明度选择
        alphaChange(value) {
            entity.model.color = this.getColor(this.form.color, value);
        },
        //> 混合度选择
        colorBlendAmountChange(value) {
            entity.model.colorBlendAmount = parseFloat(value);
        },
        //> 轮廓颜色选择
        silhouetteColorChange(value) {
            entity.model.silhouetteColor = this.getColor(value, this.form.silhouetteAlpha);
        },
        //> 轮廓透明度选择
        silhouetteAlphaChange(value) {
            entity.model.silhouetteColor = this.getColor(this.form.silhouetteColor, value);
        },
        //> 轮廓大小选择
        silhouetteSizeChange(value) {
            entity.model.silhouetteSize = parseFloat(value);
        },
    },
};
</script>

<style scoped lang="scss">
.SetModelsColor {
    width: 500px;
    position: absolute;
    top: 3%;
    left: 3%;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
}
.el-form {
    padding: 5px;
    /deep/ .el-form-item__label {
        color: #fff;
    }
}
</style>