var map = new BMapGL.Map("container");
|
//默认经纬度 - 风正致远股份坐标
|
var lon = 113.548794,lat = 34.797358;
|
var pl;
|
//生成坐标点的数组
|
var point = [];
|
$(function() {
|
layui.use([ 'layer', 'laydate', 'form' ], function() {
|
layer = layui.layer;
|
});
|
|
setPoint();
|
});
|
|
//设置点
|
function setPoint() {
|
if(listPatrol.length == 0){
|
layer.msg("暂未查到巡更记录信息！");
|
firstSetCenter();
|
return;
|
}
|
|
map.centerAndZoom(new BMapGL.Point(listPatrol[0].longitude,listPatrol[0].latitude), 17);
|
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
|
map.addControl(scaleCtrl);
|
var zoomCtrl = new BMapGL.ZoomControl(); // 添加比例尺控件
|
map.addControl(zoomCtrl);
|
|
for (var i = 0; i < listPatrol.length; i++) {
|
point.push(new BMapGL.Point(listPatrol[i].longitude, listPatrol[i].latitude));
|
}
|
|
pl = new BMapGL.Polyline(point, {
|
strokeColor: "#e31411",
|
strokeWeight: 4,
|
strokeOpacity: 1
|
});
|
|
//画轨迹线
|
toLine();
|
}
|
|
//画轨迹线
|
function toLine () {
|
var second = (point.length-1)*2000; //设置时间
|
trackAni = new BMapGLLib.TrackAnimation(map, pl, {
|
overallView: true,
|
tilt: 30,
|
duration: second, //设置轨迹线的时间段
|
delay: 300
|
});
|
trackAni.start();
|
|
//显示点图标及标注
|
showLabel();
|
}
|
|
//默认定位
|
function firstSetCenter() {
|
if(curDept && curDept.lon && curDept.lat){
|
lon = curDept.lon;
|
lat = curDept.lat;
|
}
|
|
//适应地图大小，设置地图中心点坐标及地图级别
|
var defaultPoint = {longitude:lon,latitude:lat};
|
|
map.centerAndZoom(new BMapGL.Point(defaultPoint.longitude, defaultPoint.latitude), 12);
|
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
|
map.addControl(scaleCtrl);
|
var zoomCtrl = new BMapGL.ZoomControl(); // 添加比例尺控件
|
map.addControl(zoomCtrl);
|
}
|
//显示坐标标注信息
|
function showLabel() {
|
//设置标注偏移量
|
var offset = new BMapGL.Size(10, -30);
|
|
//配置图标
|
var icon = new BMapGL.Icon("../../static/images/icon_gcoding.png", new BMapGL.Size(25, 45));
|
|
//显示点图标及标注时间
|
for (var i = 0; i < point.length; i++) {
|
//添加点的并显示
|
var marker = new BMapGL.Marker(point[i], {
|
icon: icon
|
});
|
map.addOverlay(marker);
|
|
//添加对应点id
|
marker.patrol = {id: listPatrol[i].id, dayTime:dateFormatStr(listPatrol[i].createTime)};
|
marker.addEventListener("click", showImg);
|
|
//添加文本标注，并显示
|
var opts = {
|
position : point[i],
|
offset : offset
|
};
|
|
var label = new BMapGL.Label(dateFormatStr(listPatrol[i].createTime), opts);
|
label.setStyle({
|
color : "black",
|
"border" : "5px solid #e2e2e4",
|
"border-radius" : "10px",
|
"background" : "white",
|
fontSize : "18px",
|
lineHeight : "25px",
|
fontFamily : "微软雅黑"
|
});
|
map.addOverlay(label);
|
}
|
|
setZoom(listPatrol);
|
}
|
|
//展示图片
|
function showImg(e) {
|
|
var id= e.target.patrol.id;
|
var dayTime= e.target.patrol.dayTime;
|
// console.log(id);
|
|
layer.msg("开始打开图片……");
|
|
$.ajax({
|
type: "GET",
|
cache: false,
|
url: "../../basic/security/patrol-img?id=" +id,
|
dataType: "json",
|
contentType: "application/json;charset=UTF-8",
|
success: function (result) {
|
if(result){
|
$("#imgPath").attr("src", result.base64Img);
|
layer.open({
|
type : 1,
|
title : dayTime + "打卡记录照片",
|
area : [ '500px', '700px' ],
|
content : $('#imgRecord'),
|
closeBtn: 2
|
});
|
}else {
|
layer.msg("无照片记录");
|
}
|
},
|
error: function (result) {
|
layer.msg("无照片记录")
|
}
|
});
|
}
|
|
//根据经纬极值计算绽放级别
|
function setZoom(points) {
|
if (points.length > 0) {
|
var maxLng = points[0].longitude;
|
var minLng = points[0].longitude;
|
var maxLat = points[0].latitude;
|
var minLat = points[0].latitude;
|
var res;
|
for (var i = points.length - 1; i >= 0; i--) {
|
res = points[i];
|
if (res.longitude > maxLng) maxLng = res.longitude;
|
if (res.longitude < minLng) minLng = res.longitude;
|
if (res.latitude > maxLat) maxLat = res.latitude;
|
if (res.latitude < minLat) minLat = res.latitude;
|
}
|
var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2;
|
var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2;
|
var zoom = getZoom(maxLng, minLng, maxLat, minLat);
|
map.centerAndZoom(new BMapGL.Point(cenLng, cenLat), zoom);
|
} else {
|
//没有坐标，显示全中国
|
map.centerAndZoom(new BMapGL.Point(103.388611, 35.563611), 5);
|
}
|
}
|
|
//根据经纬极值计算绽放级别
|
function getZoom(maxLng, minLng, maxLat, minLat) {
|
var zoom = ["50", "100", "200", "500", "1000", "2000", "5000", "10000", "20000", "25000", "50000", "100000", "200000", "500000", "1000000", "2000000"]; // 级别18到3。
|
var pointA = new BMapGL.Point(maxLng, maxLat); // 创建点坐标A
|
var pointB = new BMapGL.Point(minLng, minLat); // 创建点坐标B
|
var distance = map.getDistance(pointA, pointB).toFixed(1); //获取两点距离,保留小数点后两位
|
for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
|
if (zoom[i] - distance > 0) {
|
return 18 - i + 3; //之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
|
}
|
}
|
}
|
//格式化时间
|
function dateFormatStr(time) {
|
if(time){
|
var d = new Date(time);
|
return dateFtt("hh:mm:ss",d);
|
}
|
return "";
|
}
|
|
//单机放大图片
|
function newWindow() {
|
var img = new Image();
|
img.src = $("#imgPath")[0].src;
|
|
var newWin = window.open("", '_blank');
|
newWin.document.write(img.outerHTML);
|
newWin.document.title = "照片记录";
|
newWin.document.close();
|
}
|
