Fill Pattern

<!--
  示例：图案填充
  核心逻辑：FillStyleExtension 打开 pattern，用一张 canvas 图集给面图层做纹理填充
  数据：页面内绘制的 128×128 斜纹图集与四个分区多边形，替代外部的图案图集文件
  依赖：deck.gl 9.0 · jsDelivr CDN
-->
<!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>
<style>
  html,body{height:100%;margin:0;background:#0d1117}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif;color:#e6e8ec}
  .bar{position:relative;z-index:5;flex:0 0 auto;padding:8px 12px;background:#161b22;border-bottom:1px solid #252c36;
       display:flex;gap:14px;align-items:center;font-size:12px;color:#8b93a1;flex-wrap:wrap}
  .bar b{color:#58a6ff;font-weight:600}
  .bar label{display:flex;gap:5px;align-items:center;cursor:pointer}
  #cv{flex:1 1 auto;min-height:0;width:100%}
</style>
</head>
<body>
<div class="bar">
  <span>分区 <b>4</b></span>
  <label><input id="on" type="checkbox" checked> 启用纹理</label>
  <span>图集由 canvas 生成，纹理按像素尺寸平铺</span>
</div>
<canvas id="cv"></canvas>
<script src="https://cdn.jsdelivr.net/npm/deck.gl@9.0.35/dist.min.js"></script>
<script>
(function () {
  'use strict';

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

  /* 图集里放两种图案：左半 64×64 是斜纹，右半是圆点 */
  function makeAtlas() {
    var S = 128;
    var c = document.createElement('canvas');
    c.width = S;
    c.height = S;
    var g = c.getContext('2d');

    g.fillStyle = '#1b2430';
    g.fillRect(0, 0, S, S);

    g.strokeStyle = '#7fb8ff';
    g.lineWidth = 4;
    for (var i = -S; i < S; i += 14) {
      g.beginPath();
      g.moveTo(i, 0);
      g.lineTo(i + 64, 64);
      g.stroke();
    }

    g.fillStyle = '#ffcc66';
    for (var y = 5; y < 64; y += 14) {
      for (var x = 69; x < 128; x += 14) {
        g.beginPath();
        g.arc(x, y, 3.5, 0, Math.PI * 2);
        g.fill();
      }
    }

    return c.toDataURL('image/png');
  }

  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: '华北', polygon: block(116, 39, 6, 4), pattern: 'hatch', color: [40, 70, 110] },
    { name: '华东', polygon: block(119, 31, 5, 3.6), pattern: 'dots', color: [50, 65, 90] },
    { name: '西南', polygon: block(103, 29, 6.5, 4.2), pattern: 'hatch', color: [45, 75, 95] },
    { name: '西北', polygon: block(96, 38, 8, 4.5), pattern: 'dots', color: [55, 60, 80] }
  ];

  var patterns = {
    hatch: { x: 0, y: 0, width: 64, height: 64 },
    dots: { x: 64, y: 0, width: 64, height: 64 }
  };

  var layer = new deck.GeoJsonLayer({
    id: 'patterned-areas',
    data: {
      type: 'FeatureCollection',
      features: areas.map(function (a) {
        return {
          type: 'Feature',
          properties: { name: a.name, pattern: a.pattern, color: a.color },
          geometry: { type: 'Polygon', coordinates: a.polygon }
        };
      })
    },
    filled: true,
    stroked: true,
    getFillColor: function (f) { return f.properties.color.concat([210]); },
    getLineColor: [200, 220, 255, 200],
    getLineWidth: 2,
    lineWidthUnits: 'pixels',
    /* 扩展新增的四个属性 */
    fillPatternAtlas: makeAtlas(),
    fillPatternMapping: patterns,
    getFillPattern: function (f) { return f.properties.pattern; },
    getFillPatternScale: 1,
    getFillPatternOffset: [0, 0],
    fillPatternSizeUnits: 'pixels',
    getFillPatternBackgroundColor: [25, 32, 42, 255],
    extensions: [new deck.FillStyleExtension({ pattern: true })],
    pickable: true
  });

  var deckgl = new deck.Deck({
    canvas: document.getElementById('cv'),
    width: '100%',
    height: '100%',
    initialViewState: {
      longitude: 108,
      latitude: 34,
      zoom: 3.4,
      pitch: 0,
      bearing: 0
    },
    controller: true,
    layers: [layer],
    getTooltip: function (info) {
      return info.object ? info.object.properties.name : null;
    }
  });

  document.getElementById('on').addEventListener('change', function () {
    layer = layer.clone({ fillPatternEnabled: this.checked });
    deckgl.setProps({ layers: [layer] });
  });

  window.__deck = deckgl;
})();
</script>
</body>
</html>