05-百度地图案例改进

实现多个城市的飞线随机生成

<!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);

        var citys = ['北京', '上海', '深圳', '广州', '福州'];
        var count = 20;//飞线数量
        var data = [];
        while (count--){
            //二、构造数据
            //(1)获取经纬度
            var startPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);//通过城市名称获取城市的经纬度
            var endPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);

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

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

            //（4）把曲线的数据丢到data中
            data.push({
                geometry:{
                    type:'LineString', //类型是线,
                    coordinates: curveData  //把详细的曲线数据（贝塞尔曲线坐标集）进行赋值
                },
                properties:{
                    color:'rgb(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)})' //设置我们随机生成的颜色
                }
            })
        }


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

        //（6）根据数据生成飞线图层,飞线的创建方式可以直接从MapVGL上复制
        var layer = new mapvgl.FlyLineLayer({
            /*
            对显示的线的一些配置
             */
            style: 'chaos',
            step: 0.3,
            color: 'rgba(50, 50, 200, 1)',   //线的颜色
            textureColor: function (data) {
                return data.properties.color
            },
            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:45  不是孩子了  阅读(149)  评论(0)    收藏  举报