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>
相关推荐
冥界摄政王19 小时前
Cesium学习第二章 camera 相机
node.js·html·vue3·js·cesium
冥界摄政王2 天前
Cesium学习第一章 安装下载 基于vue3引入Cesium项目开发
vue·vue3·html5·webgl·cesium
UTwelve3 天前
【UE】材质与半透明 - 01.将半透明作为后期材质
ue5·材质·着色器
你们瞎搞3 天前
Cesium加载20GB航测影像.tif
前端·cesium·gdal·地图切片
军军君014 天前
Three.js基础功能学习二：场景图与材质
前端·javascript·学习·3d·材质·three·三维
闲云一鹤5 天前
Cesium 使用 Turf 实现坐标点移动（偏移）
前端·gis·cesium
二狗哈5 天前
Cesium快速入门34：3dTile高级样式设置
前端·javascript·算法·3d·webgl·cesium·地图可视化
GMATG_LIU5 天前
金属材质化学组成与标准分析技术
材质
海伯森技术6 天前
海伯森点光谱应用案例之——不透明材质镀膜厚度检测
材质
二狗哈6 天前
Cesium快速入门33：tile3d设置样式
3d·状态模式·webgl·cesium·地图可视化
热门推荐
01GitHub 镜像站点02jdk21下载、安装（Windows、Linux、macOS）03Linux下V2Ray安装配置指南04手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！05Claude Code Skills 实用使用手册062025 最新教程：注册并切换到美区 Apple ID07UV安装并设置国内源08【踩坑笔记】50系显卡适配的 PyTorch 安装09KGG转MP3工具|非KGM文件|解密音频10安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）