使用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)");