Bbox

<!--
  示例：包围盒计算 — 对点与线组成的集合求 bbox，再用 bboxPolygon 画出来
  核心逻辑：切换不同数据集，观察外包矩形如何随数据变化
  依赖：Turf.js 7 · 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}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif;color:#16181d;background:#fff}
  .bar{flex:0 0 auto;display:flex;gap:10px;align-items:center;padding:8px 12px;
       background:#f6f7f9;border-bottom:1px solid #e3e6ea;font-size:12px;color:#58606e;flex-wrap:wrap}
  .bar button{font:inherit;font-size:12px;padding:4px 10px;border-radius:4px;cursor:pointer;
       border:1px solid #ccd1d9;background:#fff;color:#16181d}
  .bar button:hover{background:#eef0f3}
  svg{flex:1 1 auto;min-height:0;width:100%;display:block;background:#fbfcfd}
  .out{flex:0 0 auto;display:flex;gap:22px;flex-wrap:wrap;padding:8px 12px;
       border-top:1px solid #e3e6ea;
       font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:#3a4250}
  .out b{color:#1f5fd0}
</style>
</head>
<body>
<div class="bar">
  <button id="next">切换数据集</button>
  <span id="name">—</span>
</div>
<svg id="stage" viewBox="0 0 640 320" preserveAspectRatio="xMidYMid meet"></svg>
<div class="out">
  <span>bbox <b id="box">—</b></span>
  <span>东西宽 <span id="w">—</span></span>
  <span>南北高 <span id="h">—</span></span>
</div>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@7/turf.min.js"></script>
<script>
(function () {
  'use strict';

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

  var points = turf.featureCollection([
    turf.point([116.300, 39.880], { name: 'P1' }),
    turf.point([116.470, 39.920], { name: 'P2' }),
    turf.point([116.420, 40.000], { name: 'P3' }),
    turf.point([116.350, 39.950], { name: 'P4' })
  ]);

  var line = turf.lineString([
    [116.330, 39.965], [116.408, 39.905], [116.520, 39.870]
  ]);

  var sets = [
    { name: '四个点', data: points, points: points.features, line: null },
    { name: '一条折线', data: turf.featureCollection([line]), points: [], line: line.geometry.coordinates },
    { name: '点与线的集合', data: turf.featureCollection(points.features.concat([line])),
      points: points.features, line: line.geometry.coordinates }
  ];

  var W = 640, H = 320, PAD = 36;
  var BOX = [116.25, 39.82, 116.58, 40.05];
  var stage = document.getElementById('stage');
  var idx = 0;

  var kx = Math.cos(((BOX[1] + BOX[3]) / 2) * Math.PI / 180);
  var x0 = BOX[0] * kx, x1 = BOX[2] * kx;
  var y0 = BOX[1], y1 = BOX[3];
  var s = Math.min((W - PAD * 2) / (x1 - x0), (H - PAD * 2) / (y1 - y0));
  var ox = (W - (x1 - x0) * s) / 2;
  var oy = (H - (y1 - y0) * s) / 2;

  function pr(c) {
    return [(c[0] * kx - x0) * s + ox, (y1 - c[1]) * s + oy];
  }

  function draw() {
    var set = sets[idx];
    var box = turf.bbox(set.data);
    var rect = turf.bboxPolygon(box);

    var parts = ['<rect x="0" y="0" width="640" height="320" fill="none" stroke="#e3e6ea"/>'];

    var d = '';
    rect.geometry.coordinates[0].forEach(function (c, i) {
      var p = pr(c);
      d += (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1);
    });
    parts.push('<path d="' + d + 'Z" fill="rgba(31,95,208,0.07)" stroke="#1f5fd0" ' +
               'stroke-width="1.5" stroke-dasharray="5 4"/>');

    if (set.line) {
      var ld = '';
      set.line.forEach(function (c, i) {
        var p = pr(c);
        ld += (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1);
      });
      parts.push('<path d="' + ld + '" fill="none" stroke="#c2410c" stroke-width="2"/>');
    }

    set.points.forEach(function (f) {
      var p = pr(f.geometry.coordinates);
      parts.push('<circle cx="' + p[0].toFixed(1) + '" cy="' + p[1].toFixed(1) +
                 '" r="3.4" fill="#17694a"/>');
    });

    stage.innerHTML = parts.join('');

    document.getElementById('name').textContent = set.name;
    document.getElementById('box').textContent = box.map(function (v) {
      return v.toFixed(4);
    }).join(', ');

    var width = turf.distance(turf.point([box[0], box[1]]),
                              turf.point([box[2], box[1]]),
                              { units: 'kilometers' });
    var height = turf.distance(turf.point([box[0], box[1]]),
                               turf.point([box[0], box[3]]),
                               { units: 'kilometers' });

    document.getElementById('w').textContent = width.toFixed(2) + ' km';
    document.getElementById('h').textContent = height.toFixed(2) + ' km';
  }

  document.getElementById('next').addEventListener('click', function () {
    idx = (idx + 1) % sets.length;
    draw();
  });

  draw();
})();
</script>
</body>
</html>