Reprojection

<!--
  示例：GeoJSON 重投影
  要点：readFeatures 的 featureProjection 决定落图坐标，缺省会留在经纬度上
  依赖：OpenLayers 10.3.1 · jsDelivr CDN（底图 OSM，无 Key）
-->
<!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>GeoJSON 重投影</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:14px;align-items:center;font-size:12px;color:#58606e;flex-wrap:wrap}
  .bar b{color:#16181d;font-weight:600;font-variant-numeric:tabular-nums}
  #map{flex:1 1 auto;min-height:0;background:#eef0f3}
</style>
</head>
<body>
<div class="bar">
  <label><input type="checkbox" id="wrong"> 省略 featureProjection</label>
  <span>首点原始坐标 <b id="raw">—</b></span>
  <span>落图坐标 <b id="out">—</b></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;
  }

  /* WGS84 经纬度多边形：北京二环内一个示意区块 */
  var geojson = {
    type: 'FeatureCollection',
    features: [{
      type: 'Feature',
      properties: { name: '示意区块' },
      geometry: {
        type: 'Polygon',
        coordinates: [[
          [116.330, 39.890], [116.430, 39.890],
          [116.430, 39.960], [116.330, 39.960],
          [116.330, 39.890]
        ]]
      }
    }]
  };

  var format = new ol.format.GeoJSON();

  var layer = new ol.layer.Vector({
    style: new ol.style.Style({
      fill: new ol.style.Fill({ color: 'rgba(31,95,208,.22)' }),
      stroke: new ol.style.Stroke({ color: '#1f5fd0', width: 2 }),
      text: new ol.style.Text({
        text: '示意区块',
        font: '500 13px sans-serif',
        fill: new ol.style.Fill({ color: '#16181d' }),
        stroke: new ol.style.Stroke({ color: '#fff', width: 3 })
      })
    })
  });

  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.38, 39.925]), zoom: 12 }),
    controls: ol.control.defaults.defaults({ attribution: false, rotate: false })
  });

  function load(useProjection) {
    var opts = useProjection ? { featureProjection: 'EPSG:3857' } : {};
    var feats = format.readFeatures(geojson, opts);
    layer.setSource(new ol.source.Vector({ features: feats }));

    var first = feats[0].getGeometry().getCoordinates()[0][0];
    document.getElementById('raw').textContent =
      '116.330, 39.890';
    document.getElementById('out').textContent =
      first[0].toFixed(0) + ', ' + first[1].toFixed(0);

    if (useProjection) {
      map.getView().fit(feats[0].getGeometry().getExtent(), { padding: [80, 80, 80, 80] });
    } else {
      /* 没有投影转换时要素位于 0,0 附近，缩放回原视野才能看到 */
      map.getView().setCenter(ol.proj.fromLonLat([116.38, 39.925]));
    }
  }

  load(true);
  document.getElementById('wrong').addEventListener('change', function () {
    load(!this.checked);
  });
})();
</script>
</body>
</html>