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>