如何快速制作百度地图可视化？（教你获取ak与地图初始化以及地图飞线层的实现,有demo）

1.首先进入百度地图开发平台（百度地图开放平台 | 百度地图API SDK | 地图开发）注册或登录你的账号：

2.登录注册成功之后进入控制台，点击应用管理下面我的应用后点击创建应用：

 3.进入之后取一个你的应用名称以及选取你想要的应用类型，这里我选择的是浏览器端的，当然你们也可以根据自己的选择来设置：

 4.如果在本地应用的话，下面的Referer白名单就填写一个*号（当我们的项目真正发布的时候才在Referer白名单中填写我们需要的域名）：

 5.提交成功后，就能得到我们想要访问的ak密钥，这个很重要后面会用到:

准备工作完成后，开始正式进入百度地图可视化的操作：

1.打开MapVGL官网MapVGL | 快速入门，选择你想要的地图demo, 这里我选择的是飞线图层：

 2.点击左上角的动手试试，把里面的源代码复制粘贴到VScode里：

 3.在script标签里把我们不需要的删掉，留下以下代码：

<script src="https://api.map.baidu.com/api?v=3.0&type=webgl&ak=您的密钥"></script>
<script src="//mapv.baidu.com/build/mapv.min.js"></script>
<script src="https://unpkg.com/mapvgl@1.0.0-beta.168/dist/mapvgl.min.js"></script>
<script src="https://unpkg.com/mapvgl@1.0.0-beta.168/dist/mapvgl.threelayers.min.js"></script>

 4.把ak="您的密钥"换成之前我们在前面获得的ak密钥

<script src="https://api.map.baidu.com/api?v=3.0&type=webgl&ak=你的密钥"></script>

 5.把body下面的script里的内容删掉

 6.开始初始化我们的地图：

          //地图初始化
        var map = new BMapGL.Map("map_container")
        //设置地图中心点的位置以及地图缩放比例
        //BMapGL.Point(113, 23) 中心点在北京，113和23是北京的经纬度 地图放大8.5
        map.centerAndZoom(new BMapGL.Point(113, 23),8.5);
        //map.setTilt地图的倾斜角度
        map.setTilt(0)
        // map.setHeading(0)地图的旋转角度为0
        map.setHeading(0)

7.完成后如果VScode里有Live Server这个插件的就可以直接在本地上运行了，如果没有的话记得安装一下哦~，我先默认没安装

 8.安装好后右键点击Open with Live Server在本地运行结果

 9.结果如下：

 10.添加飞线如下：

            //构造数据 给飞线设置起点和终点
        var startPoint = mapv.utilCityCenter.getCenterByCityName('广州');
        var endPoint = mapv.utilCityCenter.getCenterByCityName('福州');
        console.log(startPoint,endPoint)
           // 生成曲线
        var curve = new mapvgl.BezierCurve({
            start: [startPoint.lng, startPoint.lat],
            end: [endPoint.lng, endPoint.lat]
    });

         //获取贝塞尔曲线数据
        const curveData = curve.getPoints()
        console.log(curveData);

        var data=[]
        //生成数据
        data.push({
        geometry:{
            type:'LineString',
            coordinates:curveData
        },
    })
        //图层管理容器
        var view = new mapvgl.View({map: map});

        //创建飞线图层
        var layer = new mapvgl.FlyLineLayer({
        color: 'rgba(50, 50, 200, 1)',
        textureColor: 'rgba(50, 50, 200, 1)',
        textureWidth: 10,
        textureLength: 30,
    });
        view.addLayer(layer)
        layer.setData(data)

11.运行结果如下：飞线从广州到福州,成功运行！