openlayers6 使用svg格式图片作为Icon标记

产品今天跟我说需要替换在地图上展示的图标，发给我的是svg格式，原本用的是png格式的

var iconStyle = new Style({image: new Icon({src: require("@/assets/img/event.png"),imgSize: [200, 200],scale: 0.175,anchor: [0.5, 0.75],}),
});

将svg格式的图片拖进项目，修改对应的图片路径后，发现并没有生效

问了同事，说之前也有进行尝试但都没有成功，查了好久的资料，终于搞出来了

可行方法（推荐）：

直接修改路径名，在编辑器内点开svg图片代码，将xlink:href="data:img/png;base64,...，改为xlink:href="data:image/png;base64,...

var iconStyle = new Style({image: new Icon({src:require("@/assets/img/event.svg"),size:[40, 46],// 和图片大小保持一致  “ width="40px" height="46px" ”scale: 0.75,// 控制图标大小}),
});

也可行方法（不推荐）：

var iconStyle = new Style({image: new Icon({src: `data:image/svg+xml;base64,`+ window.btoa('<?xml version="1.0"?>' + `<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="40px" height="46px"><image  x="0px" y="0px" width="40px" height="46px"  xlink:href="data:image/png;base64,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" /></svg>`), // window.btoa()方法用于创建一个 base-64 编码的字符串size:[40, 46],// 和图片大小保持一致  “ width="40px" height="46px" ”scale: 0.75, // 控制图标大小}),
});

注：
1.<svg ...>...</svg>的内容从哪儿来？
在编辑器里点开要展示的svg图片文件，复制粘贴（存在可优化空间复制粘贴有点呆明天再想）

2.window.btoa()方法的参数，在svg代码之前记得加上'<?xml version="1.0"?>'，否则图片会显示失败

3.如果图片在地图上展示不出来，检查xlink:href="data:image/png;base64,...，而不是xlink:href="data:img/png;base64,...

openlayers6 使用svg格式图片作为Icon标记相关推荐

element适配svg格式图片
SVG格式图片的配置名词解释: svg是可缩放矢量图形,顾名思义就是任意改变其大小也不会变形,基于可扩展标记语言(xml),他严格遵守XML语法,并用文本格式的描述性语言来描述图像内容.用户可以直接 ...
QT5开发及实例学习之十八显示Qt5 SVG格式图片
SVG 的英文全称是 Scalable Vector Graphics,即可缩放的矢量图形.它是由万维网络联盟 ( World Wide Web Consortium, W3C ) 在 2000 ...
Android使用svg格式图片，并改变图片颜色
1.在iconfont网站上下载svg格式图片,iconfont网站地址:iconfont-阿里巴巴矢量图标库,登录后下载 2.Android studio 在drawable文件夹右击,选择New- ...
cad转图片，cad图纸该如何转换成svg格式图片呢？
CAD转SVG格式图片非常实用方便,优点是可以让用户直接用代码来描绘图像,而且用任何文字处理工具都可以打开SVG图像.CAD制图工作中,我们需要把CAD转换成图片.cad图纸该如何转换成svg格 ...
svg上传服务器无法显示,让WordPress支持上传SVG格式图片并显示在媒体库中的方法...
让WordPress支持上传SVG格式图片并显示在媒体库中的方法发布时间:2020-12-11 14:18:12 来源:亿速云阅读:167 作者:小新这篇文章将为大家详细讲解有关让WordPre ...
01.使用.svg格式图片生成app图标详细步骤和注意事项
Android8.0之后引入了矢量图标,可以支持动态特效,在不同安卓版本上可以相对应的显示圆形.方形圆角,方形图标需要两张.svg格式的图片,一张前景图,一张背景图,分别命名为ic_launcher ...
一键完成：批量转pdf图片为png、svg格式图片
记得以前使用texlive2020时,只要在standalone的选项里面使用convert选项,再加一些设置,就能自动生成高清png 格式的图片了. 自从升级为exlive2022后,才发现再也不能 ...
项目引入svg格式图片无效
react中引入svg格式图片无效解决办法 import LogoSvg from '../../../public/logo-ant.svg';<img src={LogoSvg} alt= ...
学习QT之显示SVG格式图片
SVG的英文全称是Scalable Vector Graphics,即可缩放的矢量图形.它是有万维网联盟在2000年8月制定的一种新的二维矢量图形格式,也是规范中的网格矢量图形标准,是一个开发的图形标 ...

openlayers6 使用svg格式图片作为Icon标记

可行方法（推荐）：

也可行方法（不推荐）：

openlayers6 使用svg格式图片作为Icon标记相关推荐

最新文章

热门文章