Text

<!--
  示例：deck.gl 文字标注
  要点：TextLayer 由字符集生成字形图集，背景框与描边保证标签在深色底上可读
  依赖：deck.gl 9.0 · 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>
<style>
  html,body{height:100%;margin:0;background:#0d1117}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif;color:#e6e8ec}
  .bar{position:relative;z-index:5;flex:0 0 auto;padding:8px 12px;background:#161b22;border-bottom:1px solid #252c36;
       display:flex;gap:18px;align-items:center;font-size:12px;color:#8b93a1;flex-wrap:wrap}
  .bar b{color:#58a6ff;font-weight:600}
  #cv{flex:1 1 auto;min-height:0;width:100%}
</style>
</head>
<body>
<div class="bar">
  <span>标签 <b id="n">—</b> 个</span>
  <span>字号按指数放大 · 字符集仅含大写字母与数字</span>
  <span>拖拽旋转 · 滚轮缩放</span>
</div>
<canvas id="cv"></canvas>
<script src="https://cdn.jsdelivr.net/npm/deck.gl@9.0.35/dist.min.js"></script>
<script>
(function () {
  'use strict';

  if (typeof deck === 'undefined') {
    document.body.innerHTML =
      '<div style="padding:24px;color:#ff8c74">deck.gl 加载失败，请检查能否访问 cdn.jsdelivr.net</div>';
    return;
  }

  var cities = [
    { name: 'BEIJING', lng: 116.39, lat: 39.90, v: 92 },
    { name: 'SHANGHAI', lng: 121.47, lat: 31.23, v: 96 },
    { name: 'GUANGZHOU', lng: 113.26, lat: 23.12, v: 84 },
    { name: 'SHENZHEN', lng: 114.05, lat: 22.54, v: 88, dy: 15 },
    { name: 'CHENGDU', lng: 104.06, lat: 30.57, v: 76 },
    { name: 'CHONGQING', lng: 106.50, lat: 29.56, v: 72 },
    { name: 'WUHAN', lng: 114.30, lat: 30.59, v: 70 },
    { name: 'XIAN', lng: 108.94, lat: 34.34, v: 64 },
    { name: 'HANGZHOU', lng: 120.15, lat: 30.27, v: 68, dy: 15 },
    { name: 'NANJING', lng: 118.78, lat: 32.06, v: 62 },
    { name: 'TIANJIN', lng: 117.20, lat: 39.13, v: 58, dy: 15 },
    { name: 'QINGDAO', lng: 120.38, lat: 36.07, v: 54 },
    { name: 'SHENYANG', lng: 123.43, lat: 41.80, v: 50 },
    { name: 'HARBIN', lng: 126.64, lat: 45.75, v: 42 },
    { name: 'KUNMING', lng: 102.71, lat: 25.04, v: 46 },
    { name: 'URUMQI', lng: 87.61, lat: 43.82, v: 36 },
    { name: 'LHASA', lng: 91.11, lat: 29.65, v: 22 },
    { name: 'XIAMEN', lng: 118.09, lat: 24.48, v: 44 }
  ];

  document.getElementById('n').textContent = cities.length;

  var dots = new deck.ScatterplotLayer({
    id: 'dots',
    data: cities,
    getPosition: function (d) { return [d.lng, d.lat]; },
    getRadius: 2.6,
    radiusUnits: 'pixels',
    getFillColor: [255, 168, 84, 230]
  });

  var labels = new deck.TextLayer({
    id: 'labels',
    data: cities,
    getText: function (d) { return d.name + ' ' + d.v; },
    getPosition: function (d) { return [d.lng, d.lat]; },
    getSize: function (d) { return 11 + d.v / 14; },
    sizeUnits: 'pixels',
    getColor: [228, 238, 255, 255],
    getPixelOffset: function (d) { return [0, d.dy || -14]; },
    getTextAnchor: 'middle',
    getAlignmentBaseline: 'center',
    characterSet: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 ',
    fontFamily: '"Segoe UI", "PingFang SC", sans-serif',
    fontSettings: { sdf: true, fontSize: 64, buffer: 4, radius: 10 },
    outlineWidth: 0.09,
    outlineColor: [6, 12, 22, 200],
    background: true,
    getBackgroundColor: [14, 22, 36, 215],
    backgroundPadding: [5, 3],
    billboard: true,
    pickable: true
  });

  var deckgl = new deck.Deck({
    canvas: 'cv',
    width: '100%',
    height: '100%',
    initialViewState: {
      longitude: 106.8,
      latitude: 34.8,
      zoom: 3.6,
      pitch: 0,
      bearing: 0
    },
    controller: true,
    layers: [dots, labels],
    getTooltip: function (info) {
      if (!info.object || !info.object.name) return null;
      return info.object.name + ' 指数 ' + info.object.v;
    }
  });

  window.__deck = deckgl;
})();
</script>
</body>
</html>