需求：地圖根據使用者許可權設定操作許可權，不可操作區域疊加灰色斜槓

效果：

L.geoJSON新增的邊界按順序疊加，但是都是疊加在svg內，無法通過調整區域層級疊加imgLayer的方式新增效果。

通過除錯和檢視文件，發現svg可以新增背景圖片
需要建立svg圖片元素，並獲取需要禁用的區域新增自定義圖片。

原邏輯：不新增灰色禁用背景
1. 繪製所有底圖
2. 給底圖預設新增禁用區域填充顏色
3. 繪製有許可權區域底圖
4. 繪製有許可權區域的底圖
5. 分別繪製無許可權和有許可權區域的預警填充.

現邏輯將第二步使用顏色填充預設區域改成用背景填充
程式碼如下

// townList為所有區域資料，包含geoJson需要的經緯度座標
townsList.forEach(el 
 
=> {
      const bound = L.geoJSON([el] as any, {
        style: {
          weight: 1,
          fillOpacity: 1,
          color: '#666',
          fillColor: 'url(#disableImg)', // 這裡設定為下面建立的斜槓圖片svg元素id
          className: 'disable-layer'
        },
        onEachFeature: this.mouseClick
      });
      bound.addTo(
 
this.map);
    });
        this.setDisableLayer();

/**
   * @description: 設定底圖為禁用狀態
   */
  setDisableLayer() {
    const svgEl = document.querySelector<HTMLElement>('.leaflet-zoom-animated');
    const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
    const pattern = document.createElementNS(
      
 
'http://www.w3.org/2000/svg',
      'pattern'
    );
    pattern.setAttributeNS(null, 'id', 'disableImg');
    pattern.setAttributeNS(null, 'patternUnits', 'userSpaceOnUse');
    this.setSvgSize(pattern, 10);
    const svgimg = document.createElementNS(
      'http://www.w3.org/2000/svg',
      'image'
    );
    svgimg.setAttributeNS(
      'http://www.w3.org/1999/xlink',
      'xlink:href',
      require('@/assets/imgs/warningPublish/map disable.jpg')
    );
    this.setSvgSize(svgimg, 10);
    svgimg.setAttributeNS(null, 'preserveAspectRatio', 'none');
    pattern.appendChild(svgimg);
    defs.appendChild(pattern);
    svgEl && svgEl.appendChild(defs);
    this.disableBg.pattern = pattern;
    this.disableBg.svgimg = svgimg;
  }

/**
   * @description: 設定禁用的區域斜槓條紋大小
   * @param  el svg圖片的Pattern和Image元素
   * @param  size 寬高
   */
  setSvgSize(el: SVGImageElement | SVGPatternElement, size: number) {
    el.setAttributeNS(null, 'width', size + '');
    el.setAttributeNS(null, 'height', size + '');
    el.setAttributeNS(null, 'x', '0');
    el.setAttributeNS(null, 'y', '0');
  }


監聽地圖縮放，根據縮放等級調整斜槓大小
this.map.on('zoomend', (e: L.LeafletMouseEvent) => {
      if (this.disableBg.svgimg && this.disableBg.pattern) {
        //獲取當前放大或者縮小的等級
        let scale = e.target.getZoom();
        const baseSize = scale < 10 ? 0.625 : 1;
        const size = baseSize * scale;
        this.setSvgSize(this.disableBg.svgimg, size);
        this.setSvgSize(this.disableBg.pattern, size);
      }
    });

建立SVG的元素需要用setAttributeNS，並指定namespace如：
const svgimg = document.createElementNS(
'http://www.w3.org/2000/svg',
'image'
);