echarts飞机航线图修改飞机的样式

echarts飞机航线图修改飞机的样式

在项目开发中使用到了Echarts的飞机航线图,但默认的动画图标是飞机,因为地图上使用,不能固定大小,只能使用矢量图,官方举例:
在这里插入图片描述
因为业务,我想把小飞机换成其救护车的图标。官方举例代码只是:

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';

//飞机矢量图动画配置项
{
     name: item[0] + ' Top10',
       type: 'lines',
       coordinateSystem: 'leaflet',
       zlevel: 2,
       symbol: ['none', 'arrow'],
       symbolSize: 10,
       effect: {
           show: true,
           period: 6,
           trailLength: 0,
           symbol: planePath,
           symbolSize: 15
       },
       lineStyle: {
           normal: {
               color: color[i],
               width: 1,
               opacity: 0.6,
               curveness: 0.2
           }
}

查阅百度,整理加自己测试, 需要更换矢量图路径,解决办法如下

  1. 设计图片样式保存为 svg 格式
    在这里插入图片描述
  2. 用文本编辑器打开图片
    内容为xml格式
    在这里插入图片描述
    格式化文档
    在这里插入图片描述
    中的d="…" 中的内容复制出来
  3. 替换内容
    用将复制的内容替换path://后的内容
    在这里插入图片描述
  4. 如果图片复杂,会有有多个path
    在代码中可以建立多个 var img1=‘path://…’;
    拼接图形:img=img1+img2+。。。
    在这里插入图片描述
    到此飞机样式已被替换为设计的图片样式
    在这里插入图片描述
  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值