Echarts3.0中的地图实例（模拟迁徙）中会动的小飞机资源可以更换成其他的吗？

Question

我想把小飞机换成其他资源，比如卡车。但是官方给的代码只是：

var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

只是给了一个path，难道这是定义在了echart.js中的吗，不能改成其他的图片吗？怎么才能更改呢？

Answer 1

登录 网址https://www.iconfont.cn/ ，下载你想要的的矢量图svg文件，里面的<path d=‘XXX’>XXX就是矢量图路径，应用到迁徙图中path=' path:// XXX'，就可以引用不一样的图标了

Answer 2

这个就是了

Answer 3

var planePath = 'path://M1136.047896 339.882267C1112.706905 143.149344 1017.345943-0.2756 900.268988 0.0004L358.6862 1.290399c-117.106954 0.276-211.762917 144.067944-234.275909 340.954867C42.146324 391.197247-0.27366 490.974208 0.00134 606.394163c0.184 85.699967 24.016991 162.533937 69.902973 216.394916l0.46 191.364925 212.804916-0.49-0.276-112.077956 697.337728-1.687 0.276 112.076957 212.805917-0.521-0.46-191.364925c45.639982-54.014979 69.134973-131.001949 68.919973-216.700916-0.245-115.205955-43.185983-214.890916-125.725951-263.506897zM358.9312 74.320371l541.583788-1.289c75.392971-0.184 141.491945 101.98596 166.489935 240.563907-11.532995-2.299999-23.648991-3.709999-36.193986-4.446999 0-0.307 0.338-0.92 0.062-0.889999-101.89396 0.246-70.055973 0.154-141.799944 0.337999s-46.559982 0.092-118.118954 0.276l-523.669796 1.257c-19.016993 0.031-36.990986 2.085999-53.983979 5.551998C217.807255 176.920331 283.538229 74.473371 358.9312 74.320371zM218.298255 702.030126c-46.590982 0.092-84.317967-42.787983-84.440967-95.973963-0.123-53.093979 37.419985-96.249962 83.980967-96.372962 46.376982-0.092 84.103967 42.879983 84.256967 95.974962 0.123 53.277979-37.389985 96.249962-83.796967 96.371963z m656.972743-18.126993l-488.365809 0.583c-76.12997 0.184-77.78597-131.124949-0.307-131.308949l488.366809-1.166c71.219972-0.184 71.527972 131.707949 0.306 131.891949z m168.667934 16.133994c-46.468982 0.122-84.195967-42.757983-84.318967-95.943963-0.122-53.093979 37.419985-96.279962 83.858967-96.372962 46.499982-0.122 84.256967 42.849983 84.379967 95.973962 0.03 53.278979-37.450985 96.280962-83.919967 96.342963z';

Answer 4

问题已经解决，这个是svg的路径格式，SVG不知道你听过没有，但是应该听过canvas，可以用某些工具进行绘画导出为svg格式，然后在文件中可以找打path的路径 例如:path="M1705.64,......",把它粘贴到你的路径即可，但是我发现描绘多个图形时，路径有多个，我就不知道怎么整合到echarts中了。

Answer 5

你好，这个问题解决了吗

Answer 6

可以啊。。。矢量图

Answer 7

可以的。我是这么解决的。

我使用SVGDesign（百度可以搜到），自己设计需要的图形，然后另存为svg格式，用文本编辑器打开，找到以下片段，例如：

<path transform="matrix(1.0000,0.0000,0.0000,1.0000,142.5000,321.0000)" d="L80.0625,-119.0000L-91.5000,72.0000L-22.8750,119.0000L91.5000,-87.0000L80.0625,-118.0000L80.0625,-117.0000L80.0625,-119.0000" style="fill-opacity:1.0000;fill:#000000;stroke-opacity:1.0000;stroke-width:1.0469;stroke:#000000 "/>
<path transform="matrix(0.9987,0.0513,0.0000,1.0013,364.0849,330.5044)" d="L-95.2103,-95.4844L24.7231,109.1251L76.2734,71.3510L95.2103,55.6118L-66.8050,-109.1251L-94.1582,-94.4352L-95.2103,-94.4352L-95.2103,-95.4844" style="fill-opacity:1.0000;fill:#000000;stroke-opacity:1.0000;stroke-width:1.0776;stroke:#000000 "/>
将<path>中的d="...",复制粘贴到源代码 path://后面即可替换为自己的图形了。

若果设计的图形复杂的话，会有多个<path>标签；在代码中可以建立多个 var img1='path://..';

拼接图形：img=img1+img2+。。。