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>
相关推荐
前端小崔4 天前
Three.js 与 Cesium 融合实战问题汇总
前端·three.js·cesium
洛兮银儿4 天前
前端页面引入cesium
前端·cesium
GISBox6 天前
数字孪生项目必备：RVT模型转3DTiles格式的高效解决方案
gis·cesium·格式转换·服务发布·gisbox·rvt切片·3dtiles格式
ToTacview7 天前
Web 可视化卡顿的归因方法论：以“流畅一段、停顿一下“为例的代码级根治
cesium
夜郎king8 天前
基于天地图 Cesium 三维服务实现三维地球及地球自转实践
数据分析·cesium·3d地图·三维地球
来让爷抱一个9 天前
2026 纹理一致性实战：贴图不许花脸，百智云精灵图把材质契约写进素材包
人工智能·机器学习·材质·贴图
luckystar513~10 天前
Navara是WebGIS的第三条路吗?
gis·cesium·mapbox·地图引擎·地理可视化
三棵树园艺10 天前
工程方案｜高速服务区B1级阻燃软装全案设计（文旅融合+合规落地+商业增效）
创业创新·材质
tianxuanjg13 天前
工业/协作机器人研发采购指南：如何适配新品迭代的CNC加工合作
人工智能·经验分享·机器人·无人机·材质
m0_6145235514 天前
透明材质抠图怎么判断合格？用黑白灰背景检查边缘和孔洞
材质
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新06人工智能（AI）发展史：详细里程碑072026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？08ZCode 周末送额度活动开启：3 亿 Token 免费领取09Telegram APK 下载安装完整指南 — 2026年最新10数学公理体系大全:第六章 选择公理的等价形式及证明