huiyan-fe / BMapGLLib

百度地图JSAPI GL版JavaScript开源工具库
MIT License
346 stars 126 forks source link

BMapGLLib.TrackAnimation 绘制地图轨迹的时候,如果有靠近的点和比较远的点,靠近的点的线会偏移到海外去 #7

Closed zenglincient closed 3 years ago

zenglincient commented 3 years ago

问题

BMapGLLib.TrackAnimation 绘制地图轨迹的时候,如果有靠近的点和比较远的点,靠近的点的线会偏移到海外去

直接上demo代码(接入api的链接需要自行加入key)

<!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>
    <!--  下面link需要加上自己的key  -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
</head>

<body>
    <div style="width: 800px; height: 800px;" id="container"></div>

    <script>
        var map = new BMapGL.Map("container");
        // 创建地图实例 

       // 第二个和第三个点很接近
        const p = [{
            lat: 40.87629,
            lng: 116.43897
        }, {
            lat: 39.87621,
            lng: 116.43887
        }, {
            lat: 39.87619,
            lng: 116.43913
        }]

        var point = new BMapGL.Point(116.404, 39.915);
        // 创建点坐标 
        map.centerAndZoom(point, 15);

        const listP = []

        p.forEach((item) => {
            listP.push(new BMapGL.Point(item.lng, item.lat))
        })

        const pl = new BMapGL.Polyline(listP, {
            strokeColor: '#1890ff',
            enableClicking: true,
        })
        const trackAni = new BMapGLLib.TrackAnimation(map, pl, {
            overallView: true, // 动画完成后自动调整视野到总览
            tilt: 30, // 轨迹播放的角度,默认为55
            duration: 400, // 动画持续时长,默认为10000,单位ms
            delay: 300, // 动画开始的延迟,默认0,单位ms
        })
        setTimeout(() => {
            trackAni.start()
        }, 3000)
    </script>
</body>

</html>
zenglincient commented 3 years ago

demo截图

FloraCat526 commented 3 years ago

该问题已修复,库引用地址更新为://mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js