<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
|
<html lang="en">
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
|
<title>绘制围栏</title>
|
<link rel="icon" type="image/x-icon" href="/hxzkoa/hxzk/assets/img/favicon.ico"/>
|
<link href="/hxzkoa/hxzk/assets/css/loader.css" rel="stylesheet" type="text/css" />
|
<script src="/hxzkoa/hxzk/assets/js/loader.js"></script>
|
|
<!-- BEGIN GLOBAL MANDATORY STYLES -->
|
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,600,700&display=swap" rel="stylesheet">
|
<link href="/hxzkoa/hxzk/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/assets/css/main.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/plugins/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/assets/css/structure.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/plugins/highlight/styles/monokai-sublime.css" rel="stylesheet" type="text/css" />
|
<!-- END GLOBAL MANDATORY STYLES -->
|
|
<!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM STYLES -->
|
<link href="/hxzkoa/hxzk/assets/css/elements/search.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/plugins/apex/apexcharts.css" rel="stylesheet" type="text/css">
|
<link href="/hxzkoa/hxzk/assets/css/dashboard/dash_2.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/assets/css/elements/custom-pagination.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/assets/css/components/custom-modal.css" rel="stylesheet" type="text/css" />
|
<!-- END PAGE LEVEL PLUGINS/CUSTOM STYLES -->
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
|
<link rel="stylesheet" type="text/css" href="/hxzkoa/hxzk/plugins/table/datatable/datatables.css">
|
<link rel="stylesheet" type="text/css" href="/hxzkoa/hxzk/plugins/table/datatable/custom_dt_html5.css">
|
<link rel="stylesheet" type="text/css" href="/hxzkoa/hxzk/plugins/table/datatable/dt-global_style.css">
|
<style>
|
.panel-head{
|
font-size: 1rem; color: rgba(255,255,255,.7); line-height: 2rem; text-align: center;
|
background: linear-gradient(rgb(0,20,30), rgb(0,40,70));
|
border: 2px solid rgba(0,90,120,.3);
|
}
|
.table-bordered td, .table-bordered th { border: 1px solid #ebedf2; }
|
|
|
.canvasWrap {width: 100%; height: 100%}
|
.mark_list{ position: absolute; top: 20px; right: 10px; }
|
.mark_list li{
|
float: left;
|
width: 100px;
|
border-radius: 4px;
|
border: 1px solid #ccc;
|
list-style: none;
|
line-height: 30px;
|
text-align: center;
|
color:#333;
|
background: #fff;
|
cursor: pointer;
|
}
|
.mark_list li:hover{
|
background: #009a8f;
|
color:#fff;
|
}
|
|
</style>
|
</head>
|
<body class="alt-menu sidebar-noneoverflow">
|
|
<!-- BEGIN LOADER -->
|
<div id="load_screen"> <div class="loader"> <div class="loader-content">
|
<div class="spinner-grow align-self-center"></div>
|
</div></div></div>
|
<!-- END LOADER -->
|
<div class="border-left" style="opacity:0.4;float:left;position:absolute;z-index:1;left:120px;height:20px;"><img alt="" src="/hxzkoa/resources/images/border.png" class="img-left"></div>
|
<div class="border-right" style="opacity:0.4;float:right;position:absolute;z-index:2;right:120px;"><img alt="" src="/hxzkoa/resources/images/border2.png" class="img-right"></div>
|
<!-- BEGIN NAVBAR -->
|
<div class="login-page"></div>
|
<!-- END NAVBAR -->
|
|
<!-- BEGIN TOPBAR -->
|
<div class="header-page"></div>
|
<!-- END TOPBAR -->
|
|
<!-- BEGIN CONTENT PART -->
|
<div id="content" class="main-content">
|
<div class="layout-px-spacing">
|
<div class="row layout-top-spacing" id="cancel-row">
|
<div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
|
<div class="widget-content widget-content-area br-6">
|
<div class="table-responsive mb-4 mt-4" style="height:600px;">
|
<div style="width:20%;height:600px;float:left">
|
<div style="margin-left:20px;padding:10px;width:100%;">
|
<label for="exampleFormControlInput1">选择图层:</label>
|
<select id="chooselayer" onchange="floorChange()" class="form-control form-control-lg" style="width:60%;font-size: 12px;padding: 5px 5px">
|
<option value="null">请选择</option>
|
<c:forEach items="${floorList}" var="floor">
|
<option value="${floor.floor}">${floor.floor} </option>
|
</c:forEach>
|
</select></div>
|
<div style="margin-left:20px;padding:10px;width:100%;">
|
<label for="exampleFormControlInput1">围栏类型:</label>
|
<select id="weilanleixing" class="form-control form-control-lg" style="width:60%;font-size: 12px;padding: 5px 5px">
|
<option value="考勤区域">考勤区域</option>
|
<option value="进入告警">进入告警</option>
|
<option value="出去告警">出去告警</option>
|
<option value="巡检区域">巡检区域</option>
|
<option value="定位区域">定位区域</option>
|
<option value="室内区域">室内区域</option>
|
<option value="切换区域">切换区域</option>
|
<option value="视频区域">视频区域</option>
|
</select></div>
|
<div style="margin-left:20px;padding:10px;width:100%;">
|
<label for="exampleFormControlInput1">关联对象:</label>
|
<select id="guanlianduixiang" class="form-control form-control-lg" style="width:60%;font-size: 12px;padding: 5px 5px">
|
<option value="系统默认">系统默认</option>
|
<option value="测试部">测试部</option>
|
</select></div>
|
<div style="margin-left:20px;padding:10px;width:100%;">
|
<label for="exampleFormControlInput1">区域名称:</label>
|
<input class="form-control" type="text" id="quyumingcheng" style="width:60%;font-size: 12px;padding: 5px 5px"></div>
|
<div style="margin-left:20px;padding:10px;width:100%;">
|
<div class="custom-control custom-radio custom-control-inline">
|
<input type="radio" id="矩形" name="draw_shape" class="custom-control-input" value="矩形" checked="true">
|
<label class="custom-control-label" for="矩形">矩形</label>
|
</div>
|
<div class="custom-control custom-radio custom-control-inline">
|
<input type="radio" id="多边形" name="draw_shape" class="custom-control-input" value="多边形">
|
<label class="custom-control-label" for="多边形">多边形</label>
|
</div>
|
</div>
|
<div style="margin-left:20px;padding:10px;width:100%;"><label for="exampleFormControlInput1">围栏颜色:</label>
|
<select id="fence_color" onchange="getColor()" class="form-control form-control-lg" style="width:50%;font-size: 12px;padding: 5px 5px">
|
<option value="红色">红色</option>
|
<option value="绿色">绿色</option>
|
<option value="蓝色">蓝色</option>
|
<option value="黑色">黑色</option>
|
<option value="白色">白色</option>
|
</select></div>
|
<div align="left" style="margin-top:20px">
|
<button type="button" class="btn btn-secondary" id="begin_draw">绘制</button>
|
<button type="button" class="btn btn-secondary" id="save_fence">保存</button>
|
<button type="button" class="btn btn-secondary" id="cancel_draw">取消</button>
|
</div>
|
<div style="margin-top:20px">
|
<label id="draw_hint">请点击绘制按钮开始绘制围栏</label>
|
</div>
|
</div>
|
<div id="wrap" style="width:78%;height:600px;float:right">
|
<canvas id="draw"></canvas>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
</div>
|
<!-- END CONTENT PART -->
|
|
</div>
|
<!-- END MAIN CONTAINER -->
|
<%
|
String username=(String)session.getAttribute("username");
|
if(username==null || username.equals("")){
|
request.getRequestDispatcher("/hxzk/login.jsp").forward(request,response);
|
return;
|
}
|
%>
|
<!-- > BEGIN PAGE FUNCTION SCRIPTS -->
|
<script type="text/javascript">
|
$(document).ready(function() {
|
var str = "${msg}";
|
if (str != "") {
|
alert(str);
|
}
|
});
|
|
function pleasecheck() {
|
var inputObj = document.createElement('input')
|
inputObj.setAttribute('id', '_ef');
|
inputObj.setAttribute('type', 'file');
|
inputObj.setAttribute("style", 'visibility:hidden');
|
document.body.appendChild(inputObj);
|
inputObj.click();
|
inputObj.value;//所选文件的路径及文件名
|
alert(inputObj.value);
|
};
|
|
function floorChange(){
|
// when change floor num, the map will also change.
|
var select_value = document.getElementById("chooselayer").value;
|
|
console.log(select_value);
|
$.ajax({
|
async:false,
|
type:'POST',
|
url:"/hxzkoa/floornumTomap.do",
|
dataType: 'json',
|
data:{
|
value:select_value
|
},
|
success:function(data){
|
console.log(data);
|
console.log(data[0].mapname);
|
imgUrl = '/hxzkoa/hxzk/image/mapfile/'+data[0].mapname;
|
// imgUrl = '/hxzkoa/hxzk/image/mapfile/office.jpg';
|
new MarkPoints(imgUrl);
|
}
|
})
|
};
|
|
function getShape() {
|
var radio = document.getElementsByName("draw_shape");
|
for (i=0; i < radio.length; i++){
|
if (radio[i].checked) {
|
console.log(radio[i].value)
|
return radio[i].value
|
}
|
}
|
alert("请选择绘画类型！");
|
return null;
|
};
|
|
function getColor() {
|
var select_color = document.getElementById("fence_color");
|
var color = select_color.value;
|
return color;
|
};
|
|
function getYuandian(){
|
var floor = document.getElementById("chooselayer").value;
|
var map_wl = [];
|
$.ajax({
|
async:false,
|
type:"POST",
|
url:"/hxzkoa/floornumTomap.do",
|
dataType:'json',
|
data:{
|
value:floor
|
},
|
success:function(data){
|
yuandian = [data[0].x0_length, data[0].y0_width];
|
},
|
});
|
return yuandian;
|
};
|
|
function getTruemap(){
|
var floor = document.getElementById("chooselayer").value;
|
var map_wl = [];
|
$.ajax({
|
async:false,
|
type:"POST",
|
url:"/hxzkoa/floornumTomap.do",
|
dataType:'json',
|
data:{
|
value:floor
|
},
|
success:function(data){
|
map_wl = [data[0].x_Truelength, data[0].y_Truewidth];
|
},
|
});
|
return map_wl;
|
};
|
|
function getExistFence(leixing){
|
var floor = document.getElementById("chooselayer").value;
|
var fencelist = [];
|
var fencecolor = [];
|
var fencename = [];
|
$.ajax({
|
async:false,
|
type:'POST',
|
url:"/hxzkoa/getFloorFence.do",
|
dataType: 'json',
|
data:{
|
value:floor
|
},
|
success:function(data){
|
//console.log(data);
|
for (var i=0;i<data.length;i++){
|
fencelist.push(data[i].zuobiao);
|
fencecolor.push(data[i].color);
|
fencename.push(data[i].name);
|
}}
|
});
|
if (leixing == "zuobiao"){
|
return fencelist
|
} else if (leixing =="color"){
|
return fencecolor
|
} else if (leixing == "name"){
|
return fencename
|
};
|
|
};
|
|
function getDrawColor(yanse){
|
var color;
|
if (yanse == "红色"){
|
var color = "rgba(255,0,0,0.3)";
|
} else if (yanse == "绿色"){
|
var color = "rgba(0,255,0,0.3)";
|
} else if (yanse == "蓝色"){
|
var color = "rgba(0,0,255,0.3)";
|
} else if (yanse == "白色") {
|
var color = "rgba(255,255,255,0.3)";
|
} else if (yanse == "黑色") {
|
var color = "rgba(0,0,0,0.3)";
|
}
|
return color
|
}
|
|
</script>
|
|
<script>
|
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.pos={};//每次拖拽前坐标保存
|
this.dragFlag=false;//是否可拖拽当前img，默认不能
|
this.markFlag=false;//标记区域开启关闭flag
|
this.CreatLinepoints = [];//每次创建新区域的坐标集合
|
this.CreateLineColor = [];//每次创建新区域的颜色
|
this.allMarkLins = [];//已创建的区域集合，例如[[{x,y},{x,y},{x,y}],[{n,m},{n,m},{n,m}]]目前只需要一个区域，所以数组内部只有一项
|
this.allFenceColor = [];//已创建的区域颜色
|
this.existFence = [];
|
this.existFenceColor = [];
|
this.existFenceName = [];
|
<!-- 读取数据库中的所有围栏 进行绘制 此处加上颜色及形状 -->
|
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);
|
// console.log("original width", _this.img.naturalWidth);
|
// console.log("original height", _this.img.naturalHeight);
|
// console.log("pianyi", _this.imgX, _this.imgY);
|
// console.log("ratenum",_this.rateNum);
|
// console.log("imagescale", _this.imgScale);
|
_this.FenceList = getExistFence("zuobiao");
|
_this.FenceColor = getExistFence("color");
|
_this.FenceName = getExistFence("name");
|
var x_x0 = new Number(getYuandian()[0]);
|
var y_y0 = new Number(getYuandian()[1]);
|
var trueMeasure = getTruemap();
|
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);
|
|
// console.log(_this.FenceList);
|
// console.log(_this.FenceColor);
|
// console.log(_this.FenceName);
|
|
if (_this.FenceList.length){
|
//遍历每个fence，并画出
|
for (var m = 0; m < _this.FenceList.length; m++) {
|
var points = _this.FenceList[m];
|
var points_list = _this.FenceList[m].split(",");//围栏实际坐标
|
var draw_points_list = [];
|
var tmp_list = [];
|
console.log(points_list);
|
//实际坐标转成图上坐标
|
for (var i=0; i<points_list.length; i++){
|
if (i%2 ==0){
|
//偶数坐标，即x坐标
|
tmp_list = [];
|
var tmp_point = new Number(_this.imgX + _this.imgScale * _this.rateNum * x_ratio * (points_list[i]-x_x0));
|
//var tmp_point = new Number( _this.imgScale * _this.rateNum * x_ratio * (points_list[i]));
|
tmp_list.push(tmp_point);
|
} else {
|
var tmp_point = new Number(_this.imgY + _this.imgScale * _this.rateNum * y_ratio * (points_list[i]-y_y0));
|
//var tmp_point = new Number( _this.imgScale * _this.rateNum * y_ratio * (points_list[i]));
|
tmp_list.push(tmp_point);
|
draw_points_list.push(tmp_list);
|
}
|
}
|
//console.log(draw_points_list);
|
//var color = _this.FenceColor[m];
|
var color = getDrawColor(_this.FenceColor[m]);
|
var name = _this.FenceName[m];
|
|
if (draw_points_list.length==2){
|
//console.log("draw rect");
|
//console.log(draw_points_list);
|
var can = _this.context;
|
can.beginPath();
|
can.fillStyle = color;
|
can.fillRect(draw_points_list[0][0],draw_points_list[0][1],draw_points_list[1][0]-draw_points_list[0][0],draw_points_list[1][1]-draw_points_list[0][1]);
|
can.stroke();
|
can.fillStyle = "red";
|
can.fillText(name,(draw_points_list[0][0]+draw_points_list[1][0])/2, (draw_points_list[0][1]+draw_points_list[1][1])/2 );
|
can.closePath();
|
} else {
|
//console.log("draw poly");
|
var can = _this.context;
|
can.beginPath();
|
can.fillStyle = color;
|
can.lineWidth = 2;
|
// console.log(draw_points_list);
|
var text_x = new Number(0);
|
var text_y = new Number(0);
|
for (var j=0; j<draw_points_list.length; j++){
|
if (j==0){
|
can.moveTo(draw_points_list[j][0], draw_points_list[j][1]);
|
} else {
|
//can.moveTo(draw_points_list[j-1][0], draw_points_list[j-1][1]);
|
can.lineTo(draw_points_list[j][0], draw_points_list[j][1]);
|
}
|
if (j==draw_points_list.length-1){
|
//can.moveTo(draw_points_list[j][0], draw_points_list[j][1]);
|
can.lineTo(draw_points_list[0][0], draw_points_list[0][1]);
|
can.fill();
|
}
|
text_x = text_x+draw_points_list[j][0];
|
text_y = text_y+draw_points_list[j][1];
|
|
}
|
text_x = text_x / draw_points_list.length;
|
text_y = text_y / draw_points_list.length;
|
|
can.fillStyle = color;
|
can.fill();
|
can.strokeStyle = color;
|
can.stroke();
|
can.fillStyle="red";
|
// console.log(text_x, text_y);
|
can.fillText(name,text_x, text_y);
|
can.closePath();
|
|
}
|
|
};
|
};
|
|
if ( _this.allMarkLins.length) {
|
//console.log("length",_this.allMarkLins)
|
for (var m = 0; m < _this.allMarkLins.length; m++) {
|
var color = _this.allFenceColor[m];
|
//var color = getDrawColor(_this.allFenceColor[m]);
|
//console.log(_this.allFenceColor[m], color);
|
var points = _this.allMarkLins[m];
|
//console.log("points", points);
|
var newPoints = _this.getNewPoints(points);
|
//console.log("newpoints", newPoints);
|
if (points.length == 2 && getShape() =="矩形"){ // draw rectangle
|
if (m==_this.allMarkLins.length-1 && _this.markFlag){
|
if (getShape() =="矩形") {
|
for (var i = 0; i < newPoints.length; i++) {
|
//console.log("new",newPoints);
|
var can = _this.context;
|
can.beginPath();
|
can.arc(newPoints[i].x, newPoints[i].y, 6, 0, Math.PI * 2, true);
|
can.fillStyle = color;
|
can.fill();
|
can.strokeStyle = "#FFF";
|
can.stroke();//画空心圆
|
can.closePath();
|
|
if (points.length >= 2 && i >= 1) {
|
can.strokeStyle = color;
|
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 = color;
|
can.fill();
|
can.stroke();
|
can.closePath();
|
};
|
}
|
}
|
} else {
|
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 = color;
|
can.fill();
|
can.strokeStyle = "#FFF";
|
can.stroke();//画空心圆
|
can.closePath();
|
|
if (i >= 1) {
|
can.strokeStyle = color;
|
can.lineWidth = 2;
|
can.beginPath();
|
//can.moveTo(newPoints[i - 1].x, newPoints[i - 1].y);
|
//can.lineTo(newPoints[i].x, newPoints[i].y);
|
x = newPoints[i - 1].x;
|
y = newPoints[i - 1].y;
|
wid = newPoints[i].x - x;
|
hei = newPoints[i].y - y;
|
//can.fillStyle = color;
|
//can.fill();
|
can.fillRect(x,y,wid,hei);
|
can.stroke();
|
can.closePath();
|
};
|
}
|
}
|
} else { // draw polygen
|
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 = color;
|
can.fill();
|
can.strokeStyle = "#FFF";
|
can.stroke();//画空心圆
|
can.closePath();
|
|
if (points.length >= 2 && i >= 1) {
|
can.strokeStyle = color;
|
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 = color;
|
can.fill();
|
can.stroke();
|
can.closePath();
|
};
|
}
|
}
|
if (points.length >= 3) {
|
can.strokeStyle = color;
|
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('begin_draw').onclick=function () {
|
console.log(_this.CreatLinepoints);
|
if (_this.CreatLinepoints.length==0){
|
var shape_value = getShape();
|
if (shape_value){
|
$("#draw_hint").html("请在地图上单击鼠标左键进行封闭围栏绘制");
|
_this.MarkBorderline();
|
}
|
} else {
|
alert("请先保存当前绘制围栏！")
|
}
|
};
|
document.getElementById('save_fence').onclick=function(){
|
_this.saveDB();
|
}
|
document.getElementById("cancel_draw").onclick=function (){
|
_this.deleteArea();
|
$("#draw_hint").html("请点击绘制按钮开始绘制围栏");
|
};
|
},
|
/*计算当前鼠标位置距离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";
|
//var color = getColor();
|
var color = getDrawColor(getColor());
|
var shape = getShape();
|
|
if (shape == "多边形") {
|
// console.log(_this.CreatLinepoints);
|
if (_this.CreatLinepoints.length >= 3) {
|
start_x = _this.CreatLinepoints[0].x;
|
start_y = _this.CreatLinepoints[0].y;
|
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;
|
now_x = posXY.x;
|
now_y = posXY.y;
|
/* console.log(now_x, now_y);
|
console.log("length",_this.CreatLinepoints.length); */
|
if ( Math.abs(now_x-start_x)<=5 && Math.abs(now_y-start_y)<=5) { //连成闭合图形时（代替原鼠标右键）
|
console.log("close");
|
$("#draw_hint").html("绘制完成，请点击保存，放弃绘制请点击取消");
|
_this.CreateLineColor.push(color);
|
|
_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);
|
console.log("add", posXY);
|
_this.allMarkLins.pop();
|
_this.allMarkLins.push(_this.CreatLinepoints);
|
_this.allFenceColor.pop();
|
_this.allFenceColor.push(color);
|
|
_this.drawImg(); }
|
} 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.allFenceColor.pop();
|
_this.allFenceColor.push(color);
|
|
_this.drawImg();
|
//return;
|
}
|
|
} else if (shape == "矩形") {
|
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.allFenceColor.pop();
|
_this.allFenceColor.push(color);
|
|
console.log(_this.CreatLinepoints,_this.CreateLineColor, _this.allMarkLins, _this.allFenceColor);
|
|
_this.drawImg();
|
|
if (_this.CreatLinepoints.length == 2){
|
$("#draw_hint").html("绘制完成，请点击保存，放弃绘制请点击取消");
|
_this.CreateLineColor.push(color);
|
|
_this.markFlag = false;
|
_this.dragFlag = true;
|
_this.canvas.style.cursor = "normal";
|
_this.drawImg();
|
//console.log(_this.CreatLinepoints);
|
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 color = getColor();
|
var color = getDrawColor(getColor());
|
var shape = getShape();
|
if ( shape == "多边形" ){
|
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 = color;
|
can.fill();
|
can.strokeStyle = "#FFF";
|
can.stroke();//画空心圆
|
can.closePath();
|
|
/*当前的坐标未结束那么继续 跟随直线*/
|
if (!_this.CreatLinepoints.length) return;
|
can.strokeStyle = color;
|
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);
|
can.stroke();
|
can.closePath();
|
} else if (shape == "矩形") {
|
var pos1 = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
|
var can = _this.context;
|
console.log(pos1);
|
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 = color;
|
can.fill();
|
can.strokeStyle = "#FFF";
|
can.stroke();//画空心圆
|
can.closePath();
|
|
/*当前的坐标未结束那么继续 跟随直线*/
|
if (!_this.CreatLinepoints.length) return;
|
can.strokeStyle = color;
|
can.beginPath();
|
x = _this.CreatLinepoints[_this.CreatLinepoints.length - 1].x * _this.imgScale + _this.imgX;
|
y = _this.CreatLinepoints[_this.CreatLinepoints.length - 1].y * _this.imgScale + _this.imgY;
|
wid = pos1.x - x;
|
hei = pos1.y - y;
|
can.fillRect(x,y,wid,hei);
|
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([]);
|
_this.allFenceColor.push([]);
|
},
|
/*删除标记区域*/
|
deleteArea: function () {
|
var _this = this;
|
_this.CreatLinepoints = [];
|
_this.allMarkLins.splice(-1, 1);
|
_this.allFenceColor.splice(-1, 1);
|
_this.drawImg();
|
},
|
/*保存区域*/
|
saveDB: function() {
|
var _this = this;
|
var layer = document.getElementById("chooselayer").value;
|
var weilanleixing = document.getElementById("weilanleixing").value;
|
var guanlianduixiang = document.getElementById("guanlianduixiang").value;
|
var quyumingcheng = document.getElementById("quyumingcheng").value;
|
var xingzhuang = getShape();
|
var yanse = getColor();
|
var x_x0 = new Number(getYuandian()[0]);
|
var y_y0 = new Number(getYuandian()[1]);
|
var trueMeasure = getTruemap();
|
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 zuobiao = _this.CreatLinepoints;
|
console.log(zuobiao);
|
var real_zuobiao = [];
|
for (i=0; i<zuobiao.length; i++){
|
//var real_x = (new Number(zuobiao[i].x)) / (_this.imgScale * _this.rateNum * x_ratio);
|
var real_x = (new Number(zuobiao[i].x)) / (_this.rateNum * x_ratio) +x_x0;
|
real_x = real_x.toFixed(0);
|
console.log(zuobiao[i].x, real_x);
|
//var real_y = (new Number(zuobiao[i].y)) / (_this.imgScale * _this.rateNum * y_ratio);
|
var real_y = (new Number(zuobiao[i].y)) / (_this.rateNum * y_ratio) +y_y0;
|
real_y = real_y.toFixed(0)
|
real_zuobiao.push(real_x, real_y);
|
}
|
console.log(layer, weilanleixing, guanlianduixiang, quyumingcheng, xingzhuang, yanse, real_zuobiao);
|
var existName = getExistFence("name");
|
if (existName.includes(quyumingcheng)) {
|
alert(quyumingcheng+"已经存在不能重复添加！")
|
} else if (!quyumingcheng) {
|
alert("请输入区域名称！")
|
}else {
|
$.ajax({
|
type:'POST',
|
url:'/hxzkoa/saveFence.do',
|
dataType:'json',
|
data:{
|
layer:layer,
|
weilanleixing:weilanleixing,
|
guanlianduixiang:guanlianduixiang,
|
quyumingcheng:quyumingcheng,
|
xingzhuang:xingzhuang,
|
yanse:yanse,
|
zuobiao:String(real_zuobiao),
|
},
|
success:function(data){
|
if (data == 0){
|
$("#draw_hint").html("保存成功");
|
alert("保存成功！");
|
_this.CreatLinepoints = [];
|
_this.allMarkLins = [];
|
_this.allFenceColor=[];
|
_this.drawImg();
|
} else {
|
$("#draw_hint").html("保存失败");
|
alert("保存失败！");
|
}
|
}
|
})
|
};
|
|
},
|
|
}
|
//var imgUrl = '../image/mapfile/led.png';//图片路径
|
//var imgUrl = ''
|
new MarkPoints(imgUrl);
|
</script>
|
|
<!-- > END PAGE FUNCTION SCRIPTS -->
|
|
<!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
|
<script src="/hxzkoa/hxzk/assets/js/libs/jquery-3.1.1.min.js"></script>
|
<script src="/hxzkoa/hxzk/bootstrap/js/popper.min.js"></script>
|
<script src="/hxzkoa/hxzk/bootstrap/js/bootstrap.min.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
|
<script src="/hxzkoa/hxzk/assets/js/app.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/table/datatable/button-ext/dataTables.buttons.min.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/table/datatable/button-ext/jszip.min.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/table/datatable/button-ext/buttons.html5.min.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/table/datatable/button-ext/buttons.print.min.js"></script>
|
<script>
|
$(document).ready(function() {
|
App.init();$.ajax({async : false, type : "POST",url : "/hxzkoa/getSysSetting_list.do",data : {},dataType : "json",success:function(data){/* title = data[0].title;document.title = title; */},});
|
});
|
$('.header-page').load('/hxzkoa/hxzk/top.html');$('.login-page').load('/hxzkoa/hxzk/head.html');
|
</script>
|
<script src="/hxzkoa/hxzk/assets/js/custom.js"></script>
|
<!-- END GLOBAL MANDATORY SCRIPTS -->
|
|
<!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS -->
|
<script src="/hxzkoa/hxzk/plugins/apex/apexcharts.min.js"></script>
|
<script src="/hxzkoa/hxzk/assets/js/dashboard/dash_2.js"></script>
|
<!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS -->
|
|
</body>
|
</html>
|
