Heatmap

<!--
  示例：热力图
  要点：leaflet.heat 插件、种子随机生成采样点、radius 与 blur 调参、销毁重建热力层
  依赖：Leaflet 1.9.4 · leaflet.heat 0.2.0 · jsDelivr CDN + Esri 瓦片
-->
<!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/leaflet@1.9.4/dist/leaflet.css">
<style>
  html,body{height:100%;margin:0}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif}
  .bar{flex:0 0 auto;padding:8px 12px;background:#f6f7f9;border-bottom:1px solid #e3e6ea;
       display:flex;gap:14px;align-items:center;font-size:12px;color:#58606e;flex-wrap:wrap}
  .bar label{display:flex;gap:6px;align-items:center}
  .bar input[type=range]{width:110px}
  .bar output{min-width:28px;color:#16181d;font-variant-numeric:tabular-nums}
  .bar .spacer{flex:1 1 auto}
  #map{flex:1 1 auto;min-height:0;background:#0f172a}
</style>
</head>
<body>
<div class="bar">
  <label>半径 <input id="radius" type="range" min="8" max="40" value="22"><output id="radiusOut">22</output></label>
  <label>模糊 <input id="blur" type="range" min="8" max="30" value="18"><output id="blurOut">18</output></label>
  <span class="spacer"></span>
  <span id="status"></span>
</div>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
<script>
(function () {
  'use strict';

  /* 固定种子的伪随机数，保证每次刷新热力分布一致 */
  function seeded(seed) {
    var a = seed;
    return function () {
      a |= 0;
      a = a + 0x6D2B79F5 | 0;
      var t = Math.imul(a ^ a >>> 15, 1 | a);
      t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
      return ((t ^ t >>> 14) >>> 0) / 4294967296;
    };
  }

  var rand = seeded(20261027);

  var hotspots = [
    { lat: 39.907, lng: 116.391, spread: 0.018, n: 520 },
    { lat: 39.935, lng: 116.455, spread: 0.022, n: 380 },
    { lat: 39.878, lng: 116.330, spread: 0.020, n: 300 },
    { lat: 39.958, lng: 116.352, spread: 0.016, n: 220 }
  ];

  var points = [];
  hotspots.forEach(function (h) {
    for (var i = 0; i < h.n; i++) {
      /* 三个均匀随机数相加，得到近似正态的聚集效果 */
      var dLat = ((rand() + rand() + rand()) / 3 - 0.5) * h.spread * 2;
      var dLng = ((rand() + rand() + rand()) / 3 - 0.5) * h.spread * 2;
      points.push([h.lat + dLat, h.lng + dLng, 0.35 + rand() * 0.65]);
    }
  });

  var map = L.map('map', {
    center: [39.917, 116.391],
    zoom: 12
  });

  L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
    maxZoom: 19,
    attribution: 'Tiles © Esri'
  }).addTo(map);

  var radiusEl = document.getElementById('radius');
  var blurEl = document.getElementById('blur');
  var radiusOut = document.getElementById('radiusOut');
  var blurOut = document.getElementById('blurOut');
  var status = document.getElementById('status');

  var heat = null;

  function render() {
    var radius = Number(radiusEl.value);
    var blur = Number(blurEl.value);
    radiusOut.textContent = radius;
    blurOut.textContent = blur;

    if (heat) map.removeLayer(heat);

    heat = L.heatLayer(points, {
      radius: radius,
      blur: blur,
      maxZoom: 16,
      minOpacity: 0.25,
      gradient: {
        0.2: '#1e3a8a',
        0.4: '#0e7490',
        0.6: '#65a30d',
        0.8: '#f59e0b',
        1.0: '#b91c1c'
      }
    }).addTo(map);

    status.textContent = points.length + ' 个采样点 · 4 个热点';
  }

  /* 滑块连续触发时合并到一次重建 */
  var timer = null;
  function schedule() {
    if (timer) clearTimeout(timer);
    timer = setTimeout(render, 120);
  }

  radiusEl.addEventListener('input', schedule);
  blurEl.addEventListener('input', schedule);

  render();

  map.on('click', function (e) {
    /* 点击处补一个高强度点，观察邻域颜色变化 */
    points.push([e.latlng.lat, e.latlng.lng, 1]);
    render();
  });
})();
</script>
</body>
</html>