150 lines
5.4 KiB
HTML
150 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
|
<script src="../../js/publics/sm4.js" type="text/javascript"></script>
|
|
<link rel="stylesheet" href="../../css/font.css">
|
|
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
|
|
<link rel="stylesheet" href="../../css/shuiYin/shuiYin.css">
|
|
<style type="text/css">
|
|
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
|
|
ul li {
|
|
list-style: none;
|
|
}
|
|
.drawing-panel {
|
|
position: fixed;
|
|
bottom: 91%;
|
|
padding: 1rem 1rem;
|
|
border-radius: .25rem;
|
|
/*background-color: #fff;*/
|
|
/*box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);*/
|
|
}
|
|
.btn {
|
|
float: left;
|
|
margin: 0 5px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
}
|
|
</style>
|
|
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
|
|
<script src="../../js/publics/public.js"></script>
|
|
<script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
|
|
<script src="../../js/publics/echarts.js"></script>
|
|
<script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
|
|
<script src="../../api/commonRequest.js" type="text/javascript"></script>
|
|
<script src="../../js/publics/aescbc.js"></script>
|
|
<script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
|
|
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=s0zhKgClIXRG8hQp3HB4KtiXPWw1dP8B"></script>
|
|
<script src="../../js/publics/shuiYin.js"></script>
|
|
<title>视角动画</title>
|
|
</head>
|
|
<body>
|
|
<div id="allmap"></div>
|
|
<ul class="drawing-panel" style="z-index: 99;">
|
|
<li class = "btn">
|
|
<div class="layui-inline">
|
|
<div class="layui-input-group">
|
|
<input type="text" class="layui-input" id="ID-laydate-type-datetime" placeholder="HH:mm:ss">
|
|
<div class="layui-input-split layui-input-suffix" style="cursor: pointer;" onclick="historicalPath()">
|
|
<i class="layui-icon layui-icon-search"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</body>
|
|
</html>
|
|
<script type="text/javascript">
|
|
let element, layer, laydate;
|
|
|
|
console.log(sessionStorage.getItem("bidCode"));
|
|
console.log(sessionStorage.getItem("bindUser"));
|
|
const bidCode = sessionStorage.getItem("bidCode");
|
|
let bindUser = sessionStorage.getItem("bindUser");
|
|
|
|
layui.use(['layer', 'element'], function () {
|
|
element = layui.element;
|
|
layer = layui.layer;
|
|
laydate = layui.laydate;
|
|
|
|
historicalPath();
|
|
|
|
laydate.render({
|
|
elem: '#ID-laydate-type-datetime',
|
|
value: getNowDay() // 设置默认值为当天
|
|
});
|
|
});
|
|
|
|
|
|
function historicalPath() {
|
|
const url = commonUrl + "screen/largeScreen/personnelControl/PersonnelHistoricalCoordinates";
|
|
const params = {
|
|
"roleCode": roleCode,
|
|
"orgId": orgId,
|
|
"userId": userId,
|
|
"bidCode": bidCode,
|
|
"bindUser": bindUser,
|
|
"month": $('#ID-laydate-type-datetime').val(),
|
|
}
|
|
let encryptStr = encryptCBC(JSON.stringify(params));
|
|
ajaxRequest(url, "POST", encryptStr, true, function () {
|
|
}, function (result) {
|
|
let rawData = result.data;
|
|
test(rawData);
|
|
console.log(result);
|
|
}, function (xhr) {
|
|
// error(xhr)
|
|
} , "application/json",aqEnnable);
|
|
}
|
|
|
|
function test(data){
|
|
|
|
// GL版命名空间为BMapGL
|
|
// 按住鼠标右键，修改倾斜角和角度
|
|
var bmap = new BMapGL.Map("allmap"); // 创建Map实例
|
|
bmap.centerAndZoom(new BMapGL.Point(117.16010067578883, 31.93566198931321), 13); // 初始化地图,设置中心点坐标和地图级别
|
|
bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
|
var path = [];
|
|
// 遍历数据数组
|
|
for (var i = 0; i < data.length; i++) {
|
|
var aslatLon = data[i].aslatLon.split(','); // 拆分经纬度字符串
|
|
var lng = parseFloat(aslatLon[0]); // 经度
|
|
var lat = parseFloat(aslatLon[1]); // 纬度
|
|
|
|
// 创建包含经纬度的对象并添加到数组中
|
|
path.push({
|
|
'lng': lng,
|
|
'lat': lat
|
|
});
|
|
}
|
|
var point = [];
|
|
for (var i = 0; i < path.length; i++) {
|
|
point.push(new BMapGL.Point(path[i].lng, path[i].lat));
|
|
}
|
|
console.log(point)
|
|
var pl = new BMapGL.Polyline(point);
|
|
|
|
function start () {
|
|
trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
|
|
overallView: true,
|
|
tilt: 20,
|
|
duration: 10000,
|
|
delay: 300
|
|
});
|
|
trackAni.start();
|
|
}
|
|
setTimeout(start, 3000);
|
|
|
|
}
|
|
|
|
function getNowDay() {
|
|
var time = new Date();
|
|
var year = time.getFullYear();
|
|
var month = time.getMonth() + 1 >= 10 ? time.getMonth() + 1 : '0' + (time.getMonth() + 1);
|
|
var day = time.getDate() >= 10 ? time.getDate() : '0' + time.getDate();
|
|
return year + "-" + month + "-" + day;
|
|
}
|
|
|
|
</script>
|