Populated Places

<!--
  示例：人口聚集地标注
  要点：按人口分级符号大小，declutter 自动避让重叠标注
  依赖：OpenLayers 10.3.1 · jsDelivr CDN（底图 OSM，无 Key）
  替代：官方加载 Natural Earth 人口点 GeoJSON，这里用页面内构造的城市列表
-->
<!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:14px;align-items:center;font-size:12px;color:#58606e;flex-wrap:wrap}
  .bar b{color:#16181d;font-weight:600}
  #map{flex:1 1 auto;min-height:0;background:#eef0f3}
</style>
</head>
<body>
<div class="bar">
  <span>人口下限 <b id="v">0</b> 万</span>
  <input type="range" id="min" min="0" max="1500" value="0" step="50" style="width:180px">
  <span>标注数 <b id="n">—</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;
  }

  /* [名称, 经度, 纬度, 城区人口/万] */
  var CITIES = [
    ['上海', 121.4737, 31.2304, 2487], ['北京', 116.4074, 39.9042, 2189],
    ['广州', 113.2644, 23.1291, 1868], ['深圳', 114.0579, 22.5431, 1756],
    ['成都', 104.0665, 30.5728, 1334], ['天津', 117.2008, 39.0842, 1387],
    ['武汉', 114.3055, 30.5928, 1108], ['西安', 108.9402, 34.3416, 1295],
    ['杭州', 120.1551, 30.2741, 1194], ['重庆', 106.5516, 29.5630, 2026],
    ['南京', 118.7969, 32.0603, 931], ['沈阳', 123.4315, 41.8057, 907],
    ['郑州', 113.6254, 34.7466, 1260], ['长沙', 112.9388, 28.2282, 839],
    ['青岛', 120.3826, 36.0671, 1007], ['昆明', 102.8329, 24.8801, 555],
    ['哈尔滨', 126.5349, 45.8038, 659], ['福州', 119.2965, 26.0745, 416],
    ['济南', 117.1201, 36.6512, 726], ['合肥', 117.2272, 31.8206, 502],
    ['南昌', 115.8582, 28.6820, 336], ['太原', 112.5489, 37.8706, 405],
    ['石家庄', 114.5149, 38.0428, 442], ['南宁', 108.3669, 22.8170, 456],
    ['贵阳', 106.6302, 26.6477, 383], ['兰州', 103.8343, 36.0611, 289],
    ['乌鲁木齐', 87.6168, 43.8256, 408], ['呼和浩特', 111.7519, 40.8414, 244],
    ['银川', 106.2309, 38.4872, 188], ['西宁', 101.7782, 36.6171, 162],
    ['拉萨', 91.1409, 29.6456, 87], ['海口', 110.1999, 20.0440, 205],
    ['长春', 125.3235, 43.8171, 496], ['大连', 121.6147, 38.9140, 461],
    ['厦门', 118.0894, 24.4798, 394], ['宁波', 121.5503, 29.8746, 361],
    ['苏州', 120.5853, 31.2989, 672], ['无锡', 120.3119, 31.4912, 366],
    ['佛山', 113.1214, 23.0215, 950], ['东莞', 113.7518, 23.0209, 846]
  ];

  var all = [];
  var layer = null;

  function styleFor(f) {
    var p = f.get('pop');
    var r = 4 + Math.sqrt(p) / 12;
    return new ol.style.Style({
      image: new ol.style.Circle({
        radius: r,
        fill: new ol.style.Fill({ color: 'rgba(31,95,208,.75)' }),
        stroke: new ol.style.Stroke({ color: '#ffffff', width: 1.5 })
      }),
      text: new ol.style.Text({
        text: f.get('name'),
        offsetY: -r - 6,
        font: (p > 1000 ? '600 ' : '400 ') + '12px sans-serif',
        fill: new ol.style.Fill({ color: '#16181d' }),
        stroke: new ol.style.Stroke({ color: '#ffffff', width: 3 }),
        overflow: false
      })
    });
  }

  function render(minPop) {
    var feats = all.filter(function (f) { return f.get('pop') >= minPop; });
    layer.getSource().clear();
    layer.getSource().addFeatures(feats);
    document.getElementById('n').textContent = feats.length;
  }

  all = CITIES.map(function (c) {
    return new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.fromLonLat([c[1], c[2]])),
      name: c[0],
      pop: c[3]
    });
  });

  layer = new ol.layer.Vector({
    source: new ol.source.Vector(),
    declutter: true,
    style: styleFor
  });

  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([108.5, 32.5]),
      zoom: 4,
      minZoom: 3,
      maxZoom: 12
    }),
    controls: ol.control.defaults.defaults({ attribution: false, rotate: false })
  });

  render(0);

  document.getElementById('min').addEventListener('input', function () {
    document.getElementById('v').textContent = this.value;
    render(Number(this.value));
  });
})();
</script>
</body>
</html>