DJ java 航线规划 jeppview航线图

之前使用Echarts来实现飞线图，确实，echarts能够实现飞线图。

（Echarts网站又打不开了，所以截图示意一下）

 但是，如果想对底图有更多的操作，echarts在地图上的功能便显得有点匮乏。

采用webgis平台的话，可以很好的解决这一问题。

因此，选择mapbox作为地图引擎，来实现飞线图。

【mapbox官网案例介绍】

mapbox官网提供了一个案例，通过mapbox与turf.js实现航线图，通过turf生成贝塞尔曲线，来将两点之间的【line】增加弧度，同时增加动画效果。

mapbox官网示例 2d版本

不足：官网示例实现了飞线图，但是，【1】数据填充复杂，当点、线足够多时，需要构建复杂的数据解析函数。【2】样式也不是很好看。

【mapbox + Echarts飞线图】

mapbox可以和Echarts共同使用，作为echarts的底图，来使用echarts的飞线功能，实现目标效果。

笔者之前使用的就是这种方案，但是这个实现之后，拖动地图，会非常卡顿！非常非常卡顿！

这种方法的实现过程是，去github找一下echarts + mapbox 的一个插件，echartsLayer

下载之后，里面会有很多例子，可以参考，其中包括了 mapbox+ echarts飞线，需要更改一下配置才能实现，不过也不是很复杂。

下图为笔者实现的效果。

 【mapbox + AnTv飞线图】

虽然第二种方法已经实现了飞线图，但是吧，最近使用Vue对系统进行重构，想着能不能对这部分进行优化，在拖动、放缩的时候不会出现卡顿的现象。

刚好了解到了Antv这个可视化工具，里面有飞线图这个示例。

实现步骤。

Step 1 ：创建mapbox底图

mapboxgl.accessToken = <your key>;
    const map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
        center: [124.5, 40], // starting position [lng, lat]
        zoom: 2, // starting zoom
    });

Step 2 ：将mapbox地图作为Antv的地图容器

const scene = new L7.Scene({
        id: 'map',
        map: new L7.Mapbox({
            mapInstance: map,
        }),
    });

Step 3 :声明所需数据（飞线数据）

//点数据
const dotData = [
        { // CQ
            "lng": 106.06201171875,
            "lat": 30.164126343161097,
        },
        { // BJ
            "lng": 116.5883553580003,
            "lat": 40.07680509701226,
        }
    ];
//线数据
const LineData = [{ // BJ -> CQ
            lng1: 116.5883553580003,
            lat1: 40.07680509701226,
            lng2: 106.06201171875,
            lat2: 30.164126343161097
        }, {
            lng1: 116.5883553580003,
            lat1: 40.07680509701226,
            lng2: 121.26708984374999,
            lat2: 31.259769987394286
        }]

Step 4：声明数据格式

const jsonParserOotion = {
        parser: {
            type: 'json',
            x: 'lng',
            y: 'lat'
        }
    };

const jsonLineParserOotion = {
        parser: {
            type: 'json',
            x: 'lng1',
            y: 'lat1',
            x1: 'lng2',
            y1: 'lat2'
        }
    };

Step 4：AnTv调用数据，生成飞线

//生成点   
 const dotPoint = new L7.PointLayer({zIndex: 2})
        .source(dotData, jsonParserOotion)
        .shape('circle')
        .animate(true)
        .size(20)
        .color( '#E86452');
    scene.addLayer(dotPoint);

// 生成飞线
const layerPlaneLine = new L7.LineLayer({blend: 'normal'})
        .source(LineData, jsonLineParserOotion)
        .size(3)
        .shape('arc')
        .color('#fa2b32')
        .animate({
            interval: 1, // 间隔
            duration: 3, // 持续时间，延时
            trailLength: 1 // 流线长度
        })
        .style({
            opacity: 0.7,
            thetaOffset: -0.5
        });

实现效果预览（线条弧度、颜色、粗细、速度均可修改）

细节可以去官网查看文档，会对参数、函数进行介绍，便于自己个性化修改。