Stadia Maps

<!--
  示例：Stadia 底图样式
  要点：XYZ 源的 url 模板里留 {z}/{x}/{y}，样式与 Key 都写在模板上
  依赖：OpenLayers 10.3.1 · jsDelivr CDN（底图 OSM，无 Key）
  替代：官方用 Stadia 的 Key 拉取主题底图，这里保留 OSM 并用滤镜模拟主题效果
-->
<!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>Stadia 底图样式</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 select,.bar input{font-size:12px;padding:2px 4px}
  .bar b{color:#16181d;font-weight:600}
  .bar .url{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:#1f5fd0;
            max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wrap{position:relative;flex:1 1 auto;min-height:0}
  #map{position:absolute;inset:0;background:#eef0f3}
</style>
</head>
<body>
<div class="bar">
  <label>主题
    <select id="theme">
      <option value="alidade_smooth">Alidade Smooth</option>
      <option value="alidade_dark">Alidade Dark</option>
      <option value="outdoors">Outdoors</option>
    </select>
  </label>
  <label>Key <input id="key" size="14" placeholder="填入 API Key"></label>
  <span class="url" id="u">—</span>
</div>
<div class="wrap">
  <div id="map"></div>
</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 FILTERS = {
    alidade_smooth: 'saturate(1.05) contrast(1.02)',
    alidade_dark: 'grayscale(.4) invert(1) hue-rotate(180deg) contrast(.92) brightness(.92)',
    outdoors: 'saturate(1.35) contrast(1.08)'
  };

  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'}) })],
    view: new ol.View({ center: ol.proj.fromLonLat([116.391, 39.907]), zoom: 12 }),
    controls: ol.control.defaults.defaults({ attribution: false, rotate: false })
  });

  /* 换成 Stadia 时的地址模板：https://tiles.stadiamaps.com/tiles/{theme}/{z}/{x}/{y}.png?api_key={key} */
  function templateUrl(theme, key) {
    return 'https://tiles.stadiamaps.com/tiles/' + theme +
      '/{z}/{x}/{y}.png' + (key ? '?api_key=' + key : '');
  }

  function apply() {
    var theme = document.getElementById('theme').value;
    var key = document.getElementById('key').value.trim();
    document.getElementById('u').textContent = templateUrl(theme, key ? '******' : '');
    /* 没有 Key 时用滤镜近似对应主题的观感 */
    map.getTargetElement().style.filter = FILTERS[theme];
  }

  document.getElementById('theme').addEventListener('change', apply);
  document.getElementById('key').addEventListener('input', apply);
  apply();
})();
</script>
</body>
</html>