【Cesium学习（七）】Cesium对模型各种属性设置和修改
<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="" placeholder="请选择" @change="colorBlendModeChange">
<el-option v-for="item in colorBlendModes" :key="" :label="" :value=""> </el-option>
</el-select>
</el-form-item>
<el-form-item label="颜色">
<el-select size="mini" v-model="" placeholder="请选择" @change="colorChange">
<el-option v-for="item in colors" :key="" :label="" :value=""> </el-option>
</el-select>
</el-form-item>
<el-form-item label="颜色透明度">
<el-slider size="mini" v-model="" :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=" != 'Mix'" v-model="" :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="" placeholder="请选择" @change="silhouetteColorChange">
<el-option v-for="item in colors" :key="" :label="" :value=""> </el-option>
</el-select>
</el-form-item>
<el-form-item label="轮廓透明度">
<el-slider size="mini" v-model="" :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="" :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() {
// ('../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>