04-百度地图案例学习

（1）打开百度地图开放平台 ---> 控制台 ---> 创建应用 ---> 获得我们的AK
（2）打开MapVGL，选择“飞线图层”进行案例学习。
（3）点击动手试试，复制代码，对代码进行改造
（4）编写代码：实现从广州到福州的飞线

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--
        百度地图案例学习
    -->
    <meta charset="utf-8">
    <title>MapVGL</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map_container {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
    <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
    <script src="//mapv.baidu.com/build/mapv.min.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.131/dist/mapvgl.min.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.131/dist/mapvgl.threelayers.min.js"></script>
</head>
<body>
    <!--存放地图的容器-->
    <div id="map_container"></div>

    <script>
        //一、我们上面已经导入了地图，接下来我们对其进行初始化
        var map = new BMapGL.Map('map_container'); //在这个容器中进行实例化
        //(1)地图初始化的中心点
        map.centerAndZoom(new BMapGL.Point(113,23),8.5);//广州的经纬度是113，23，我们设置中心点为广州,同时设置地图的缩放比例为8.5
        //(2)设置地图的倾斜角为30°
        map.setTilt(30);
        //(3)设置旋转角度
        map.setHeading(0);

        //二、构造数据
        //(1)获取经纬度
        var startPoint = mapv.utilCityCenter.getCenterByCityName('广州');//通过城市名称获取城市的经纬度
        var endPoint = mapv.utilCityCenter.getCenterByCityName('福州');

        //（2）通过3d曲线生成器，生成两个地点之间的曲线
        var curve = new mapvgl.BezierCurve({
            start: [startPoint.lng, startPoint.lat],
            end: [endPoint.lng, endPoint.lat]
        });

        //(3)获取生成曲线的坐标集，生成贝塞尔曲线数据
        const curveData = curve.getPoints();

        //（4）把曲线的数据丢到data中
        var data = []

        data.push({
            geometry:{
                type:'LineString', //类型是线,
                coordinates: curveData  //把详细的曲线数据（贝塞尔曲线坐标集）进行赋值
            }
        })

        //（5）使用图层管理容器，将图层添加进来（图层管理容器也可以从MapVGL上获取）
        var view = new mapvgl.View({map: map});//将我们刚才创建的地图传进来

        //（6）根据数据生成飞线图层,飞线的创建方式可以直接从MapVGL上复制
        var layer = new mapvgl.FlyLineLayer({
            /*
            对显示的线的一些配置
             */
            color: 'rgba(50, 50, 200, 1)',   //线的颜色
            textureColor: 'rgba(50, 50, 200, 1)',
            textureWidth: 10,
            textureLength: 30,
            //上面我们已经设置了data，这里不需要再设置

            // data: [{
            //     geometry: {
            //         type: 'LineString',
            //         coordinates: [
            //             [116.394191, 39.91334],
            //             [116.417259, 39.913672]
            //         ]
            //     }
            // }]
        });
        view.addLayer(layer);//将图层添加到图层管理容器中
        layer.setData(data);//设置数据

    </script>
</body>
</html>
posted @ 2021-11-06 18:32  不是孩子了  阅读(93)  评论(0)    收藏  举报