Material Canvas

<!--
  示例：把 canvas 画的图案当作材质贴图
  要点：ImageMaterialProperty 接收 dataURL，repeat 控制平铺次数，贴到面与盒体上
  依赖：CesiumJS 1.121 · jsDelivr CDN，贴图由 2D canvas 现场绘制
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>canvas 贴图材质</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cesium@1.121.0/Build/Cesium/Widgets/widgets.css">
<style>
  html,body{height:100%;margin:0}
  body{background:#0e1116;color:#e6e8ec;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif}
  #c{height:100%}
  .hud{position:absolute;left:12px;top:12px;z-index:5;background:rgba(23,28,35,.9);
       border:1px solid #2a313b;border-radius:6px;padding:9px 12px;font-size:12px;
       color:#a2a9b6;max-width:250px}
  .hud b{color:#e6e8ec;font-weight:600}
  .hud .row{margin-top:6px}
  input[type=range]{width:100%}
  .cesium-viewer-bottom .cesium-widget-credits,.cesium-viewer-animationContainer,
  .cesium-viewer-timelineContainer{display:none!important}
</style>
</head>
<body>
<div id="c"></div>
<div class="hud">
  <div><b>canvas 贴图</b></div>
  <div class="row">平铺 <span id="repVal">3 × 2</span></div>
  <div class="row"><input id="rep" type="range" min="1" max="10" step="1" value="3"></div>
  <div class="row">图案：棋盘 + 斜纹 + 编号</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/cesium@1.121.0/Build/Cesium/Cesium.js"></script>
<script>
(function () {
  'use strict';

  var viewer = new Cesium.Viewer('c', {
    baseLayer: false,
    baseLayerPicker: false, geocoder: false, homeButton: false,
    sceneModePicker: false, navigationHelpButton: false,
    animation: false, timeline: false, fullscreenButton: false,
    infoBox: false, selectionIndicator: false
  });

  var scene = viewer.scene;
  scene.globe.baseColor = Cesium.Color.fromCssColorString('#1c2733');
  scene.backgroundColor = Cesium.Color.fromCssColorString('#0e1116');
  scene.skyBox.show = false;
  scene.sun.show = false;
  scene.moon.show = false;
  if (scene.skyAtmosphere) scene.skyAtmosphere.show = false;

  /* ---------- 画一张 256×256 的图案 ---------- */
  function drawTexture() {
    var c = document.createElement('canvas');
    c.width = c.height = 256;
    var ctx = c.getContext('2d');

    ctx.fillStyle = '#1d2735';
    ctx.fillRect(0, 0, 256, 256);

    /* 斜向渐变条 */
    var g = ctx.createLinearGradient(0, 0, 256, 256);
    g.addColorStop(0, 'rgba(77,155,255,0.55)');
    g.addColorStop(1, 'rgba(77,155,255,0)');
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, 256, 256);

    /* 棋盘格 */
    var cell = 32;
    for (var y = 0; y < 256 / cell; y++) {
      for (var x = 0; x < 256 / cell; x++) {
        if ((x + y) % 2 === 0) {
          ctx.fillStyle = 'rgba(255,255,255,0.10)';
          ctx.fillRect(x * cell, y * cell, cell, cell);
        }
      }
    }

    /* 边框与中心字 */
    ctx.strokeStyle = 'rgba(207,228,255,0.9)';
    ctx.lineWidth = 6;
    ctx.strokeRect(6, 6, 244, 244);
    ctx.fillStyle = '#eaf2ff';
    ctx.font = '600 64px "Microsoft YaHei", sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('GIS', 128, 128);

    return c.toDataURL('image/png');
  }

  var URL_TEXTURE = drawTexture();

  var groundMaterial = new Cesium.ImageMaterialProperty({
    image: URL_TEXTURE,
    repeat: new Cesium.Cartesian2(3, 2),
    color: Cesium.Color.WHITE,
    transparent: false
  });

  /* 贴到地面 */
  viewer.entities.add({
    polygon: {
      hierarchy: Cesium.Cartesian3.fromDegreesArray([
        116.374, 39.898, 116.404, 39.898, 116.404, 39.920, 116.374, 39.920
      ]),
      height: 0,
      material: groundMaterial
    }
  });

  /* 贴到盒体侧面与顶面 */
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(116.389, 39.909, 120),
    box: {
      dimensions: new Cesium.Cartesian3(240, 240, 240),
      material: new Cesium.ImageMaterialProperty({
        image: URL_TEXTURE,
        repeat: new Cesium.Cartesian2(1, 1),
        color: Cesium.Color.WHITE
      }),
      outline: true,
      outlineColor: Cesium.Color.fromCssColorString('#cfe4ff')
    }
  });

  /* 贴图的原始尺寸参考：一条 256 像素宽的线段 */
  viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([116.374, 39.893, 116.386, 39.893]),
      width: 2,
      material: Cesium.Color.fromCssColorString('#ffb13d'),
      clampToGround: true
    }
  });

  document.getElementById('rep').addEventListener('input', function () {
    var n = parseInt(this.value, 10);
    document.getElementById('repVal').textContent = n + ' × 2';
    groundMaterial.repeat = new Cesium.Cartesian2(n, 2);
  });

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(116.378, 39.888, 1900),
    orientation: {
      heading: Cesium.Math.toRadians(12),
      pitch: Cesium.Math.toRadians(-30),
      roll: 0
    },
    duration: 0
  });
})();
</script>
</body>
</html>