补充

无关风月

2025-01-14 0193e3a62209bd500b9b5184bffc331e19f3a388

补充

 ManagementOKTravel/guns-admin/src/main/webapp/WEB-INF/view/system/tOrderTaxi/tOrderTaxi_edit.html

@@ -1,17 +1,49 @@
@layout("/common/_container.html"){
<style type="text/css">
    html, body, #container {
    body,
    html {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    #allmap {
        height: 100%;
        width: 100%;
    }

    .input-card .btn{
        margin-right: 1.2rem;
        width: 9rem;
    ul li {
        list-style: none;
    }

    .input-card .btn:last-child{
        margin-right: 0;
    .btn-wrap {
        z-index: 999;
        position: fixed;
        bottom: 3.5rem;
        margin-left: 3rem;
        padding: 1rem 1rem;
        border-radius: .25rem;
        background-color: #fff;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }

    .btn {
        width: 75px;
        height: 30px;
        float: left;
        background-color: #fff;
        color: rgba(27, 142, 236, 1);
        font-size: 14px;
        border: 1px solid rgba(27, 142, 236, 1);
        border-radius: 5px;
        margin: 0 5px;
        text-align: center;
        line-height: 30px;
    }

    .btn:hover {
        background-color: rgba(27, 142, 236, 0.8);
        color: #fff;
    }
</style>
<div class="ibox float-e-margins">
@@ -76,7 +108,7 @@
            </div>
            <div class="row">
                <div class="col-sm-10">
                    <div class="form-horizontal" id="container" style="margin-left: 50px;width: 100%; height: 500px;"></div>
                    <div class="form-horizontal" id="allmap" style="margin-left: 50px;width: 100%; height: 500px;"></div>
                    <div class="input-card" style="margin-left: 50px;">
                        <h4>轨迹回放控制</h4>
                        <div class="input-item">
@@ -93,11 +125,161 @@
            </div>

        </div>

    </div>
</div>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3mHKIXMArjgIkgADzOlTYp4XssNSNkwr"></script>
<script src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=t5pcBZB5G4D11G9MzHq8Kik7jqzlTrAL"></script>
<script src="${ctxPath}/static/js/track1.js"></script>
<script src="${ctxPath}/static/js/track2.js"></script>
<script src="${ctxPath}/static/js/track3.js"></script>
<script type="text/javascript" src="//mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/track.js"></script>
<script src="${ctxPath}/static/modular/system/tOrderTaxi/tOrderTaxi_info.js"></script>
<script>
    var map = new BMapGL.Map('allmap', {
        style: 'grayed-out',
        displayOptions: {
            indoor: false,
            poiText: false,
            poiIcon: false,
            building: false,
        }
    });
    var point = new BMapGL.Point(demo_data[0][0], demo_data[0][1]);

    map.centerAndZoom(point, 18);
    map.enableScrollWheelZoom(true);
    map.setTilt(35);

    var track = new Track.View(map, {
        lineLayerOptions: {
            style: {
                strokeWeight: 8,
                strokeLineJoin: 'round',
                strokeLineCap: 'round'
            },
        }
    });

    var trackData = [];
    var colorOffset = [];
    for (var item of demo_data) {
        var point = new BMapGL.Point(item[0], item[1]);
        var trackPoint = new Track.TrackPoint(point);
        trackData.push(trackPoint);
        // 不同速度区间对应颜色
        var choose = [0.9, 0.5, 0.1];
        var color = choose[Math.floor(Math.random() * choose.length)];
        colorOffset.push(color);
    }
    var startMarker = new BMapGL.Marker(trackData[0].getPoint(), {
        icon: new BMapGL.Icon('https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/img/start.png', new BMapGL.Size(25, 40)),
        offset: new BMapGL.Size(0, -16),
    });
    map.addOverlay(startMarker);
    var endMarker = new BMapGL.Marker(trackData[trackData.length-1].getPoint(), {
        icon: new BMapGL.Icon('https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/img/end.png', new BMapGL.Size(25, 40)),
        offset: new BMapGL.Size(0, -16),

    });
    map.addOverlay(endMarker);
    var duration = 60000;
    var step = duration / trackData.length;

    var trackRoad = new Track.LiveTrack({
        // visible: false,
        duration: step,
        linearTexture: [[0, '#f45e0c'], [0.5, '#f6cd0e'], [1, '#2ad61d']],
        guideStyle: {
            style:{
                traceDisappear: false,
                traceStart: true,
                sequence: true,
                marginLength: 32,
                arrowColor: '#fff',
                strokeColor: 'rgba(27, 142, 236, 1)',
                strokeTextureUrl: 'https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/img/down.png',
                strokeTextureWidth: 64,
                strokeTextureHeight: 32,
            }
        },
    });

    trackRoad.setGuidTrackPath(trackData);
    trackRoad.on(Track.LineCodes.GUIDE_STATUS, (e) => {
        if (e.status === Track.GuidCodes.ADD_TO_MAP) {
            var guidTrack = trackRoad.getGuidTrack();
            guidTrack.on(Track.LineCodes.STATUS, (status) => {
                switch (status) {
                    case Track.StatusCodes.FINISH:
                        var box = trackRoad.getBBox();
                        if(box){
                            var bounds = [new BMapGL.Point(box[0], box[1]), new BMapGL.Point(box[2], box[3])];
                            map.setViewport(bounds);
                        }
                        break;
                    default:
                        break;
                }
            });
        }
    });
    var movePoint = new Track.ModelPoint({ point: trackData[0].getPoint(), style:{
            url: 'https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/img/bus.glb',
            scale: 9,
            level: 18,
            rotationX: 90,
            rotationY: 90,
            rotationZ: 0
        } });
    movePoint.setRotation(trackRoad.getGuidTrack().getStepInfoByIndex(0).angle);

    trackRoad.setMovePoint(movePoint);

    track.addTrackLine(trackRoad);
    track.focusTrack(trackRoad);

    var ani;
    var start = null;
    var index = 0;
    var finishIndex = 0;


    function startAnimation(timestamp) {
        if (!start) start = timestamp;
        var progress = timestamp - start;
        var next = step * (index - finishIndex);

        if(progress > next){
            if(index<trackData.length){
                movePoint.moveTo(trackData[index]);
                var obj = trackRoad.getGuidTrack().getStepInfoByIndex(index);
                trackRoad.setGradientColors(colorOffset.slice(0,index+1));
                index++;
            }else{
                pauseAnimation();
            }

        }
        ani = requestAnimationFrame(startAnimation);
    }


    function stopAnimation() {
        pauseAnimation();
        index = 0;
        finishIndex = index;

        start = null;
        trackRoad.clearTrackPoint();
        movePoint.setPoint(trackData[0].getPoint());
        movePoint.setRotation(trackRoad.getGuidTrack().getStepInfoByIndex(0).angle);
    }
    function pauseAnimation() {
        cancelAnimationFrame(ani);
        finishIndex = index;
        start = null;
    }
    function resumeAnimation() {
        startAnimation();
    }
</script>
@}

 ManagementOKTravel/guns-admin/src/main/webapp/WEB-INF/view/system/tOrderTaxi/tOrderTaxi_trajectory.html

@@ -23,9 +23,9 @@
                    <h2 class="h3Class" style="font-weight: 700;">线路轨迹</h2>
                </div>
            </div>
            <div class="row" style="margin-top: 30px;">
            <div class="row">
                <div class="col-sm-10">
                    <div class="form-horizontal" id="container" style="margin-left: 50px;width: 100%; height: 500px;"></div>
                    <div class="form-horizontal" id="allmap" style="margin-left: 50px;width: 100%; height: 500px;"></div>
                    <div class="input-card" style="margin-left: 50px;">
                        <h4>轨迹回放控制</h4>
                        <div class="input-item">
@@ -40,13 +40,13 @@
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=e17d799b2506d05faf7f88320a266803"></script>
<script src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=t5pcBZB5G4D11G9MzHq8Kik7jqzlTrAL"></script>
<script src="${ctxPath}/static/js/track1.js"></script>
<script src="${ctxPath}/static/js/track2.js"></script>
<script src="${ctxPath}/static/js/track3.js"></script>
<script type="text/javascript" src="//mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/track.js"></script>
<script src="${ctxPath}/static/modular/system/tOrderTaxi/tOrderTaxi_info.js"></script>
@}

 ManagementOKTravel/guns-admin/src/main/webapp/static/modular/system/tOrderTaxi/tOrderTaxi_info.js

@@ -125,11 +125,157 @@
    ajax.start();
}


var map = new AMap.Map("container", {
    resizeEnable: true,
    zoom: 14
var map = new BMapGL.Map('allmap', {
    style: 'grayed-out',
    displayOptions: {
        indoor: false,
        poiText: false,
        poiIcon: false,
        building: false,
    }
});
var point = new BMapGL.Point(demo_data[0][0], demo_data[0][1]);

map.centerAndZoom(point, 18);
map.enableScrollWheelZoom(true);
map.setTilt(35);

var track = new Track.View(map, {
    lineLayerOptions: {
        style: {
            strokeWeight: 8,
            strokeLineJoin: 'round',
            strokeLineCap: 'round'
        },
    }
});

var trackData = [];
var colorOffset = [];

function orderTrack(data) {
    for(var item in data){
        var point = new BMapGL.Point(data[item].longitude, data[item].latitude);
        var trackPoint = new Track.TrackPoint(point);
        trackData.push(trackPoint);
        // 不同速度区间对应颜色
        var choose = [0.9, 0.5, 0.1];
        var color = choose[Math.floor(Math.random() * choose.length)];
        colorOffset.push(color);
    }
}
var startMarker = new BMapGL.Marker(trackData[0].getPoint(), {
    icon: new BMapGL.Icon('https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/img/start.png', new BMapGL.Size(25, 40)),
    offset: new BMapGL.Size(0, -16),
});
map.addOverlay(startMarker);
var endMarker = new BMapGL.Marker(trackData[trackData.length-1].getPoint(), {
    icon: new BMapGL.Icon('https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/img/end.png', new BMapGL.Size(25, 40)),
    offset: new BMapGL.Size(0, -16),

});
map.addOverlay(endMarker);
var duration = 60000;
var step = duration / trackData.length;

var trackRoad = new Track.LiveTrack({
    // visible: false,
    duration: step,
    linearTexture: [[0, '#f45e0c'], [0.5, '#f6cd0e'], [1, '#2ad61d']],
    guideStyle: {
        style:{
            traceDisappear: false,
            traceStart: true,
            sequence: true,
            marginLength: 32,
            arrowColor: '#fff',
            strokeColor: 'rgba(27, 142, 236, 1)',
            strokeTextureUrl: 'https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/img/down.png',
            strokeTextureWidth: 64,
            strokeTextureHeight: 32,
        }
    },
});

trackRoad.setGuidTrackPath(trackData);
trackRoad.on(Track.LineCodes.GUIDE_STATUS, (e) => {
    if (e.status === Track.GuidCodes.ADD_TO_MAP) {
        var guidTrack = trackRoad.getGuidTrack();
        guidTrack.on(Track.LineCodes.STATUS, (status) => {
            switch (status) {
                case Track.StatusCodes.FINISH:
                    var box = trackRoad.getBBox();
                    if(box){
                        var bounds = [new BMapGL.Point(box[0], box[1]), new BMapGL.Point(box[2], box[3])];
                        map.setViewport(bounds);
                    }
                    break;
                default:
                    break;
            }
        });
    }
});
var movePoint = new Track.ModelPoint({ point: trackData[0].getPoint(), style:{
        url: 'https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/img/bus.glb',
        scale: 9,
        level: 18,
        rotationX: 90,
        rotationY: 90,
        rotationZ: 0
    } });
movePoint.setRotation(trackRoad.getGuidTrack().getStepInfoByIndex(0).angle);

trackRoad.setMovePoint(movePoint);

track.addTrackLine(trackRoad);
track.focusTrack(trackRoad);

var ani;
var start = null;
var index = 0;
var finishIndex = 0;


function startAnimation(timestamp) {
    if (!start) start = timestamp;
    var progress = timestamp - start;
    var next = step * (index - finishIndex);

    if(progress > next){
        if(index<trackData.length){
            movePoint.moveTo(trackData[index]);
            var obj = trackRoad.getGuidTrack().getStepInfoByIndex(index);
            trackRoad.setGradientColors(colorOffset.slice(0,index+1));
            index++;
        }else{
            pauseAnimation();
        }

    }
    ani = requestAnimationFrame(startAnimation);
}


function stopAnimation() {
    pauseAnimation();
    index = 0;
    finishIndex = index;

    start = null;
    trackRoad.clearTrackPoint();
    movePoint.setPoint(trackData[0].getPoint());
    movePoint.setRotation(trackRoad.getGuidTrack().getStepInfoByIndex(0).angle);
}
function pauseAnimation() {
    cancelAnimationFrame(ani);
    finishIndex = index;
    start = null;
}
function resumeAnimation() {
    startAnimation();
}

$(function() {
    $('#orderType').on('change', function () {
        if($(this).val() == 1){
@@ -165,68 +311,4 @@
    });
}

var marker, lineArr = [];

function orderTrack(data) {
    for(var i in data){
        var waypoints = [];
        var lon = parseFloat(data[i].lon);
        var lat = parseFloat(data[i].lat);
        waypoints.push(lon);
        waypoints.push(lat);
        lineArr.push(waypoints);
    }

    marker = new AMap.Marker({
        map: map,
        position: lineArr[0],
        icon: "https://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle:-90,
    });

    // 绘制轨迹
    var polyline = new AMap.Polyline({
        map: map,
        path: lineArr,
        showDir:true,
        strokeColor: "#28F",  //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6,      //线宽
        // strokeStyle: "solid"  //线样式
    });

    var passedPolyline = new AMap.Polyline({
        map: map,
        // path: lineArr,
        strokeColor: "#AF5",  //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6,      //线宽
        // strokeStyle: "solid"  //线样式
    });


    marker.on('moving', function (e) {
        passedPolyline.setPath(e.passedPath);
    });

    map.setFitView();
}


function startAnimation () {
    marker.moveAlong(lineArr, 200);
}

function pauseAnimation () {
    marker.pauseMove();
}

function resumeAnimation () {
    marker.resumeMove();
}

function stopAnimation () {
    marker.stopMove();
}