百度地图路书 使用 轨迹全局观看

       //引入百度  api   ak是你百度控制台申请的key
      http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init
    // 引入百度路书 api
      http://api.map.baidu.com/library/LuShu/gl/src/LuShu_min.js
    var styleOptions = {
                 strokeColor: '#5E87DB', // 边线颜色
                  fillColor: '#5E87DB', // 填充颜色。当参数为空时,圆形没有填充颜色
                  strokeWeight: 2, // 边线宽度,以像素为单位
                 strokeOpacity: 1, // 边线透明度,取值范围0-1
                 fillOpacity: 0.1 // 填充透明度,取值范围0-1
     };
    TrackAnimation(type, data,n) {  
        let that=this
        let styleOption = Object.assign({}, styleOptions);
        let icon=null
        // styleOption.strokeStyle = "dashed"
        styleOption.strokeColor = "#2D72DB"
        styleOption.strokeWeight = 4
        var point = [];
    
        for (var i = 0; i < data.length; i++) {
            if(data[i].lon&&data[i].lat){
                point.push(new BMapGL.Point(data[i].lon, data[i].lat));
                    
            }
            
        }
        if(type=='人员轨迹'){
            icon=require('../../../../assets/img/map/14814.png')
        }else{
            icon=require('../../../../assets/img/map/14813.png')
        }
    var polyline = new BMapGL.Polyline(point,styleOption);
        this.map.addOverlay(polyline);
        this.polyline=polyline
        this.map.setViewport(point)  //  自动调整轨迹视野
            // 路书     
            let lushu = new BMapGLLib.LuShu(this.map, polyline.getPath(), {
                geodesic: true,
                autoCenter: false,//自动调整路线视野
                icon: new BMapGL.Icon(icon, new BMapGL.Size(30, 30), { anchor: new BMapGL.Size(15, 15) }),
                speed: n,    //  速度
                enableRotation: false    //   图标随着道路走向旋转
            });
            console.log(lushu)
            
            this.lushu=lushu
            setTimeout(function(){
                    that.mapZoomOut()  
                    lushu.stop()
                lushu.start()
             
            },500)
              
    },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容