Dynamic Style

<!--
  示例：动态改样式
  核心逻辑：setPaintProperty 现场替换 fill-color 表达式与 line-width 插值，不重设样式
  依赖：MapLibre GL JS 4 · jsDelivr CDN · demotiles 样式与瓦片
-->
<!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/maplibre-gl@4/dist/maplibre-gl.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;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 b{color:#16181d;font-weight:600}
  .bar input[type=range]{width:110px}
  .seg{display:flex;border:1px solid #cdd3db;border-radius:4px;overflow:hidden}
  .seg button{border:0;background:#fff;padding:4px 10px;font:12px/1.5 inherit;color:#16181d;cursor:pointer}
  .seg button.on{background:#1f5fd0;color:#fff}
  #map{flex:1 1 auto;min-height:0}
</style>
</head>
<body>
<div class="bar">
  <div class="seg" id="scheme">
    <button data-s="continent" class="on">按洲着色</button>
    <button data-s="mono">单色</button>
    <button data-s="warm">暖色</button>
  </div>
  <label>填充不透明度 <input id="op" type="range" min="0.1" max="1" step="0.05" value="0.7"> <b id="opv">0.70</b></label>
  <span>方案 <b id="cur">按洲着色</b></span>
</div>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
<script>
(function () {
  'use strict';

  if (typeof maplibregl === 'undefined') {
    document.body.innerHTML =
      '<div style="padding:24px;color:#b42318">MapLibre 加载失败，请检查能否访问 cdn.jsdelivr.net</div>';
    return;
  }

  var MAP = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [40.0, 30.0],
    zoom: 1.8,
    attributionControl: { compact: true, customAttribution: 'MapLibre demo tiles' }
  });

  MAP.addControl(new maplibregl.NavigationControl(), 'top-right');

  var SCHEMES = {
    continent: {
      name: '按洲着色',
      color: [
        'match', ['get', 'CONTINENT'],
        'Asia', '#cfe3f5',
        'Europe', '#e0daf2',
        'Africa', '#f2e7cf',
        'North America', '#d9eee0',
        'South America', '#f5dede',
        'Oceania', '#e3ead0',
        '#e6eaf0'
      ],
      line: '#4c6b87'
    },
    mono: {
      name: '单色',
      color: '#dfe7f0',
      line: '#6b7c8f'
    },
    warm: {
      name: '暖色',
      color: [
        'interpolate', ['linear'], ['zoom'],
        1, '#f6e0c8',
        4, '#e8b98c'
      ],
      line: '#9c6b3c'
    }
  };

  MAP.on('load', function () {
    MAP.addSource('world', {
      type: 'vector',
      tiles: ['https://demotiles.maplibre.org/tiles/{z}/{x}/{y}.pbf'],
      maxzoom: 6
    });

    MAP.addLayer({
      id: 'world-fill',
      type: 'fill',
      source: 'world',
      'source-layer': 'countries',
      paint: {
        'fill-color': SCHEMES.continent.color,
        'fill-opacity': 0.7
      }
    }, 'countries-boundary');

    MAP.addLayer({
      id: 'world-line',
      type: 'line',
      source: 'world',
      'source-layer': 'countries',
      paint: {
        'line-color': SCHEMES.continent.line,
        'line-width': ['interpolate', ['linear'], ['zoom'], 1, 0.5, 5, 1.4]
      }
    });
  });

  function applyScheme(key) {
    var s = SCHEMES[key];
    if (!MAP.getLayer('world-fill')) return;

    MAP.setPaintProperty('world-fill', 'fill-color', s.color);
    MAP.setPaintProperty('world-line', 'line-color', s.line);
    MAP.setPaintProperty('world-line', 'line-width',
      ['interpolate', ['linear'], ['zoom'], 1, 0.5, 5, 1.4]);

    document.getElementById('cur').textContent = s.name;
    document.querySelectorAll('#scheme button').forEach(function (b) {
      b.classList.toggle('on', b.getAttribute('data-s') === key);
    });
  }

  document.getElementById('scheme').addEventListener('click', function (e) {
    var btn = e.target.closest('button');
    if (btn) applyScheme(btn.getAttribute('data-s'));
  });

  document.getElementById('op').addEventListener('input', function () {
    var v = parseFloat(this.value);
    document.getElementById('opv').textContent = v.toFixed(2);
    if (MAP.getLayer('world-fill')) {
      MAP.setPaintProperty('world-fill', 'fill-opacity', v);
    }
  });

  MAP.on('error', function (e) {
    if (e.error) console.warn('地图错误：' + e.error.message);
  });
})();
</script>
</body>
</html>