这是项目里面的一个小模块,要实现的原始需求:地图上A城市的A君 向B城市的B君借贷钱数n。现在要求在地图上显示这种借贷效果。 技术:实现web上面渲染地图、在地图上定位两个(或多个)省份,然后在两省之间画弧线,UI要求弧线有渐变效果并且要有标记物来回运动。
这里没有用百度的Echarts库,而是用svg实现**地图的渲染,然后挂载一个等宽高的svg。再在svg上定位每个省的坐标。 坐标出来后,通过两点算出圆弧的半径,用svg path 描绘弧线。在用animateMotion实现标志位的滚动,用css3 的动画过度。