补充

无关风月

2025-02-14 8db5d3eafb1cc5352b1bdf2c281c54c7fa80db93

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

@@ -49,4 +49,171 @@
<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 temp = "${guiji}"
    //
    console.log("看看数据")
    console.log(temp)
    // 使用正则表达式替换等号为冒号，并添加双引号
    const jsonString = temp
        .replace(/\b(\w+)\b(?==)/g, '"$1"') // 将键名用双引号括起来
        .replace(/=/g, ':') // 将等号替换为冒号
        .replace(/'/g, '"'); // 确保所有引号都是双引号
    console.log(jsonString)
    // 将字符串解析为JSON数组
    const jsonArray = JSON.parse(jsonString);
    temp = jsonArray;

    console.log(jsonArray);
    console.log(temp)
    console.log(temp[0])
    console.log(temp[0].lon)
    var map = new BMapGL.Map('allmap', {
        style: 'grayed-out',
        displayOptions: {
            indoor: false,
            poiText: false,
            poiIcon: false,
            building: false,
        }
    });
    var point = new BMapGL.Point(temp[0].lon, temp[0].lat);

    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 temp) {
        var point = new BMapGL.Point(item.lon, item.lat);
        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>
@}