【知识分享】如何获取自定义地图中的SVG坐标

收藏

本帖最后由 Bella.Yuan 于 2023-1-5 18:27 编辑

SVG作为一种可缩放的图像文件，被高度应用在地图，自定义地图等领域。在本次wyn中更新的动态路线图中，就使用到了必须以坐标为基点画出行程路径图。但这部分资源不太多，所以为了教大家避坑，一份详细教程奉上。

步骤1：设计自己的svg文件，这个在这里就不详细介。或者，你现在对svg一知半解，不知道如何下手，那么以下方式非常适合你。

这里给大家介绍一款，SVG在线设计器：https://c.runoob.com/more/svgeditor/ ；该工具可以自行设计svg文件，也可以根据导入图片自动生成svg文件，或者是在百度搜索：图片转svg。总而言之，不管svg是怎么来的，我这里要的就是你给我一个svg文件。

步骤2：下载所提供的案例文件。SvgCoordinate.html文件【 SvgCoordinate.html (4.96 KB, 下载次数: 155)

2021-8-23 10:21 上传

点击文件名下载附件】，wyn.svg文件【

wyn.svg (855 Bytes, 下载次数: 250)

2021-8-23 10:21 上传

点击文件名下载附件】，将文件下载好之后，放到同一个文件夹中，用vscoe，或者webstrom打开，运行，这里一定要用服务运行，要不然会提示错误。

运行起来后看到画面如：

image.png913350829.png

可以看到一个小人沿着固定路线在移动。

如果用的是vscode运行，则需要安装

image.png954137573.png

该插件安装完成后，在index.html页面右键选择Open with Live Server

image.png160125426.png

然后就可以运行了。

步骤3：获取移动路径。通过鼠标点击对应的点，在文本框中自动生成坐标地址。可以根据自己点击的坐标路径，

      根据生成的路线预览，可以在图上看到自己所设计的路径图，可以根据调整完成后。将文本框中所有内容保存。
      完成以上步骤，咱们已经可以获取到最新的路径图了。可以在wyn中使用了。

   在路径图组件中，还有另外一个标注图比较重要，就比如上图中的小人，我们如何去做到这一步，如何通过svg画一个icon的图标呢？在这里给大家个详细教程。

介绍个网站:https://www.iconfont.cn/ ，介绍此网站只是为了给大家演示一下如何生成svg的icon图标，版权问题，自行解决。

选中图标，下载，得到svg代码。如下图所示：

image.png720505065.png

将文件中所有svg 标签中 path 表中的d属性的值拷贝出来，多个path的属性值，需要用空格隔开。最后形成一个比较长的字符串。

绑定到组件中的值为：例如：

path://M87.1667 3.8333L80.5.5h-60l-6.6667 3.3333L.5 70.5v130l10 10h80l10 -10v-130zM15.5 190.5l15 -20h40l15 20zm75 -65l-15 5v35l15 15zm-80 0l15 5v35l-15 15zm65 0l15 -5v-40l-15 20zm-50 0l-15 -5v-40l15 20zm 65,-55 -15,25 c -15,-5 -35,-5 -50,0 l -15,-25 c 25,-15 55,-15 80,0 z

完全复制，没有换行。

当然，还有另外一种格式比较方便，可以直接放图片链接，格式如：

'image://http://xxx.xxx.xxx/a/b.png'

关于其中的移动小图标，Echarts中也提供了几个默认内容：

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

可以直接将以上值中的任意一个填入，既可看到对应效果。

为了验证图标正确性：可以在 https://echarts.apache.org/examp ... tml?c=geo-svg-lines 中进行验证，字符内容放在：symbol 字段值中。

至此，咱们在仪表板路线图中需要使用到的两个svg图就搞定了。那么接下来，就可以实现具体效果了。

		自动登录	找回密码
密码			立即注册

[仪表板] 【知识分享】如何获取自定义地图中的SVG坐标

0 个回复