Area

<!--
  示例：计算面积 — turf.area 得到平方米，配合 turf.length 取周长
  核心逻辑：地块面积按平方米保留，展示时换算成平方公里、公顷与亩
  依赖：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}
  .bar b{color:#16181d;font-weight:600}
  svg{flex:1 1 auto;min-height:0;width:100%;display:block;background:#fbfcfd}
  .out{flex:0 0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:4px 18px;
       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>平方米 <b id="m2">—</b></span>
  <span>平方公里 <b id="km2">—</b></span>
  <span>公顷 <b id="ha">—</b></span>
  <span>亩 <b id="mu">—</b></span>
  <span>周长 <b id="peri">—</b></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 parcels = [
    {
      name: '矩形地块',
      coords: [[116.300, 39.950], [116.360, 39.950], [116.360, 39.990],
               [116.300, 39.990], [116.300, 39.950]]
    },
    {
      name: '五边形地块',
      coords: [[116.310, 39.900], [116.420, 39.892], [116.470, 39.930],
               [116.415, 39.968], [116.330, 39.950], [116.310, 39.900]]
    },
    {
      name: '带缺口地块',
      coords: [[116.260, 39.880], [116.520, 39.880], [116.520, 40.010],
               [116.470, 40.010], [116.470, 39.950], [116.360, 39.950],
               [116.360, 40.020], [116.260, 40.020], [116.260, 39.880]]
    }
  ];

  var W = 640, H = 320, PAD = 30;
  var stage = document.getElementById('stage');
  var idx = 0;

  function draw() {
    var item = parcels[idx];
    var polygon = turf.polygon([item.coords], { name: item.name });
    var bbox = turf.bbox(polygon);

    var kx = Math.cos(((bbox[1] + bbox[3]) / 2) * Math.PI / 180);
    var x0 = bbox[0] * kx, x1 = bbox[2] * kx;
    var y0 = bbox[1], y1 = bbox[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];
    }

    var d = '';
    item.coords.forEach(function (c, i) {
      var p = pr(c);
      d += (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1);
    });
    d += 'Z';

    stage.innerHTML =
      '<rect x="0" y="0" width="640" height="320" fill="none" stroke="#e3e6ea"/>' +
      '<path d="' + d + '" fill="rgba(23,105,74,0.12)" stroke="#17694a" stroke-width="2"/>';

    var m2 = turf.area(polygon);
    var perimeter = turf.length(polygon, { units: 'kilometers' });

    document.getElementById('name').textContent = item.name;
    document.getElementById('m2').textContent = Math.round(m2).toLocaleString();
    document.getElementById('km2').textContent = (m2 / 1e6).toFixed(3);
    document.getElementById('ha').textContent = (m2 / 1e4).toFixed(1);
    document.getElementById('mu').textContent = (m2 / 666.6667).toFixed(1);
    document.getElementById('peri').textContent = perimeter.toFixed(2) + ' km';
  }

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

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