leaflet天地圖GeoJSON邊界添加自定義背景

需求：地圖根據用戶權限設置操作權限，不可操作區域疊加灰色斜杠

效果：

 

 

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'
);