Polygon Pattern

<!--
  示例：多边形图案填充
  核心逻辑：canvas 画出 32×32 的斜纹块，addImage 注册后由 fill-pattern 平铺
  数据：页面内生成的图案纹理，替代外部的 PNG 贴图文件
  依赖：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:8px;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 button{background:#fff;border:1px solid #cfd6df;border-radius:16px;padding:3px 12px;
       font:12px/1.4 inherit;color:#3a4250;cursor:pointer}
  .bar button:hover{border-color:#2e86de;color:#2e86de}
  #map{flex:1 1 auto;min-height:0}
</style>
</head>
<body>
<div class="bar">
  <span>图案</span>
  <button data-pattern="stripe">斜纹</button>
  <button data-pattern="dot">圆点</button>
  <button data-pattern="grid">网格</button>
  <button data-pattern="none">纯色</button>
</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;
  }

  /* 每种图案画在一张同样大小的 canvas 上，颜色与底图区分开 */
  function makePattern(kind) {
    var S = 32;
    var c = document.createElement('canvas');
    c.width = S;
    c.height = S;
    var g = c.getContext('2d');

    g.fillStyle = '#dbeafe';
    g.fillRect(0, 0, S, S);
    g.strokeStyle = '#1c4e80';
    g.fillStyle = '#1c4e80';

    if (kind === 'stripe') {
      g.lineWidth = 3;
      for (var i = -S; i < S * 2; i += 10) {
        g.beginPath();
        g.moveTo(i, 0);
        g.lineTo(i + S, S);
        g.stroke();
      }
    } else if (kind === 'dot') {
      for (var y = 5; y < S; y += 10) {
        for (var x = 5; x < S; x += 10) {
          g.beginPath();
          g.arc(x, y, 2.6, 0, Math.PI * 2);
          g.fill();
        }
      }
    } else if (kind === 'grid') {
      g.lineWidth = 1.6;
      for (var k = 0; k <= S; k += 8) {
        g.beginPath(); g.moveTo(k, 0); g.lineTo(k, S); g.stroke();
        g.beginPath(); g.moveTo(0, k); g.lineTo(S, k); g.stroke();
      }
    }

    return { canvas: c, data: g.getImageData(0, 0, S, S) };
  }

  function block(lng, lat, w, h) {
    return [[
      [lng - w, lat - h], [lng + w, lat - h],
      [lng + w, lat + h], [lng - w, lat + h],
      [lng - w, lat - h]
    ]];
  }

  var areas = [
    { name: '北部', c: [116, 39, 5, 3.2] },
    { name: '东部', c: [120, 31, 4.6, 3] },
    { name: '西部', c: [103, 31, 6, 3.8] },
    { name: '南部', c: [113, 23.5, 4.4, 2.4] }
  ];

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

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

  map.on('load', function () {
    /* 三种图案都提前注册，切换时只改 fill-pattern 的名字 */
    ['stripe', 'dot', 'grid'].forEach(function (kind) {
      var p = makePattern(kind);
      map.addImage('pattern-' + kind, p.data, { pixelRatio: 1 });
    });

    map.addSource('areas', {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features: areas.map(function (a) {
          return {
            type: 'Feature',
            properties: { name: a.name },
            geometry: { type: 'Polygon', coordinates: block.apply(null, a.c) }
          };
        })
      }
    });

    map.addLayer({
      id: 'areas-fill',
      type: 'fill',
      source: 'areas',
      paint: {
        'fill-color': '#2e86de',
        'fill-opacity': 0.55,
        'fill-pattern': 'pattern-stripe'
      }
    });

    map.addLayer({
      id: 'areas-line',
      type: 'line',
      source: 'areas',
      paint: { 'line-color': '#1c4e80', 'line-width': 1.4 }
    });
  });

  Array.prototype.forEach.call(document.querySelectorAll('button[data-pattern]'), function (btn) {
    btn.addEventListener('click', function () {
      if (!map.getLayer('areas-fill')) return;
      var kind = btn.getAttribute('data-pattern');
      if (kind === 'none') {
        /* 移除图案属性即可回到纯色填充 */
        map.removePaintProperty('areas-fill', 'fill-pattern');
      } else {
        map.setPaintProperty('areas-fill', 'fill-pattern', 'pattern-' + kind);
      }
    });
  });

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