@layout("/common/_container.html"){
|
<style type="text/css">
|
html, body, #container {
|
height: 100%;
|
width: 100%;
|
}
|
|
.input-card .btn{
|
margin-right: 1.2rem;
|
width: 9rem;
|
}
|
|
.input-card .btn:last-child{
|
margin-right: 0;
|
}
|
</style>
|
<div class="ibox float-e-margins">
|
<div class="ibox-content">
|
<div class="form-horizontal">
|
<input type="hidden" id="id" name="id" value="${tOrderTaxiId}">
|
<div class="row" style="margin-top: 30px;">
|
<div class="col-sm-4">
|
<h2 class="h3Class" style="font-weight: 700;">线路轨迹</h2>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col-sm-10">
|
<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">
|
<input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()"/>
|
<input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()"/>
|
<input type="button" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()"/>
|
<input type="button" class="btn" value="停止动画" id="stop" onclick="stopAnimation()"/>
|
</div>
|
<div class="input-item">
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<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 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>
|
@}
|
