Leaflet中Marker加载设置SVG

1. SVG加载

1.1. svg 路径设置问题

Leafett 中的 Marker 是以 IMG 标签实现的。在 vue 项目中，如果直接用一下写法：

  img.src = "./svg/404.svg" 

项目运行后，vue是找不到图片的，因为 ./svg/404.svg 路径被写死了！vue打包后的项目目录结构会有不同且vue不会将 404.svg 文件一起打包！

1.2. svg 路径设置

• 如果不对 SVG 进行修改！直接 import 导入即可

import station from "./station.svg"

L.marker(latlng,
         {icon:L.icon({
	            iconUrl: station, // station 为 imgSrc 绝对路径
	            iconSize:[size,size],
	            iconAnchor:[12,12],
	       })});

• 如果要改 SVG 内容，可以通过 XMLHttpRequest 获取 SVG 内容后进行修改！

import station from "./station.svg"

const xhr = new XMLHttpRequest();
 let imgSrc,svgDom 
 xhr.addEventListener('load', () => {
     const resXML = xhr.responseXML;
     svgDom = resXML.documentElement.cloneNode(true);
 });
 xhr.open('GET', station, false);
 xhr.send();  
// 获取 svgDom 子节点 可以根据自己的项目绣球对 svg 内容进行修改
const ani = svgDom.children[0];

• 将 svgDom 修改好后，使用 XMLSerializer 对svg内容进行序列化

const svgStr = new XMLSerializer().serializeToString(svgDom);
const base64 = window.btoa(svgStr);
imgSrc = `data:image/svg+xml;base64,${base64}`

ps:img的src路径设置支持： 1. 绝对路径地址。2. base64编码