百度地图开发入门（5）：飞线动画示例_百度地图飞线-优快云博客

本文介绍了如何使用百度地图和mapvgl库创建飞线动画来展示数据流向。首先展示了绘制单条飞线的方法，然后通过增加多条线来呈现更复杂的数据流动。接着，移植了mapv的点汇聚线图到mapvgl，包括静态线和移动点的实现，并探讨了边绑定算法在减少图混乱度上的应用。文章提供了完整的代码示例，帮助读者理解并实践飞线动画的创建过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原创不易~看完若对你有所帮助，记得点一个赞哈，这就是对我最大的支持了！

讲解另一种常见应用-飞线动画，主要用于展示数据流向

https://lbsyun.baidu.com/solutions/mapvdata

1. 绘制单条飞线

这里曲线的绘制可以借助百度的曲线生成器：https://lbsyun.baidu.com/solutions/mapvdata

<body>

    <div id="map_container"></div>

    <script>

        const map = initBMap();

        const data = initData();

        setData(data, map);



        // 初始化百度地图

        function initBMap() {
     

            // 引入的common库所作的处理

            // mapv提供了api，根据名称获取坐标

            const cityCenter = mapv.utilCityCenter.getCenterByCityName('上海');

            const map = initMap({
     

                center: [cityCenter.lng, cityCenter.lat],

                zoom: 6,

                style: purpleStyle,

                tilt: 30

            })

            return map;



        }





        // 准备数据源

        function initData() {
     

            let data = [];

            // 生成贝塞尔曲线坐标集 - 关键要素

            // 1. 实例化贝塞尔曲线对象

            const curve = new mapvgl.BezierCurve();

            // 2. 设置起始和终点坐标

            const start = mapv.utilCityCenter.getCenterByCityName('上海');

            const end = mapv.utilCityCenter.getCenterByCityName('北京');

            curve.setOptions({
     

                start:[start.lng, start.lat],

                end:[end.lng, end.lat]

            });

            // 3. 生成贝塞尔曲线坐标集

            const curveData = curve.getPoints();

            data.push({
     

                geometry:{
     

                    type: 'LineString',

                    coordinates: curveData

                }

            })

            return data;

        }





        // 绘制数据源 

        function setData(data, map) {
     

           const view = new mapvgl.View({
     map});

           // 初始化飞线对象并添加到图层中

            const flyLine = new mapvgl.FlyLineLayer({
     

                // 更多配置项可以看文档

                color: 'red',

                textureColor: 'blue',

                textureWidth: 20,

                textureLength: 80,

                style: 'chaos',

                step: 0.5

            });

            view.addLayer(flyLine);

            flyLine.setData(data);



        }

    </script>

</body>

// 绘制数据源 

        function setData(data, map) {
   

           const view = new mapvgl.View({
   map});

           // 初始化飞线对象并添加到图层中

            const flyLine = new mapvgl.FlyLineLayer({
   

                // 更多配置项可以看文档

                color: 'rgba(33,242,214,0.3)',

                textureColor: '#ff0000',

                textureWidth: 20,

                textureLength