补充

无关风月

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>
@}