Measure Style

<!--
  示例：测量样式
  要点：Draw 交互绘制线/面，样式函数把长度、面积直接写进标注
  依赖：OpenLayers 10.3.1 · 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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@10.3.1/ol.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;color:#16181d}
  .bar{flex:0 0 auto;padding:8px 12px;background:#f6f7f9;border-bottom:1px solid #e3e6ea;
       display:flex;gap:12px;align-items:center;font-size:12px;color:#58606e;flex-wrap:wrap}
  .bar button{padding:4px 10px;border:1px solid #d5dae2;background:#fff;border-radius:4px;cursor:pointer}
  .bar button.on{background:#1f5fd0;border-color:#1f5fd0;color:#fff}
  #map{flex:1 1 auto;min-height:0;background:#eef0f3}
</style>
</head>
<body>
<div class="bar">
  <button id="btnLine" class="on">量长度</button>
  <button id="btnArea">量面积</button>
  <button id="btnClear">清空</button>
  <span id="tip">单击起点，逐点添加，双击结束</span>
</div>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/ol@10.3.1/dist/ol.js"></script>
<script>
(function () {
  'use strict';
  if (!window.ol) {
    document.getElementById('map').textContent = 'OpenLayers 加载失败，请检查 cdn.jsdelivr.net 是否可访问';
    return;
  }

  var source = new ol.source.Vector();

  function measureText(geom) {
    if (geom.getType() === 'Polygon') {
      var km2 = ol.sphere.getArea(geom) / 1e6;
      return km2.toFixed(3) + ' km²';
    }
    if (geom.getType() === 'LineString') {
      var km = ol.sphere.getLength(geom) / 1000;
      return km.toFixed(3) + ' km';
    }
    return '';
  }

  /* 测量样式：线为虚线加白描边，标注跟随几何中心 */
  function measureStyle(feature) {
    var geom = feature.getGeometry();
    return new ol.style.Style({
      fill: new ol.style.Fill({ color: 'rgba(31,95,208,0.15)' }),
      stroke: new ol.style.Stroke({ color: '#1f5fd0', width: 2.5 }),
      image: new ol.style.Circle({
        radius: 4,
        fill: new ol.style.Fill({ color: '#ffffff' }),
        stroke: new ol.style.Stroke({ color: '#1f5fd0', width: 2 })
      }),
      text: new ol.style.Text({
        text: measureText(geom),
        font: '600 13px sans-serif',
        fill: new ol.style.Fill({ color: '#0b3d91' }),
        stroke: new ol.style.Stroke({ color: '#ffffff', width: 3.5 }),
        overflow: true
      })
    });
  }

  var layer = new ol.layer.Vector({ source: source, style: measureStyle });

  var map = new ol.Map({
    target: 'map',
    layers: [new ol.layer.Tile({ source: new ol.source.XYZ({url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', attributions: 'Tiles © Esri'}) }), layer],
    view: new ol.View({ center: ol.proj.fromLonLat([116.40, 39.905]), zoom: 13 }),
    controls: ol.control.defaults.defaults({ rotate: false })
  });

  var draw = null;

  function startDraw(type) {
    if (draw) map.removeInteraction(draw);
    draw = new ol.interaction.Draw({
      source: source,
      type: type,
      /* 绘制过程中的草图同样用测量样式，长度边画边变 */
      style: function (feature) {
        var s = measureStyle(feature);
        s.getStroke().setLineDash([8, 6]);
        return s;
      }
    });

    draw.on('drawstart', function (evt) {
      /* 顶点变化时刷新标注，双击结束后保留最终值 */
      evt.feature.getGeometry().on('change', function () {
        evt.feature.changed();
      });
    });

    map.addInteraction(draw);
  }

  document.getElementById('btnLine').addEventListener('click', function () {
    startDraw('LineString');
    this.classList.add('on');
    document.getElementById('btnArea').classList.remove('on');
  });

  document.getElementById('btnArea').addEventListener('click', function () {
    startDraw('Polygon');
    this.classList.add('on');
    document.getElementById('btnLine').classList.remove('on');
  });

  document.getElementById('btnClear').addEventListener('click', function () {
    source.clear();
  });

  startDraw('LineString');
})();
</script>
</body>
</html>