Icon

<!--
  示例：deck.gl 图标标注
  要点：用 canvas 现场生成图标图集，IconLayer 按类型取图标，尺寸编码评分
  依赖：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}
  .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;
       vertical-align:-1px}
  #cv{flex:1 1 auto;min-height:0;width:100%}
</style>
</head>
<body>
<div class="bar">
  <span>点位 <b id="n">—</b></span>
  <span><i class="dot" style="background:#ff9a4d"></i>服务网点</span>
  <span><i class="dot" style="background:#58b6ff"></i>充电站</span>
  <span><i class="dot" style="background:#5fd6a4"></i>仓储点</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;
  }

  /* 64 × 64 三个槽位，全部白色绘制，颜色交给 getColor */
  var atlasCanvas = document.createElement('canvas');
  atlasCanvas.width = 192;
  atlasCanvas.height = 64;
  var ctx = atlasCanvas.getContext('2d');
  ctx.fillStyle = '#ffffff';

  /* 槽位 0：圆 */
  ctx.beginPath();
  ctx.arc(32, 32, 22, 0, Math.PI * 2);
  ctx.fill();

  /* 槽位 1：水滴形标记，尖端在底部 */
  ctx.beginPath();
  ctx.arc(96, 24, 15, Math.PI, 0);
  ctx.lineTo(96, 60);
  ctx.closePath();
  ctx.fill();

  /* 槽位 2：菱形 */
  ctx.beginPath();
  ctx.moveTo(160, 8);
  ctx.lineTo(184, 32);
  ctx.lineTo(160, 56);
  ctx.lineTo(136, 32);
  ctx.closePath();
  ctx.fill();

  var atlas = atlasCanvas.toDataURL('image/png');

  var iconMapping = {
    circle: { x: 0, y: 0, width: 64, height: 64, anchorX: 32, anchorY: 32, mask: true },
    pin: { x: 64, y: 0, width: 64, height: 64, anchorX: 32, anchorY: 60, mask: true },
    diamond: { x: 128, y: 0, width: 64, height: 64, anchorX: 32, anchorY: 32, mask: true }
  };

  var types = [
    { icon: 'pin', name: '服务网点', color: [255, 154, 77, 235] },
    { icon: 'circle', name: '充电站', color: [88, 182, 255, 235] },
    { icon: 'diamond', name: '仓储点', color: [95, 214, 164, 235] }
  ];

  var pois = [];
  for (var i = 0; i < 240; i++) {
    var t = types[i % types.length];
    pois.push({
      id: i,
      lng: 121.44 + (Math.random() + Math.random() - 1) * 0.040,
      lat: 31.20 + (Math.random() + Math.random() - 1) * 0.032,
      icon: t.icon,
      color: t.color,
      type: t.name,
      score: 40 + Math.random() * 60
    });
  }

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

  var layer = new deck.IconLayer({
    id: 'poi',
    data: pois,
    iconAtlas: atlas,
    iconMapping: iconMapping,
    getIcon: function (d) { return d.icon; },
    getPosition: function (d) { return [d.lng, d.lat]; },
    getSize: function (d) { return 15 + d.score / 5; },
    sizeUnits: 'pixels',
    sizeMinPixels: 12,
    sizeMaxPixels: 36,
    getColor: function (d) { return d.color; },
    billboard: true,
    alphaCutoff: 0.08,
    pickable: true
  });

  var deckgl = new deck.Deck({
    canvas: 'cv',
    width: '100%',
    height: '100%',
    initialViewState: {
      longitude: 121.44,
      latitude: 31.20,
      zoom: 12.3,
      pitch: 0,
      bearing: 0,
      maxPitch: 60
    },
    controller: true,
    layers: [layer],
    getTooltip: function (info) {
      if (!info.object) return null;
      var o = info.object;
      return o.type + ' #' + o.id + ' · 评分 ' + Math.round(o.score);
    }
  });

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