master

分支 (1)

管理

管理

master

baidu-map-visualization
/
百度地图飞线动画.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map_container {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
</head>

<body>
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=4aW5DfpefWI3ozGKjsiTqs3R9yYyupmb"></script>
    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
    <script src="https://mapv.baidu.com/build/mapv.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
    <script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
    <div id="map_container"></div>
    <script>
        var map = initBmap()
        var data = initData()
        setData(data, map)
        // 初始化百度地图
        function initBmap() {
            var cityCenter = mapv.utilCityCenter.getCenterByCityName('广州')
            var map = new initMap({
                tilt: 80,
                heading: 0,
                center: [cityCenter.lng, cityCenter.lat],
                zoom: 7,
                style: purpleStyle
            })
            return map
        }
        // 准备数据源
        function initData() {
            var data = []
            // 需要提供起点的坐标 和 终点的坐标
            // 生成贝塞尔曲线坐标集
            // 1. 实例化贝塞尔曲线对象
            var curve = new mapvgl.BezierCurve()
            var citys = [
                '北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
                '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
                '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
            ]
            var randomCount = 100; // 模拟的飞线的数量
            while (randomCount--) {
                // 2. 设置起点和终点坐标
                var start = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)])
                var end = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)])
                curve.setOptions({
                    start: [start.lng, start.lat],
                    end: [end.lng, end.lat]
                })
                // 3. 生成贝塞尔曲线坐标集
                var curveData = curve.getPoints()
                data.push({
                    geometry: {
                        type: 'LineString',
                        coordinates: curveData
                    },
                    properties: {
                        count: Math.random()
                    }
                })
            }
            console.log(data)
            return data
        }

        // 绘制数据源
        function setData(data, map) {
            // 1. 初始化图层
            var view = new mapvgl.View({ map })
            // 2. 初始化飞线对象
            var flyLine = new mapvgl.FlyLineLayer({
                style: 'chaos',
                step: 0.3,
                color: 'rgba(33, 242, 214, 0.3)',
                textureWidth: 20,
                textureLength: 10,
                textureColor: function (data) {
                    return data.properties.count > 0.5 ? '#ff0000' : '#56ccdd';
                }
            })
            // 3. 将飞线对象添加到图层中
            view.addLayer(flyLine)
            // 4. 将飞线对象与数据源进行绑定
            flyLine.setData(data)
        }
    </script>
</body>

</html>