function queryTagid() {
|
var tag = document.getElementById("tagid").value;
|
var fanwei = $("#FanWei").val();
|
var floor =$("#cxList").val();
|
var time = fanwei.split('到')
|
var begin = time[0]
|
var end = time[1].slice(1);
|
var tagTrack = [];
|
$.ajax({
|
async: false,
|
type: "POST",
|
url: "/hxzkuwb/trackTagid.do",
|
dataType: 'json',
|
data: {
|
tag_value: tag,
|
begin_value: begin,
|
end_value: end,
|
floor_value: floor,
|
},
|
success: function (data) {
|
tagTrack = data;
|
},
|
});
|
return tagTrack;
|
};
|
|
|
|
|
function getTruemap() {
|
var floor =$("#cxList").val();
|
var map_wl = [];
|
$.ajax({
|
async: false,
|
type: "POST",
|
url: "/hxzkuwb/findFloorMap",
|
dataType: 'json',
|
data: {
|
floor: floor
|
},
|
success: function (data) {
|
map_wl = [data.xtruelength, data.ytruewidth];
|
},
|
});
|
return map_wl;
|
};
|
|
function getYuandian() {
|
var floor =$("#cxList").val();
|
var yuandian = []
|
$.ajax({
|
async: false,
|
type: "POST",
|
url: "/hxzkuwb/findFloorMap",
|
dataType: 'json',
|
data: {
|
floor: floor
|
},
|
success: function (data) {
|
yuandian = [data.x0Length, data.y0Width];
|
},
|
});
|
return yuandian;
|
};
|
|
|
|
|
|
|
|
|
|
|
|
var zongtiao;
|
var tiao
|
var timer;
|
var ts1 = getYuandian();
|
var ts2 = getTruemap();
|
function MarkPoints(Imgurl) {
|
this.imgX = 0;//在画布上图片的X偏移量
|
this.imgY = 0;//在画布上图片的Y偏移量
|
this.imgScale = 1;//图片的缩放比例
|
this.rateNum;//图片高度自适应比例,图片等比居中展示在canvas
|
this.scaleFlag = 0;//缩放因子，最大缩放9,最小缩放-9
|
this.context;
|
this.img;
|
this.playIndex = 0;
|
this.pos = {};//每次拖拽前坐标保存
|
this.playFlag = false;//是否播放
|
this.playTrack = [];
|
this.dragFlag = false;//是否可拖拽当前img，默认不能
|
this.markFlag = false;//标记区域开启关闭flag
|
this.CreatLinepoints = [];//每次创建新区域的坐标集合
|
this.playMark = []; //正在展示的标记
|
this.allMarkLins = [];//已创建的区域集合，例如[[{x,y},{x,y},{x,y}],[{n,m},{n,m},{n,m}]]目前只需要一个区域，所以数组内部只有一项
|
this.allFenceColor = [];//已创建的区域颜色
|
this.getImgLoad(Imgurl);
|
this.init();
|
document.oncontextmenu = new Function("event.returnValue=false;");
|
document.onselectstart = new Function("event.returnValue=false;");
|
|
}
|
MarkPoints.prototype = {
|
getImgLoad: function (Imgurl) {
|
var _this = this;
|
|
var wrap = document.getElementById('wrap');
|
_this.canvas = document.getElementById('draw');
|
_this.context = draw.getContext('2d');
|
_this.canvas.height = wrap.offsetHeight;
|
_this.canvas.width = wrap.offsetWidth;
|
_this.img = new Image();
|
_this.img.onload = function () {
|
_this.imgX = 0;
|
_this.imgY = 0;
|
_this.imgScale = 1;
|
_this.rateNum = _this.canvas.height / _this.img.naturalHeight;
|
_this.imgX = (_this.canvas.width - _this.img.naturalWidth * _this.imgScale * _this.rateNum) / 2;//默认进来当前图像居中显示
|
/*画出当前图片*/
|
_this.drawImg();
|
}
|
_this.img.src = imgUrl;
|
|
},
|
getNewPoints: function (points) {
|
var _this = this;
|
var newPointAry = [];
|
for (var i = 0; i < points.length; i++) {
|
var obj = {};
|
obj.x = points[i].x * _this.imgScale + _this.imgX;
|
obj.y = points[i].y * _this.imgScale + _this.imgY;
|
if (points[i].hasOwnProperty('mac')) {
|
obj.mac = points[i].mac;
|
obj.name = points[i].name || '';
|
}
|
|
newPointAry.push(obj);
|
}
|
return newPointAry;
|
},
|
drawImg: function () {
|
var _this = this;
|
_this.context.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
|
_this.context.drawImage(_this.img, 0, 0, _this.img.naturalWidth, _this.img.naturalHeight, _this.imgX, _this.imgY, _this.img.naturalWidth * _this.imgScale * _this.rateNum, _this.img.naturalHeight * _this.imgScale * _this.rateNum);
|
var trueMeasure = ts2;
|
var trueLength = new Number(trueMeasure[0]);
|
var trueWidth = new Number(trueMeasure[1]);
|
var x_ratio = new Number(_this.img.naturalWidth / trueLength);
|
var y_ratio = new Number(_this.img.naturalHeight / trueWidth);
|
var can = _this.context;
|
var x_x0 = new Number(ts1[0]);
|
var y_y0 = new Number(ts1[1]);
|
|
//轨迹拖尾
|
can.beginPath();
|
can.fillStyle = "red";
|
can.strokeStyle = "red";
|
can.lineWidth = 3;
|
for (var i = 0; i < _this.playIndex - 1; i++) {
|
var cor_x = new Number(_this.playTrack[i].x);
|
var cor_y = new Number(_this.playTrack[i].y);
|
|
var x_cor = new Number(_this.imgX + _this.imgScale * _this.rateNum * x_ratio * (cor_x - x_x0));
|
var y_cor = new Number(_this.imgY + _this.imgScale * _this.rateNum * y_ratio * (cor_y - y_y0));
|
var cor_x2 = new Number(_this.playTrack[i + 1].x);
|
var cor_y2 = new Number(_this.playTrack[i + 1].y);
|
var x_cor2 = new Number(_this.imgX + _this.imgScale * _this.rateNum * x_ratio * (cor_x2 - x_x0));
|
var y_cor2 = new Number(_this.imgY + _this.imgScale * _this.rateNum * y_ratio * (cor_y2 - y_y0));
|
|
can.moveTo(x_cor, y_cor);
|
can.lineTo(x_cor2, y_cor2);
|
}
|
can.closePath();
|
can.stroke();
|
|
//实时轨迹点
|
if (_this.playMark) {
|
var can = _this.context;
|
var cor_x = new Number(_this.playMark.x);
|
var cor_y = new Number(_this.playMark.y);
|
var zuobiao = _this.playMark.x + "," + _this.playMark.y;
|
|
var x_cor = new Number(_this.imgX + _this.imgScale * _this.rateNum * x_ratio * (cor_x - x_x0));
|
var y_cor = new Number(_this.imgY + _this.imgScale * _this.rateNum * y_ratio * (cor_y - y_y0));
|
|
var img = new Image();
|
img.src = '/hxzkuwb/Icon/' + _this.playMark.image;
|
var wid = img.width;
|
var hei = img.height;
|
can.fillStyle = "#FF423E";
|
can.fill();
|
can.strokeStyle = "#FFF";
|
can.drawImage(img, x_cor - 20, y_cor - 40, 40, 40);
|
can.fillStyle = 'rgba(0, 0, 0, 0.5)';
|
can.fillRect(x_cor - wid, y_cor - hei - 23, wid + 50, 20);
|
can.fillRect(x_cor - wid - 30, y_cor - hei + 40, wid + 130, 20);
|
can.fillStyle = 'white';
|
can.font = '12px sans-serif';
|
can.fillText(_this.playMark.baoliu8 + " " + _this.playMark.tagid, x_cor - wid + 10, y_cor - hei - 8);
|
can.fillText(_this.playMark.time, x_cor - 55, y_cor + 15);
|
}
|
if (_this.allMarkLins.length) {
|
for (var m = 0; m < _this.allMarkLins.length; m++) {
|
var points = _this.allMarkLins[m];
|
var newPoints = _this.getNewPoints(points);
|
for (var i = 0; i < newPoints.length; i++) {
|
var can = _this.context;
|
can.beginPath();
|
can.arc(newPoints[i].x, newPoints[i].y, 6, 0, Math.PI * 2, true);
|
can.fillStyle = "#FF423E";
|
can.fill();
|
can.strokeStyle = "#FFF";
|
can.stroke();//画空心圆
|
can.closePath();
|
|
if (points.length >= 2 && i >= 1) {
|
can.strokeStyle = "#FF423E";
|
can.lineWidth = 2;
|
can.beginPath();
|
can.moveTo(newPoints[i - 1].x, newPoints[i - 1].y);
|
can.lineTo(newPoints[i].x, newPoints[i].y);
|
can.fillStyle = "#ff0000";
|
can.fill();
|
can.stroke();
|
can.closePath();
|
}
|
}
|
if (points.length >= 3) {
|
can.strokeStyle = "#FF423E";
|
can.lineWidth = 2;
|
can.beginPath();
|
can.moveTo(newPoints[newPoints.length - 1].x, newPoints[newPoints.length - 1].y);
|
can.lineTo(newPoints[0].x, newPoints[0].y);
|
can.stroke();
|
can.closePath();
|
}
|
}
|
;
|
}
|
|
},
|
init: function () {
|
var _this = this;
|
_this.canvas.onmousedown = function (event) {
|
_this.clickDown(event);
|
};
|
_this.canvas.onmousemove = function (event) {
|
_this.mouseMove(event)
|
};
|
_this.canvas.onmouseup = function (event) {
|
_this.mouseUp(event);
|
};
|
_this.canvas.onmousewheel = function (event) {
|
_this.onmouseWheel(event);
|
};
|
document.getElementById('search').onclick = function () {
|
var type = $("#cxList").val()
|
if(type == "百度地图"){
|
baiDuGuiJi()
|
}else{
|
if(localStorage.getItem("ChaXunGuiJi") == "进行中"){
|
layer.msg("当前正在进行中，请稍后在进行查询")
|
return;
|
}
|
var tagid = $("#tagid").val();
|
console.log(tagid)
|
if (tagid == ""){
|
layer.msg("请输入设备ID")
|
return;
|
}
|
$(".heimu").show();
|
$(".heimu1").show();
|
var tagTrack = "";
|
setTimeout(function (){
|
tagTrack = queryTagid();
|
zongtiao = tagTrack.length-2;
|
tiao = 0;
|
if (tagTrack.length == 0) {
|
$(".heimu").hide();
|
$(".heimu1").hide();
|
alert("搜索的ID不在当前时间段！");
|
document.getElementById("tagid").value = "";
|
} else {
|
$("#search").css("background-color","green")
|
_this.playTrack = tagTrack;
|
_this.TrackPlay();
|
//_this.MarkBorderline();
|
};
|
},1000)
|
}
|
|
|
};
|
document.getElementById("pause").onclick = function () {
|
var tall = $("#pause").text();
|
if (tall == "暂停"){
|
_this.playFlag = false;
|
window.clearInterval(timer);
|
$("#pause").text("继续")
|
}else{
|
|
_this.playFlag = true;
|
_this.TrackPlay();
|
$("#pause").text("暂停")
|
}
|
};
|
},
|
/*计算当前鼠标位置距离canvas的偏移量*/
|
xyToCanvas: function (ele, x, y) {
|
var _this = this;
|
var obj = _this.canvas.getBoundingClientRect();
|
return {
|
x: x - obj.left,
|
y: y - obj.top
|
};
|
},
|
/*鼠标单击事件*/
|
clickDown: function (event) {
|
var _this = this;
|
if (_this.markFlag) {
|
_this.canvas.style.cursor = "none";
|
if (event.button == 2) {
|
_this.markFlag = false;
|
_this.dragFlag = true;
|
_this.canvas.style.cursor = "normal";
|
_this.drawImg();
|
return;
|
} else {
|
var posXY = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
|
posXY.x = (posXY.x - _this.imgX) / _this.imgScale;
|
posXY.y = (posXY.y - _this.imgY) / _this.imgScale;
|
_this.CreatLinepoints.push(posXY);
|
_this.allMarkLins.pop();
|
_this.allMarkLins.push(_this.CreatLinepoints);
|
_this.drawImg();
|
}
|
return;
|
}
|
if (event.button == 0) {//点击鼠标左键
|
_this.dragFlag = true;
|
_this.canvas.style.cursor = "move";
|
_this.pos = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
|
}
|
},
|
/*鼠标移动事件*/
|
mouseMove: function (event) {
|
var _this = this;
|
/*拖拽*/
|
if (_this.dragFlag) {
|
_this.canvas.style.cursor = "move";
|
var pos1 = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
|
var x = pos1.x - _this.pos.x;
|
var y = pos1.y - _this.pos.y;
|
_this.pos = pos1;
|
_this.imgX += x;
|
_this.imgY += y;
|
_this.drawImg();
|
}
|
|
/*边界标记*/
|
|
if (!_this.dragFlag && _this.markFlag) {
|
var pos1 = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
|
var can = _this.context;
|
can.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
|
_this.drawImg();
|
/*画跟随圆点*/
|
can.beginPath();
|
// can.fillText('[' + point.x + ', ' + point.y + ']', 15, 25 * (points.length + 1))
|
can.arc(pos1.x, pos1.y, 6, 0, Math.PI * 2, true);
|
can.fillStyle = "#FF423E";
|
can.fill();
|
can.strokeStyle = "#FFF";
|
can.stroke();//画空心圆
|
can.closePath();
|
|
/*当前的坐标未结束那么继续 跟随直线*/
|
if (!_this.CreatLinepoints.length) return;
|
can.strokeStyle = "red";
|
can.beginPath();
|
can.moveTo(_this.CreatLinepoints[_this.CreatLinepoints.length - 1].x * _this.imgScale + _this.imgX, _this.CreatLinepoints[_this.CreatLinepoints.length - 1].y * _this.imgScale + _this.imgY);
|
can.lineTo(pos1.x, pos1.y);
|
console.log(pos1.x,pos1.y)
|
can.stroke();
|
can.closePath();
|
}
|
},
|
/*鼠标放开事件*/
|
mouseUp: function (event) {
|
var _this = this;
|
_this.dragFlag = false;
|
if (_this.markFlag) {
|
_this.canvas.style.cursor = "none";
|
return;
|
}
|
_this.canvas.style.cursor = 'default';
|
|
},
|
/*鼠标滚轮事件*/
|
onmouseWheel: function (event) {
|
var _this = this;
|
var pos = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
|
event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltaY * (-40));
|
if (event.wheelDelta > 0 && _this.scaleFlag < 9) {
|
_this.imgScale *= 1.25;
|
_this.imgX = _this.imgX * 1.25 - 0.25 * pos.x;
|
_this.imgY = _this.imgY * 1.25 - 0.25 * pos.y;
|
_this.scaleFlag += 1;
|
}
|
if (event.wheelDelta < 0 && _this.scaleFlag > -9) {//缩小
|
_this.imgScale *= 0.8;
|
_this.imgX = _this.imgX * 0.8 + pos.x * 0.2;
|
_this.imgY = _this.imgY * 0.8 + pos.y * 0.2;
|
_this.scaleFlag -= 1;
|
}
|
_this.drawImg();
|
},
|
/*边界标记*/
|
MarkBorderline: function () {
|
var _this = this;
|
_this.markFlag = true;//切换为true，禁止拖拽，只能标记
|
_this.canvas.style.cursor = "none";
|
_this.CreatLinepoints = [];
|
_this.allMarkLins.push([]);
|
},
|
/*顺序播放坐标*/
|
TrackPlay: function () {
|
if (tiao == zongtiao-1){
|
tiao = 0;
|
}
|
var _this = this;
|
_this.playFlag = true;
|
_this.playIndex = 0;
|
if (_this.playFlag) {
|
var t = 1000;
|
timer = setInterval(fn, t);
|
function fn() {
|
var speed = document.getElementById("bofangsudu").value;
|
if (speed =="1"){
|
setTimeout(function(){
|
|
},3000)
|
}
|
if (speed =="2"){
|
setTimeout(function(){
|
|
},2000)
|
}
|
if (speed =="4"){
|
setTimeout(function(){
|
|
},1000)
|
}
|
if (speed =="6"){
|
setTimeout(function(){
|
|
},500)
|
}
|
if (speed =="8"){
|
|
}
|
if (_this.playFlag && _this.playIndex < _this.playTrack.length) {
|
_this.ShowNode(_this.playTrack[_this.playIndex]);
|
_this.playIndex += 1;
|
};
|
|
|
$("#data1").text(tiao+1+"/"+zongtiao)
|
if(tiao == zongtiao-1){
|
console.log("满足")
|
clearInterval(timer);
|
|
localStorage.setItem("ChaXunGuiJi","执行完")
|
return
|
}else{
|
localStorage.setItem("ChaXunGuiJi","进行中")
|
}
|
$(".data2").text(_this.playTrack[_this.playIndex].baoliu8);
|
$(".data3").text(_this.playTrack[_this.playIndex].tagid);
|
$(".data4").text(_this.playTrack[_this.playIndex].baoliu2);
|
$(".data5").text(_this.playTrack[_this.playIndex].baoliu3);
|
$(".data6").text("暂无数据");
|
$(".data7").text("暂无数据");
|
$(".data8").text(_this.playTrack[_this.playIndex].x);
|
$(".data9").text(_this.playTrack[_this.playIndex].y);
|
$(".data10").text(_this.playTrack[_this.playIndex].z);
|
$(".data11").text(_this.playTrack[_this.playIndex].baoliu7);
|
$(".data12").text(_this.playTrack[_this.playIndex].time);
|
|
$(".heimu").hide();
|
$(".heimu1").hide();
|
tiao += 1
|
clearInterval(timer);
|
if (_this.playIndex == _this.playTrack.length - 1) {
|
clearInterval(timer);
|
_this.playIndex = 0;
|
} else {
|
var stime = new Date(_this.playTrack[_this.playIndex].time).getTime();
|
var etime = new Date(_this.playTrack[_this.playIndex + 1].time).getTime();
|
var t = etime - stime;
|
var t_v = t / speed;
|
timer = setInterval(fn, t_v);
|
}
|
};
|
} else { clearInterval(timer); console.log("777777777776") }
|
},
|
/*画点*/
|
ShowNode: function (node_list) {
|
var _this = this;
|
var can = _this.context;
|
can.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
|
|
_this.playMark = node_list;
|
_this.drawImg();
|
},
|
}
|
//var imgUrl = '../image/mapfile/led.png';//图片路径
|
//new MarkPoints(imgUrl);
|
const canvas = document.getElementById('draw');
|
canvas.addEventListener('click', getMousePosition, false);
|
|
function getMousePosition(event) {
|
const rect = canvas.getBoundingClientRect();
|
const x = event.clientX - rect.left;
|
const y = event.clientY - rect.top;
|
console.log("X坐标: " + x + ", Y坐标: " + y);
|
}
|
