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>
相关推荐
nnsix2 天前
Unity URP用于 光照贴图（Lightmap）的材质Shader
unity·材质·贴图
哎呦哥哥和巨炮叔叔3 天前
C4D + Corona 渲染玻璃材质详解：Thin Shell 与实心玻璃的正确使用方式
材质·建筑可视化·渲染技术·c4d·渲染101云渲染·corona渲染·材质系统
深念Y5 天前
乒乓球拍打磨抛光全攻略：告别手指不适与底板拉丝
材质·材料工程·材料·乒乓球·木材·打磨·球拍
freepopo6 天前
天津商业空间设计：材质肌理里的温度与质感[特殊字符]
python·材质
ct9786 天前
Cesium中的CZML
学习·gis·cesium
哈小奇8 天前
Unity URP管线Linear空间丝绸材质
unity·游戏引擎·材质
weipt9 天前
关于vue项目中cesium的地图显示问题
前端·javascript·vue.js·cesium·卫星影像·地形
YAY_tyy9 天前
综合实战：基于 Turfjs 的智慧园区空间管理系统
前端·3d·cesium·turfjs
haokan_Jia9 天前
【三、基于Cesium的三维智慧流域四预系统-轻量级搭建】
cesium
YAY_tyy9 天前
Turfjs 性能优化：大数据量地理要素处理技巧
前端·3d·arcgis·cesium·turfjs
热门推荐
01GitHub 镜像站点02OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)03Claude Code Skills 实用使用手册04在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）05UV安装并设置国内源06AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南07安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）08BongoCat - 跨平台键盘猫动画工具09Linux下V2Ray安装配置指南10Open Code教程（四）| 高级配置与集成