Grid

<!--
  示例：在地球表面绘制经纬网格
  要点：按步长循环生成经线与纬线，Polyline 直接赋 Color 材质，赤道与本初子午线单独高亮
  依赖：CesiumJS 1.121 · jsDelivr CDN，顶点全部在页面内计算
-->
<!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>经纬网格</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}
  .hud button{font:inherit;font-size:12px;padding:3px 9px;margin-right:4px;border-radius:4px;
       cursor:pointer;border:1px solid #343b46;background:#1d232b;color:#cfd6e2}
  .hud button.on{background:#1d3a5c;border-color:#3d6f9e;color:#cfe4ff}
  .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>经纬网格</b></div>
  <div class="row" id="info">间距 15°</div>
  <div class="row">
    <button data-step="15" class="on">15°</button>
    <button data-step="30">30°</button>
    <button data-step="45">45°</button>
  </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;

  var LINE = Cesium.Color.fromCssColorString('#8fa7c0').withAlpha(0.22);
  var HILITE = Cesium.Color.fromCssColorString('#ff9f43');
  var drawn = [];

  function clear() {
    for (var i = 0; i < drawn.length; i++) viewer.entities.remove(drawn[i]);
    drawn = [];
  }

  function addLine(positions, color, width) {
    drawn.push(viewer.entities.add({
      polyline: { positions: positions, width: width, material: color }
    }));
  }

  function addLabel(text, lng, lat) {
    drawn.push(viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(lng, lat),
      label: {
        text: text,
        font: '500 11px "Microsoft YaHei", sans-serif',
        fillColor: HILITE,
        pixelOffset: new Cesium.Cartesian2(0, -8),
        disableDepthTestDistance: Number.POSITIVE_INFINITY
      }
    }));
  }

  function draw(step) {
    clear();
    var lng, lat, flat, i;

    /* 经线：固定经度，纬度从南到北采样 */
    for (lng = -180; lng <= 180.01; lng += step) {
      flat = [];
      for (lat = -85; lat <= 85.01; lat += 5) flat.push(lng, lat);
      var major = (lng === 0 || lng === 180 || lng === -180);
      addLine(Cesium.Cartesian3.fromDegreesArray(flat), major ? HILITE : LINE, major ? 2 : 1);
    }

    /* 纬线：固定纬度，经度从西到东采样 */
    for (lat = -75; lat <= 75.01; lat += step) {
      flat = [];
      for (lng = -180; lng <= 180.01; lng += 5) flat.push(lng, lat);
      var equator = (lat === 0);
      addLine(Cesium.Cartesian3.fromDegreesArray(flat), equator ? HILITE : LINE, equator ? 2 : 1);
    }

    addLabel('赤道 0°', 12, 0);
    addLabel('本初子午线', 0, 42);

    document.getElementById('info').textContent =
      '间距 ' + step + '° · 线 ' + (drawn.length - 2) + ' 条';
  }

  var buttons = document.querySelectorAll('.hud button');
  for (var b = 0; b < buttons.length; b++) {
    buttons[b].addEventListener('click', function () {
      for (var k = 0; k < buttons.length; k++) buttons[k].className = '';
      this.className = 'on';
      draw(parseInt(this.getAttribute('data-step'), 10));
    });
  }

  draw(15);

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