js怎么实现模拟管道流动

js 实现模拟管道流动 有没有什么插件 要在高德地图上边实现

img

类似上边这种效果 要一直流动 要在高德题图上实现
地图上边不行的话 也可以在在平面上实现
管道位置 方向都是 随机的

供参考,望采纳:
可以使用高德地图的Marker对象,使用Marker的setAnimation()方法控制Marker的移动。为了模拟流动,您需要使用JavaScript代码实现移动效果,并计算管道的方向和位置。具体步骤如下:
1、加载高德地图JavaScript API,并初始化地图。

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图Key"></script>
<script type="text/javascript">
var map = new AMap.Map('mapContainer', {
    zoom: 11,
    center: [116.397428, 39.90923]
});
</script>

2、创建Marker,并设置其位置和方向。

var marker = new AMap.Marker({
    position: [116.397428, 39.90923],
    icon: '图片地址',
    angle: 0,
    offset: new AMap.Pixel(-16, -40),
    autoRotation: true
});
map.add(marker);

3、在JavaScript代码中实现Marker的移动。

setInterval(function() {
    var lnglat = marker.getPosition();
    // 计算管道的新位置
    lnglat = [lnglat.getLng() + 0.1, lnglat.getLat() + 0.1];
    marker.setPosition(lnglat);
}, 100);


三帧循环动画

不知道你这个问题是否已经解决, 如果还没有解决的话:

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^