Bing Labels Only

<!--
  示例：只画注记、不画地物的透明底图
  说明：影像提供者返回带透明通道的 canvas 瓦片，只在城市所在位置写地名，叠在纯色球体上
  核心逻辑：positionToTileXY 判断城市归属瓦片 → 画布上写文字与圆点 → hasAlpha 合成
  依赖：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:7px}
  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>仅注记底图</b></div>
  <div class="row">瓦片全透明，只写地名与圆点</div>
  <div class="row">注记层透明度 <span id="aVal">1.00</span></div>
  <div class="row"><input id="a" type="range" min="0" max="1" step="0.05" value="1"></div>
  <div class="row"><label><input id="show" type="checkbox" checked> 显示注记层</label></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('#1a2634');
  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 scheme = new Cesium.WebMercatorTilingScheme();
  var tilingScheme = scheme;

  var cities = [
    [116.39, 39.90, '北京'], [121.47, 31.23, '上海'], [113.26, 23.12, '广州'],
    [104.06, 30.57, '成都'], [87.62, 43.83, '乌鲁木齐'], [108.95, 34.34, '西安'],
    [114.30, 30.59, '武汉'], [120.15, 30.28, '杭州'], [118.80, 32.06, '南京'],
    [126.64, 45.76, '哈尔滨'], [91.13, 29.65, '拉萨'], [102.71, 25.05, '昆明'],
    [106.55, 29.56, '重庆'], [117.20, 39.09, '天津']
  ];

  function drawTile(x, y, level) {
    var size = 256;
    var canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    var g = canvas.getContext('2d');

    var rect = scheme.tileXYToRectangle(x, y, level);
    var sx = size / (rect.east - rect.west);
    var sy = size / (rect.north - rect.south);

    g.font = '500 13px "Microsoft YaHei", sans-serif';
    g.textBaseline = 'middle';

    cities.forEach(function (c) {
      var carto = Cesium.Cartographic.fromDegrees(c[0], c[1]);
      if (carto.longitude < rect.west || carto.longitude > rect.east) return;
      if (carto.latitude < rect.south || carto.latitude > rect.north) return;

      /* 只让城市归属的那一块瓦片来画，避免跨瓦片重复 */
      var t = scheme.positionToTileXY(carto, level, new Cesium.Cartesian2());
      if (t.x !== x || t.y !== y) return;

      var px = (carto.longitude - rect.west) * sx;
      var py = (rect.north - carto.latitude) * sy;

      g.fillStyle = 'rgba(120, 190, 255, .95)';
      g.beginPath();
      g.arc(px, py, 3.2, 0, Math.PI * 2);
      g.fill();

      g.fillStyle = 'rgba(226, 238, 255, .95)';
      g.shadowColor = 'rgba(0, 0, 0, .8)';
      g.shadowBlur = 4;

      var tx = px + 8;
      g.textAlign = 'left';
      if (px > size - 48) {
        tx = px - 8;
        g.textAlign = 'right';
      }
      g.fillText(c[2], tx, py);
      g.shadowBlur = 0;
    });

    return canvas;
  }

  var provider = {
    tileWidth: 256,
    tileHeight: 256,
    maximumLevel: 4,
    minimumLevel: 0,
    tilingScheme: tilingScheme,
    rectangle: tilingScheme.rectangle,
    hasAlpha: true,
    hasAlphaChannel: true,
    defaultAlpha: 1,
    defaultBrightness: 1,
    ready: true,
    readyPromise: Promise.resolve(true),
    credit: '本地生成的注记瓦片',
    getTileCredits: function () { return []; },
    requestImage: function (x, y, level) {
      return Promise.resolve(drawTile(x, y, level));
    }
  };

  var layer = viewer.imageryLayers.addImageryProvider(provider);

  document.getElementById('a').addEventListener('input', function () {
    layer.alpha = parseFloat(this.value);
    document.getElementById('aVal').textContent = layer.alpha.toFixed(2);
  });

  document.getElementById('show').addEventListener('change', function () {
    layer.show = this.checked;
  });

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