基于高德地图的轨迹绘制与轨迹回放
阅读原文时间:2021年04月21日阅读:1
         load2DMap() {   
            var tableData = this.tableData;  
            var lineArr = this.lineArr;  // 路径数组(二维数组,格式如[ [117.139161, 36.667547], [117.139170, 36.667689]])
            var marker = this.marker;    // 轨迹回放数组

            if(tableData && tableData.length !== 0) {
                var centerArr = [tableData[0].Longitude,tableData[0].Latitude];
            };

            var roadNet = new AMap.TileLayer.RoadNet({  
                opacity: 0.3   
            });
            var map = new AMap.Map("map-container", {
                center: centerArr || [117.139161, 36.667547],
                layers:[
                  new AMap.TileLayer.Satellite(),   // 卫星图层
                  roadNet                           // 路网图层
                ],
                zoom: 17
            });

            /**
              * 绘制路线
              */
            var polyline = new AMap.Polyline({
                path: lineArr,
                strokeColor: "#3366FF", 
                strokeOpacity: 1,
                strokeWeight: 5,
                lineJoin: 'round',
                lineCap: 'round',
                zIndex: 50,
            });
            polyline.setMap(map);

            /**
              * 绘制移动轨迹路线
              */
            var passedPolyline = new AMap.Polyline({
                map: map,
                strokeColor: '#AF5',
                strokeWeight: 6,
            });

            /**
              * 添加用于移动的图标
              */
            marker = new AMap.Marker({
                map: map,
                position: centerArr,
                icon: new AMap.Icon({
                    image: this.$store.state.UrlIP + '/static/dronefly-icon.png',
                    size: new AMap.Size(80,80),
                    imageSize: new AMap.Size(40,36),
                }),
                autoRotation: true,
                angle: -90,
            });
            marker.on('moving', function(e){
                passedPolyline.setPath(e.passedPath);
            });
            marker.moveAlong(lineArr,200);
        },

效果图:

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章