Bootstrap

leaflet制作3D地图边界效果(js实现,css效果不好)

使用L.geoJSON方法添加地图边界,并且添加类名:

geoJSON(cityMap as any, {
    interactive: false,
    style: {
      fill: false,
      color: '#fff',
      weight: 3,
      pane: 'bottom',
      className: 'map-border',
    },
  });


leaflet添加geojson后的dom结构:
<svg>
        <g>
                <path class="map-border">


给边界添加3D效果:
 

  // 1. 获取 SVG 元素
  const svg = document.querySelector("div.leaflet-bottom-pane")?.children[0] as SVGSVGElement;

  // 2. 创建 <defs> 元素
  const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");

  // 3. 创建 <filter> 元素,并设置其属性
  const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
  filter.setAttribute("x", "0");
  filter.setAttribute("y", "0");
  filter.setAttribute("width", "100%");
  filter.setAttribute("height", "100%");
  filter.setAttribute("id", "filter3D");

  // 4. 创建 <feOffset> 元素,并设置其属性
  const feOffset = document.createElementNS("http://www.w3.org/2000/svg", "feOffset");
  feOffset.setAttribute("in", "SourceAlpha");
  feOffset.setAttribute("dx", "20"); // 水平偏移
  feOffset.setAttribute("dy", "20"); // 垂直偏移

  // 5. 创建 <feBlend> 元素,并设置其属性
  const feBlend = document.createElementNS("http://www.w3.org/2000/svg", "feBlend");
  feBlend.setAttribute("in", "SourceGraphic");

  // 6. 将 <feOffset> 和 <feBlend> 添加到 <filter> 中
  filter.appendChild(feOffset);
  filter.appendChild(feBlend);

  // 7. 将 <filter> 添加到 <defs> 中
  defs.appendChild(filter);

  // 8. 将 <defs> 添加到 SVG 中
  svg.appendChild(defs);

  // 9. 获取 .map-border 类的 path 元素,并应用滤镜
  const path = document.querySelector(".map-border");
  // 给svg填色,不然滤镜内部也是透明颜色
  path!.setAttribute("fill", "#b3fff2");
  path!.setAttribute("filter", "url(#filter3D)");