From 0193e3a62209bd500b9b5184bffc331e19f3a388 Mon Sep 17 00:00:00 2001
From: 无关风月 <443237572@qq.com>
Date: 星期二, 14 一月 2025 20:31:46 +0800
Subject: [PATCH] 补充
---
ManagementOKTravel/guns-admin/src/main/webapp/WEB-INF/view/system/tOrderTaxi/tOrderTaxi_edit.html | 204 ++++++++++++++++++++++++-
ManagementOKTravel/guns-admin/src/main/webapp/WEB-INF/view/system/tOrderTaxi/tOrderTaxi_trajectory.html | 14
ManagementOKTravel/guns-admin/src/main/webapp/static/modular/system/tOrderTaxi/tOrderTaxi_info.js | 218 ++++++++++++++++++--------
3 files changed, 350 insertions(+), 86 deletions(-)
diff --git a/ManagementOKTravel/guns-admin/src/main/webapp/WEB-INF/view/system/tOrderTaxi/tOrderTaxi_edit.html b/ManagementOKTravel/guns-admin/src/main/webapp/WEB-INF/view/system/tOrderTaxi/tOrderTaxi_edit.html
index db071f9..2f1be4a 100644
--- a/ManagementOKTravel/guns-admin/src/main/webapp/WEB-INF/view/system/tOrderTaxi/tOrderTaxi_edit.html
+++ b/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>
@}
diff --git a/ManagementOKTravel/guns-admin/src/main/webapp/WEB-INF/view/system/tOrderTaxi/tOrderTaxi_trajectory.html b/ManagementOKTravel/guns-admin/src/main/webapp/WEB-INF/view/system/tOrderTaxi/tOrderTaxi_trajectory.html
index 6bdd85e..294f5bb 100644
--- a/ManagementOKTravel/guns-admin/src/main/webapp/WEB-INF/view/system/tOrderTaxi/tOrderTaxi_trajectory.html
+++ b/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>
@}
diff --git a/ManagementOKTravel/guns-admin/src/main/webapp/static/modular/system/tOrderTaxi/tOrderTaxi_info.js b/ManagementOKTravel/guns-admin/src/main/webapp/static/modular/system/tOrderTaxi/tOrderTaxi_info.js
index 5c8e506..70b5bd1 100644
--- a/ManagementOKTravel/guns-admin/src/main/webapp/static/modular/system/tOrderTaxi/tOrderTaxi_info.js
+++ b/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();
-}
--
Gitblit v1.7.1