cesium(四)：Material及MaterialProperty 设置材质

傣味洋芋2025-12-08 11:16

前言：这里所说的材质包括：颜色、纹理、图片等。设置的方法有：

一、Material

二、MaterialProperty

这里主要讲MaterialProperty

1.ColorMaterialProperty ：设置颜色

用：material: Cesium.Color.RED.withAlpha(0.5)，可设置不同的MaterialProperty

javascript 复制代码 
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  materialColor();//颜色
});


/**
  * 设置颜色
* **/
function materialColor() {
  //初始化
  let viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏按钮
    vrButton: true, // vr部件
    geocoder: true, // 位置搜索部件
    homeButton: true, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: true, // 二三维切换部件
    timeline: true, //是否显示时间线控件
    navigationHelpButton: true, //是否显示帮助信息控件
  });

  //方法一，构造时赋材质
  var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
    ellipse: {
      semiMinorAxis: 250000.0,
      semiMajorAxis: 400000.0,
      material: Cesium.Color.RED.withAlpha(0.5)//可设置不同的MaterialProperty
    }
  });
  viewer.zoomTo(entity)
}

</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

2.ImageMaterialProperty ：设置图片

Cesium.ImageMaterialProperty设置图片

javascript 复制代码 
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  //materialColor();//颜色
  materialImage();//图片
});


/**
  * 设置图片
* **/
function materialImage() {
  //初始化
  let viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏按钮
    vrButton: true, // vr部件
    geocoder: true, // 位置搜索部件
    homeButton: true, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: true, // 二三维切换部件
    timeline: true, //是否显示时间线控件
    navigationHelpButton: true, //是否显示帮助信息控件
  });

  //方法一，构造时赋材质
  var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
    ellipse: {
      semiMinorAxis: 250000.0,
      semiMajorAxis: 400000.0,
      material: new Cesium.ImageMaterialProperty({
        image: './assets/img/fbb3.webp',
        color: Cesium.Color.PINK,
        repeat: new Cesium.Cartesian2(4, 4)
      })
    }
  });
  viewer.zoomTo(entity)
}


</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

图片没出来：

3.CheckerboardMaterialProperty ：设置棋盘格

evenColor：获取或设置指定第一个 Color 的属性，默认白色

oddColor：获取或设置指定第二个 Color 的属性，默认黑色

repeat:获取或设置 Cartesian2 属性，该属性指定图块在每个方向上重复多少次。

javascript 复制代码 
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  //materialColor();//颜色
  //materialImage();//图片
  materialCheckerboard();//棋盘纹理
});

/**
  * 设置棋盘纹理
* **/
function materialCheckerboard() {
  //初始化
  let viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏按钮
    vrButton: true, // vr部件
    geocoder: true, // 位置搜索部件
    homeButton: true, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: true, // 二三维切换部件
    timeline: true, //是否显示时间线控件
    navigationHelpButton: true, //是否显示帮助信息控件
  });

  //方法一，构造时赋材质
  var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
    ellipse: {
      semiMinorAxis: 250000.0,
      semiMajorAxis: 400000.0,
      material: new Cesium.CheckerboardMaterialProperty({
        evenColor: Cesium.Color.PINK,
        oddColor: Cesium.Color.RED,
        repeat: new Cesium.Cartesian2(4, 4)
      })
    }
  });
  viewer.zoomTo(entity)
}


</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

4.StripeMaterialProperty：设置竖型条纹

offset：获取或设置数字属性，该属性指定模式中的点开始绘画；以0.0为偶数颜色的开始，以1.0为开始的奇数颜色，2.0再次为偶数颜色，以及任何倍数或分数值在两者之间。

orientation ：获取或设置指定 StripeOrientation 的属性，主要是水平还是垂直，默认水平

javascript 复制代码 
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  //materialColor();//颜色
  //materialImage();//图片
  //materialCheckerboard();//棋盘纹理
  StripeMaterial();//棋盘纹理
});

/**
  * 设置竖条纹
* **/
function StripeMaterial() {
  //初始化
  let viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏按钮
    vrButton: true, // vr部件
    geocoder: true, // 位置搜索部件
    homeButton: true, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: true, // 二三维切换部件
    timeline: true, //是否显示时间线控件
    navigationHelpButton: true, //是否显示帮助信息控件
  });


  var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
    ellipse: {
      semiMinorAxis: 250000.0,
      semiMajorAxis: 400000.0,
      material: new Cesium.StripeMaterialProperty({
        evenColor: Cesium.Color.PINK,
        oddColor: Cesium.Color.RED,
        repeat: 32,
        offset: 20,
        orientation: Cesium.StripeOrientation.VERTICAL
      })
    }
  });

  viewer.zoomTo(entity)
}



</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

5.StripeMaterialProperty：设置网格

color：获取或设置指定网格 Color 的属性。

cellAlpha :获取或设置数字属性，该属性指定单元格alpha值。

lineCount :获取或设置 Cartesian2 属性，该属性指定沿每个轴的网格线数。

lineOffset :该属性指定沿每个轴的网格线的起始偏移量。

lineThickness :该属性指定沿每个轴的网格线的粗细。

javascript 复制代码 
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  //materialColor();//颜色
  //materialImage();//图片
  //materialCheckerboard();//棋盘纹理
  //StripeMaterial();//棋盘纹理
  GridMaterial();//设置网格
});

/**
  * 设置网格
* **/
function GridMaterial() {
  //初始化
  let viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏按钮
    vrButton: true, // vr部件
    geocoder: true, // 位置搜索部件
    homeButton: true, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: true, // 二三维切换部件
    timeline: true, //是否显示时间线控件
    navigationHelpButton: true, //是否显示帮助信息控件
  });


  var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
    ellipse: {
      semiMinorAxis: 250000.0,
      semiMajorAxis: 400000.0,
      material: new Cesium.GridMaterialProperty({
        color: Cesium.Color.RED,
        cellAlpha: 0.2,
        lineCount: new Cesium.Cartesian2(8, 8),
        lineThickness: new Cesium.Cartesian2(2.0, 2.0)
      })
    }
  });

  viewer.zoomTo(entity)
}


</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

6.polyline：设置一条线

javascript 复制代码 
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  //materialColor();//颜色
  //materialImage();//图片
  //materialCheckerboard();//棋盘纹理
  //StripeMaterial();//棋盘纹理
  //GridMaterial();//设置网格
  polyline();//设置一条线

});


/**
  * 设置一条线
* **/
function polyline() {
  //初始化
  let viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏按钮
    vrButton: true, // vr部件
    geocoder: true, // 位置搜索部件
    homeButton: true, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: true, // 二三维切换部件
    timeline: true, //是否显示时间线控件
    navigationHelpButton: true, //是否显示帮助信息控件
  });


  var entity = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([-77, 35,
      -77.1, 35]),
      width: 5,
      material: Cesium.Color.RED
    }
  });

  viewer.zoomTo(entity)
}

</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

7.PolylineGlowMaterialProperty：设置一条发光

javascript 复制代码 
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  //materialColor();//颜色
  //materialImage();//图片
  //materialCheckerboard();//棋盘纹理
  //StripeMaterial();//棋盘纹理
  //GridMaterial();//设置网格
  // polyline();//设置一条线
  PolylineGlowMaterial();//发光线
});




/**
  * 设置发光线条
* **/
function PolylineGlowMaterial() {
  //初始化
  let viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏按钮
    vrButton: true, // vr部件
    geocoder: true, // 位置搜索部件
    homeButton: true, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: true, // 二三维切换部件
    timeline: true, //是否显示时间线控件
    navigationHelpButton: true, //是否显示帮助信息控件
  });


  var entity = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([-77, 35,
      -77.1, 35]),
      width: 5,
      material: new Cesium.PolylineGlowMaterialProperty({
        glowPower: 0.2,
        color: Cesium.Color.RED
      })
    }
  });

  viewer.zoomTo(entity)
}



</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

8.PolylineOutlineMaterialProperty：设置线条的宽度、纹理

javascript 复制代码 
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  //materialColor();//颜色
  //materialImage();//图片
  //materialCheckerboard();//棋盘纹理
  //StripeMaterial();//棋盘纹理
  //GridMaterial();//设置网格
  // polyline();//设置一条线
  //PolylineGlowMaterial();//发光线
  PolylineOutlineMaterial();//设置线条的宽度、纹理
});

/**
  * 设置线条的宽度、纹理
* **/
function PolylineOutlineMaterial() {
  //初始化
  let viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏按钮
    vrButton: true, // vr部件
    geocoder: true, // 位置搜索部件
    homeButton: true, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: true, // 二三维切换部件
    timeline: true, //是否显示时间线控件
    navigationHelpButton: true, //是否显示帮助信息控件
  });


  var entity = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([-77, 35,
      -77.1, 35]),
      width: 5,
      material: new Cesium.PolylineOutlineMaterialProperty({
        color: Cesium.Color.ORANGE,
        outlineWidth: 3,
        outlineColor: Cesium.Color.BLACK
      })
    }
  });

  viewer.zoomTo(entity)
}


</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>
相关推荐
牛掰是怎么形成的2 天前
Unity材质贴图引用陷阱：包体暴涨真相
unity·材质·贴图
lGSrsEpqUxi3 天前
双馈风机风电场经串补并网次同步振荡/谐振仿真模型探索
材质
格林威3 天前
Baumer相机玻璃制品裂纹自动检测：提高透明材质检测精度的 6 个关键步骤，附 OpenCV+Halcon 实战代码！
人工智能·opencv·视觉检测·材质·工业相机·sdk开发·堡盟相机
top_designer4 天前
Materialize：手绘地表太假？“PBR 纹理炼金术” 5分钟生成次世代材质
游戏·3d·aigc·材质·设计师·游戏美术·pbr
pingao1413785 天前
金属材质翻斗传感器：耐用型雨量监测的核心解决方案
材质
地狱为王5 天前
Cesium for Unity叠加行政区划线
unity·gis·cesium
白嫖叫上我6 天前
Cesium切换视角中心点不变
cesium
lllljz7 天前
Blender导出模型到Unity或UE5引擎材质丢失模型出错
unity·ue5·游戏引擎·blender·材质
zhyongrui8 天前
SnipTrip 菜单 Liquid Glass 实现方案：结构、材质、交互与深浅色策略
ios·性能优化·swiftui·交互·开源软件·材质
mojugang8 天前
CrWMN是什么材质
材质
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05Linux下V2Ray安装配置指南06AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南07openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决08Claude Code Skills 实用使用手册09在Trae中使用Pencil MCP10Vue-skills的中文文档