百度地图
This commit is contained in:
parent
feb51a6001
commit
ff94389a67
|
|
@ -221,7 +221,6 @@ function wearGarList(){
|
|||
|
||||
let data = result.data;
|
||||
data.forEach(function(item) {
|
||||
debugger
|
||||
let arrName = item.modeName.split(',');
|
||||
let arr = item.val.split(',')
|
||||
for (let i = 0; i < arrName.length; i++) {
|
||||
|
|
@ -232,7 +231,7 @@ function wearGarList(){
|
|||
var longitude = parseFloat(item.经度); // 经度
|
||||
var bindUser = item.绑定人; // 绑定人
|
||||
|
||||
创建标记点
|
||||
//创建标记点
|
||||
var point = new BMapGL.Point(longitude, latitude);
|
||||
var marker = new BMapGL.Marker(point);
|
||||
map.addOverlay(marker);
|
||||
|
|
@ -256,7 +255,7 @@ function wearGarList(){
|
|||
function createInfoWindowContent(userName, bindUser, phone) {
|
||||
return '<div>' + userName + ' ' + bindUser + '</div>' +
|
||||
'<div>' + phone + '</div>' +
|
||||
'<div id="showTrack" onclick="test(bindUser)"><a style="color: #1e9fff" href="#"">查看轨迹</a></div>';
|
||||
'<div id="showTrack" onclick="test(\'' + bindUser + '\')"><a style="color: #1e9fff" href="#"">查看轨迹</a></div>';
|
||||
}
|
||||
// // 创建点标记
|
||||
// let marker = new BMapGL.Marker(new BMapGL.Point(lon,lat));
|
||||
|
|
@ -349,6 +348,8 @@ function wearGarList(){
|
|||
}
|
||||
function test(bindUser){
|
||||
// 查看轨迹函数
|
||||
sessionStorage.setItem("bindUser", bindUser);
|
||||
sessionStorage.setItem("bidCode", bidCode);
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '运动轨迹',
|
||||
|
|
|
|||
|
|
@ -3,58 +3,141 @@
|
|||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<link rel="stylesheet" href="../../css/font.css">
|
||||
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.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>
|
||||
<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">
|
||||
// GL版命名空间为BMapGL
|
||||
// 按住鼠标右键，修改倾斜角和角度
|
||||
var bmap = new BMapGL.Map("allmap"); // 创建Map实例
|
||||
bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17); // 初始化地图,设置中心点坐标和地图级别
|
||||
bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
||||
var path = [{
|
||||
'lng': 116.297611,
|
||||
'lat': 40.047363
|
||||
}, {
|
||||
'lng': 116.302839,
|
||||
'lat': 40.048219
|
||||
}, {
|
||||
'lng': 116.308301,
|
||||
'lat': 40.050566
|
||||
}, {
|
||||
'lng': 116.305732,
|
||||
'lat': 40.054957
|
||||
}, {
|
||||
'lng': 116.304754,
|
||||
'lat': 40.057953
|
||||
}, {
|
||||
'lng': 116.306487,
|
||||
'lat': 40.058312
|
||||
}, {
|
||||
'lng': 116.307223,
|
||||
'lat': 40.056379
|
||||
}];
|
||||
var point = [];
|
||||
for (var i = 0; i < path.length; i++) {
|
||||
point.push(new BMapGL.Point(path[i].lng, path[i].lat));
|
||||
}
|
||||
var pl = new BMapGL.Polyline(point);
|
||||
setTimeout('start()', 3000);
|
||||
function start () {
|
||||
trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
|
||||
overallView: true,
|
||||
tilt: 20,
|
||||
duration: 10000,
|
||||
delay: 300
|
||||
let element, layer, laydate;
|
||||
const bidCode = sessionStorage.getItem("bidCode");
|
||||
let bindUser = JSON.parse(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() // 设置默认值为当天
|
||||
});
|
||||
trackAni.start();
|
||||
});
|
||||
|
||||
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue