Leaflet Marker 加载设置 SVG
- 1. SVG加载
- 1.1. svg 路径设置问题
- 1.2. svg 路径设置
1. SVG加载
1.1. svg 路径设置问题
Leafett 中的 Marker 是以 IMG 标签实现的。在 vue 项目中，如果直接用一下写法：
javascript"> img.src = "./svg/404.svg"
项目运行后，vue是找不到图片的，因为 ./svg/404.svg 路径被写死了！vue打包后的项目目录结构会有不同且vue不会将 404.svg 文件一起打包！
1.2. svg 路径设置
- 如果不对 SVG 进行修改！直接 import 导入即可
javascript">import station from "./station.svg"L.marker(latlng,{icon:L.icon({iconUrl: station, // station 为 imgSrc 绝对路径iconSize:[size,size],iconAnchor:[12,12],})});
- 如果要改 SVG 内容，可以通过 XMLHttpRequest 获取 SVG 内容后进行修改！
javascript">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内容进行序列化
javascript">const svgStr = new XMLSerializer().serializeToString(svgDom);
const base64 = window.btoa(svgStr);
imgSrc = `data:image/svg+xml;base64,${base64}`
ps:img的src路径设置支持： 1. 绝对路径地址。2. base64编码
