<!-- 2017-12-7 14:56:03 | 修改 木遥（微信: http://marsgis.cn/weixin.html ） -->
|
<!DOCTYPE html>
|
<html>
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
<head>
|
<!-- 标题及搜索关键字 -->
|
|
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon/favicon.ico" />
|
<title>历史轨迹</title>
|
|
<script type="text/javascript"
|
src="/hxzkuwb/Home/demo/lib/include-lib.js"
|
libpath="/hxzkuwb/Home/demo/lib/"
|
include="jquery,layer,toastr,font-awesome,bootstrap,bootstrap-checkbox,jquery.range,layer,haoutil,mars3d"
|
></script>
|
|
<link href="/hxzkuwb/Home/demo/css/style.css" rel="stylesheet" />
|
<link rel="stylesheet" href="../../CSS/layui2.css">
|
<style>
|
::placeholder{
|
color: white;
|
}
|
</style>
|
</head>
|
|
<body class="dark">
|
<div id="mars3dContainer" class="mars3d-container" style="height: 100%"></div>
|
|
<div class="infoview" style="margin-top: 1%">
|
<div class="layui-form-item" style="text-align: right">
|
<label style="">Номер оборудования：</label>
|
<div class="" style="display: inline-block">
|
<input type="text" style="width: 95%" name="title" id="tagid" required lay-verify="required" placeholder="Номер или имя" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
<div class="layui-form-item" style="float: right">
|
<label>Время начала：</label>
|
<div class="layui-inline" id="start" style=""></div>
|
</div>
|
<div class="layui-form-item" style="float: right">
|
<label>Время окончания：</label>
|
<div class="layui-inline" id="end" style=""></div>
|
</div>
|
|
<div style="text-align: right;margin-right: 2.5%">
|
<button type="button" class="layui-btn layui-btn-normal" onclick="StartLocus()">Запрос</button>
|
<button type="button" class="layui-btn layui-btn-normal" onclick="StartContinue()">Продолжай.</button>
|
<button type="button" class="layui-btn layui-btn-normal" onclick="EndLocus()">Остановить</button>
|
</div>
|
</div>
|
<script src="/hxzkuwb/Home/demo/js/common.js"></script>
|
<script src="../../JS/layui.js"></script>
|
<script src="../../Home/HomeJs/notify.js"></script>
|
<script src="../../Home/HomeJs/notify_stand.js"></script>
|
|
<script type="text/javascript">
|
"use script"; // 开发环境建议开启严格模式
|
window.currentPath = "/example/graphic/custom/fixedRoute/";// 当前示例的目录
|
var PinLv = 1000
|
var map // mars3d.Map三维地图对象
|
var graphicLayer
|
var graphicLayerPerson // 矢量图层对象
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
var mapOptions = {
|
scene: {
|
center: { lat: 37.791517, lng: 117.418370, alt: 7101, heading: 2, pitch: -26 }
|
},
|
control: {
|
clockAnimate: true, // 时钟动画控制(左下角)
|
timeline: true, // 是否显示时间线控件
|
compass:false,
|
navigationHelpButton:false,
|
fullscreenButton:false,
|
homeButton:false,
|
locationBar:false,
|
}
|
}
|
|
var colors = [
|
"rgb(40, 40, 255)",
|
"rgb(0, 88, 176)",
|
"rgb(0, 128, 255)",
|
"rgb(0, 217, 0)",
|
"rgb(0, 151, 0)",
|
"rgb(255, 199, 83)",
|
"rgb(255, 144, 30)",
|
"rgb(202, 101, 0)",
|
"rgb(255, 0, 0)"
|
]
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
// 创建矢量数据图层
|
map.clock.currentTime = Cesium.JulianDate.fromDate(new Date("2024-09-14 10:06:20"))
|
map.clock.multiplier = 1
|
// 绑定点击事件
|
// graphicLayerPerson.on(mars3d.EventType.click, (event) => {
|
// })
|
// bindLayerContextMenu() // 在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
|
graphicLayerPerson = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayerPerson)
|
graphicLayerPerson.bindPopup(function (event) {
|
var attr = event.graphic?.attr
|
if (!attr) {
|
return
|
}
|
return ' '+attr
|
}, {
|
autoClose: false, // 设置为 true 或 false，根据需求
|
closeButton:false,
|
closeOnClick:false,
|
distanceDisplayCondition: false,
|
|
pointerEvents:false,
|
|
})
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
function onUnmounted() {
|
map = null
|
}
|
|
// 在图层绑定Popup弹窗
|
|
|
|
</script>
|
<script type="text/javascript">
|
"use script" //开发环境建议开启严格模式
|
|
|
</script>
|
|
|
<script>
|
var start;
|
var end;
|
var LocusData;
|
layui.use('laydate', function() {
|
var laydate = layui.laydate;
|
laydate.render({
|
elem: '#start'
|
,type: 'datetime'
|
,position: 'static'
|
,lang: 'en'
|
,done: function(value, date){
|
notify.success(value);
|
start = value
|
}
|
});
|
laydate.render({
|
elem: '#end'
|
,type: 'datetime'
|
,position: 'static'
|
,lang: 'en'
|
,done: function(value, date){
|
notify.success(value);
|
end = value
|
}
|
});
|
})
|
function StartLocus(){
|
let tagid = $("#tagid").val();
|
|
if (tagid == ""){
|
notify.error("Введите номер или имя устройства")
|
return false
|
}
|
if (start == "" || start == undefined){
|
notify.error("Выберите время начала")
|
return false
|
}
|
if (end == "" || end == undefined){
|
notify.error("Выберите время окончания")
|
return false
|
}
|
notify.success("Загрузите траекторию воспроизведения позже...")
|
var data = {
|
tagid:tagid,
|
start:start,
|
end:end
|
}
|
$.ajax({
|
url: "/hxzkuwb/findBaiDuGuiJi",
|
data: data,
|
async: false,
|
success: function (data) {
|
LocusData = data //轨迹数据
|
Playback(tagid,LocusData[0].name)
|
}
|
})
|
|
}
|
function EndLocus(){
|
map.clock.multiplier = 0
|
notify.success("Остановить.")
|
}
|
function StartContinue(){
|
map.clock.multiplier = 1
|
notify.success("Продолжай.")
|
}
|
|
function Playback(Id,name){
|
let modelParam = {
|
scale: 50,
|
url: "//data.mars3d.cn/gltf/mars/man/walk.gltf",
|
pitch:0,
|
roll:0,
|
};
|
let car = new mars3d.graphic.FixedRoute({
|
id: Id,
|
name:name,
|
maxCacheCount: -1,
|
model: {
|
...modelParam,
|
clampToGround: true,
|
},
|
attr: name,
|
polyline: {
|
color: colors[0],
|
width: 2,
|
clampToGround: true,
|
},
|
});
|
graphicLayerPerson.addGraphic(car);
|
car.openPopup()
|
graphicLayerPerson.eachGraphic((cars) => {
|
// 取出对应车辆的轨迹列表
|
var path = LocusData.filter((item) => cars.id === item.tagid);
|
if(path.length > 0){
|
map.clock.currentTime = Cesium.JulianDate.fromDate(new Date(path[0].addtime))
|
var viewPoints = [
|
{ lng: path[0].gspJingdu, lat:path[0].gpsWeidu }
|
]
|
map.setCameraViewList(viewPoints); // 15 为缩放级别，根据需求调整
|
}
|
// 使用 forEach 确保每个路径点的定时器都有正确的 i 值
|
path.forEach((item, index) => {
|
setTimeout(() => {
|
var point = new mars3d.LngLatPoint(item.gspJingdu, item.gpsWeidu);
|
cars.addDynamicPosition(point,item.addtime);
|
$("#lblAllLen").text(path[0].name)
|
$("#lblAllTime").text(path[0].tagid)
|
}, 1);
|
if (index == path.length-1){
|
notify.success("Загрузка данных завершена")
|
}
|
});
|
});
|
}
|
|
</script>
|
</body>
|
</html>
|
