百度地图GL javascript API 如何绘制流动箭头的线？

Question

在百度地图javascript API中绘制线图层，如下图所示

https://lbsyun.baidu.com/jsdemo.htm#strokeLineLayer

如何使蓝色线中的箭头像水流一样流动？

Answer 1

可以使用百度地图JavaScript API中的BMapLib.LuShu类来实现流动箭头线的效果。

首先，你需要引入百度地图JavaScript API和LuShu库：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YOUR_APP_KEY"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>

然后，创建一个BMap.Point数组来表示箭头线的坐标点：

var points = [new BMap.Point(116.403981, 39.915101), new BMap.Point(116.405983, 39.915454), new BMap.Point(116.406957, 39.91568), ...]; // 坐标点数组，根据需要添加更多的坐标点

接下来，创建一个地图实例，并设置流动箭头线的样式：

var map = new BMap.Map("map"); // 创建地图实例map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); // 设置地图中心点和缩放级别var polyline = new BMap.Polyline(points, {strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5}); // 创建箭头线map.addOverlay(polyline); // 将箭头线添加到地图上

最后，创建LuShu实例，并设置流动箭头的速度和动画效果：

var lushu = new BMapLib.LuShu(map, points, {defaultContent: "", speed: 2000}); // 创建LuShu实例，设置速度为2秒/个坐标点lushu.start(); // 开始流动箭头线的动画效果

通过上述步骤，你就可以在百度地图上绘制一个流动箭头线，并使箭头像水流一样流动了。

请注意，以上代码中的YOUR_APP_KEY需要替换为你自己的百度地图API密钥。