如何将JavaScript绘制的自定义SVG绘制到Leaflet等地图并适配缩放

核心思路 #

你需要的随地图缩放同步改变大小的标记效果，本质是将自定义SVG绑定到固定的地理边界上，地图缩放时叠加层会自动适配边界大小，无需手动计算缩放比例。主流地图框架都提供了对应图层能力：

• Leaflet使用L.SVGOverlay
• Google Maps使用GroundOverlay
• 微软地图使用GroundOverlay类

第一步：改造SVG生成代码 #

你原有代码是固定操作id为icon的SVG元素，要支持多实例生成，修改为动态创建SVG并返回的函数：

// 生成自定义SVG标记
function createCustomSvg() {
  const svgNs = "http://www.w3.org/2000/svg";
  const svg = document.createElementNS(svgNs, "svg");
  svg.setAttribute("viewBox", "-100 -100 200 200");
  // 内置样式避免全局污染
  const style = document.createElementNS(svgNs, "style");
  style.textContent = `
    circle {
      fill: none;
      stroke: black;
      stroke-width: 14;
    }
  `;
  svg.appendChild(style);

  // Add a "line" to the SVG, with a given azimuth, radius and length
  function makeLine(azimuth, radius, length) {
    const circumference = radius * 2 * Math.PI;
    const line = document.createElementNS(svg.namespaceURI, "circle");
    line.setAttribute("r", radius);
    line.setAttribute("stroke-dasharray", length + ' ' + circumference);
    line.setAttribute("transform", "rotate(" + azimuth + ")");
    svg.appendChild(line);
  }

  const LEVEL1 = 93,
      LEVEL2 = 65,
      LEVEL3 = 37,
      LEVEL4 = 9;

  makeLine(0,   LEVEL4, 15);
  makeLine(120, LEVEL4, 15);
  makeLine(240, LEVEL4, 15);
  makeLine(310, LEVEL3, 50);
  makeLine(180, LEVEL3, 55);
  makeLine(290, LEVEL2, 95);
  makeLine(300, LEVEL1, 110);
  
  return svg;
}

第二步：Leaflet中添加SVG标记 #

用L.SVGOverlay将SVG绑定到指定地理范围，这里示例将标记放在经纬度[31.2304, 121.4737]的位置，标记对应实际地理半径为100米，你可以根据需求调整半径大小：

// 初始化Leaflet地图 示例
const map = L.map('map').setView([31.2304, 121.4737], 13);
L.tileLayer('你的瓦片服务地址', {
  attribution: '地图版权信息'
}).addTo(map);

// 工具函数：根据中心点经纬度、半径（米）计算边界框
function getBoundsFromCenter(centerLat, centerLng, radiusM) {
  const latOffset = (radiusM / 111319.9); // 纬度每度约111319.9米
  const lngOffset = (radiusM / (111319.9 * Math.cos(centerLat * Math.PI / 180)));
  return [
    [centerLat - latOffset, centerLng - lngOffset], // 西南角
    [centerLat + latOffset, centerLng + lngOffset]  // 东北角
  ];
}

// 生成SVG
const customSvg = createCustomSvg();
// 计算标记的地理边界，这里设置标记实际半径为100米，可自行调整
const bounds = getBoundsFromCenter(31.2304, 121.4737, 100);
// 添加SVG叠加层到地图
L.svgOverlay(customSvg, bounds, {
  interactive: true // 如果需要监听点击事件就开启，不需要可以关闭
}).addTo(map);

添加完成后，地图放大缩小的时候，SVG标记会自动跟着缩放，符合你的需求。如果要加多个标记，循环调用上面的生成、添加逻辑即可，每个标记对应不同的中心点坐标。

其他主流地图适配逻辑 #

所有主流地图的实现逻辑完全一致，只是API名称不同：

• Google Maps：将SVG转换为Blob URL或者Data URL，调用google.maps.GroundOverlay绑定到对应边界即可
• 微软Bing地图：使用Microsoft.Maps.GroundOverlay类，同样传入SVG资源和地理边界

可选优化 #

如果需要标记始终保持固定像素大小，不随地图缩放改变，只需要将SVG转为L.Icon，作为普通marker添加即可，不符合你当前需求，仅作为扩展参考。

内容的提问来源于stack exchange，提问作者fdkgfosfskjdlsjdlkfsf