~zhitong.yu/bs/version.git

			@@ -1,943 +1,1166 @@
			<%@ 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>
			<%@ 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">

			<!-- 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 -->
			<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 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 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" />
			<link rel="stylesheet"
			href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css">
			<link rel="stylesheet"
			href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css">
			<!-- END GLOBAL MANDATORY STYLES -->

			<!-- 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);
			}
			<!-- 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>
			body {
			margin: 0px;
			width: 100%;
			min-width: 1500px;
			max-width: 100%;
			height: 100%;
			background-color: #F0F0F0;
			}
			//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("保存失败！");
			}
			}
			})
			};

			},
			#head {
			background-color: #FFFF00;
			width: 100%;
			height: 100px;
			}

			}
			//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 -->
			#center {
			background-color: #00FFFF;
			width: 100%;
			min-height: 100%;
			}

			<!-- 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 -->
			#foot {
			background-color: #FF00FF;
			width: 100%;
			height: 100px;
			}

			</body>
			</html>
			.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="百度地图">百度地图</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%;">
			<label for="exampleFormControlInput1">围栏高度:</label> <input
			class="form-control" type="text" id="fencegao"
			style="width: 60%; font-size: 12px; padding: 5px 5px">
			</div>
			<div style="margin-left: 20px; padding: 10px; width: 100%;display: none;"
			id="xuanxingzhuang">
			<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%;display: none;" id="yanseaa">
			<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"
			style="display: none;">绘制</button>
			<button type="button" class="btn btn-secondary" id="save_fence"
			style="display: none;">保存</button>
			<button type="button" class="btn btn-secondary" id="cancel_draw"
			style="display: none;">取消</button>
			<button type="button" class="btn btn-secondary" id="bdbaocun"
			style="margin-left: 30px;" onclick="bdbaocuns()">保存</button>
			<button type="button" class="btn btn-secondary"
			id="bdquxiao">取消</button>
			</div>
			<div style="margin-top: 20px;display: none;" id="tiaofu">
			<label id="draw_hint">请点击绘制按钮开始绘制围栏</label>
			</div>
			</div>
			<div id="baidumap" style="width: 78%; height: 600px; float: right">
			</div>
			<div id="wrap" style="width: 78%; height: 600px; float: right;display: none;">
			<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">

			var bdzuobiao = "";
			var overlays = [];

			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;
			if (select_value == "百度地图") {
			document.getElementById("begin_draw").style.display = "none";
			document.getElementById("save_fence").style.display = "none";
			document.getElementById("cancel_draw").style.display = "none";
			document.getElementById("wrap").style.display = "none";
			document.getElementById("xuanxingzhuang").style.display = "none";
			document.getElementById("tiaofu").style.display = "none";
			document.getElementById("yanseaa").style.display = "none";
			document.getElementById("fencegao").style.display = "";
			document.getElementById("bdbaocun").style.display = "";
			document.getElementById("bdquxiao").style.display = "";
			document.getElementById("baidumap").style.display = "";
			} else {
			document.getElementById("begin_draw").style.display = "";
			document.getElementById("save_fence").style.display = "";
			document.getElementById("cancel_draw").style.display = "";
			document.getElementById("wrap").style.display = "";
			document.getElementById("xuanxingzhuang").style.display = "";
			document.getElementById("tiaofu").style.display = "";
			document.getElementById("yanseaa").style.display = "";
			document.getElementById("fencegao").style.display = "none";
			document.getElementById("bdbaocun").style.display = "none";
			document.getElementById("bdquxiao").style.display = "none";
			document.getElementById("baidumap").style.display = "none";
			$.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);
			}
			})
			}
			};

			var overlaycomplete = function (e) {
			overlays.push(e.overlay);
			//覆盖物删除事件
			var removeMarker = function (e, ee, overlay) {
			bm.removeOverlay(overlay);
			}
			if (e.overlay instanceof BMap.Polygon) {
			//var pol=(BMap.Polygon)e.overlay;
			var poi_arr = e.overlay.getPath();
			for (var i = 0; i < poi_arr.length; i++) {
			var str2 = poi_arr[i].lng + "," + poi_arr[i].lat + ";";
			bdzuobiao += str2;
			}
			// var infoWindow = new BMap.InfoWindow(info); // 创建信息窗口对象
			// bm.openInfoWindow(infoWindow, poi_arr[0]); //开启信息窗口
			//alert(info);
			}

			//创建右键菜单
			var markerMenu = new BMap.ContextMenu();
			markerMenu.addItem(new BMap.MenuItem('删除', removeMarker.bind(e.overlay)));
			e.overlay.addContextMenu(markerMenu);
			};

			function bdbaocuns() {
			if(overlays.length != 1) {
			alert("一次只能保存一个围栏！！！")
			return;
			}
			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 fencegao = document.getElementById("fencegao").value;
			var xingzhuang = "-";
			var yanse = getDrawColor(getColor());
			$.ajax({
			type: 'POST',
			url: '/hxzkoa/sanweiFence.do',
			dataType: 'json',
			data: {
			layer: layer,
			weilanleixing: weilanleixing,
			guanlianduixiang: guanlianduixiang,
			quyumingcheng: quyumingcheng,
			xingzhuang: xingzhuang,
			yanse: yanse,
			zuobiao: bdzuobiao,
			fencegao: fencegao,
			},
			success: function (data) {
			if (data == 0) {
			$("#draw_hint").html("保存成功");
			alert("保存成功！");
			} else {
			$("#draw_hint").html("保存失败");
			alert("保存失败！");
			}
			}
			})
			}

			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 getSystemSetting() {
			var sysset = [];
			$.ajax({
			async: false,
			type: 'POST',
			url: "/hxzkoa/getSysSetting_list.do",
			dataType: 'json',
			success: function (data) {
			sysset = data;
			},
			});
			return sysset;
			};

			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 type="text/javascript" id="baidumap_api"
			src="http://api.map.baidu.com/getscript?v=3.0&ak=PUftjeZCKHtEn8ZMjeAGnViSO8NBvBNm"></script>
			<script type="text/javascript"
			src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
			<script type="text/javascript"
			src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_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; */ }, });
			var bm_sysSetting = getSystemSetting();
			var bm_baidu_j = bm_sysSetting[0].baidu_j;//百度地图精度
			var bm_baidu_w = bm_sysSetting[0].baidu_w;//百度地图维度
			var bm = new BMap.Map("baidumap"); // 创建Map实例
			bm.centerAndZoom(new BMap.Point(bm_baidu_j, bm_baidu_w), 12); // 初始化地图,设置中心点坐标和地图级别
			bm.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

			var styleOptions = {
			strokeColor: "rgba(255,0,0,0.3)", //边线颜色。
			fillColor: "rgba(255,0,0,0.3)", //填充颜色。当参数为空时，圆形将没有填充效果。
			strokeWeight: 3, //边线的宽度，以像素为单位。
			strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
			fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
			strokeStyle: 'solid' //边线的样式，solid或dashed。
			}
			//实例化鼠标绘制工具
			var drawingManager = new BMapLib.DrawingManager(bm, {
			isOpen: false, //是否开启绘制模式
			enableDrawingTool: true, //是否显示工具栏
			drawingToolOptions: {
			anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
			offset: new BMap.Size(5, 5), //偏离值
			drawingModes: [BMAP_DRAWING_POLYGON, BMAP_DRAWING_RECTANGLE]
			},
			circleOptions: styleOptions, //圆的样式
			polylineOptions: styleOptions, //线的样式
			polygonOptions: styleOptions, //多边形的样式
			rectangleOptions: styleOptions //矩形的样式
			});

			//添加鼠标绘制工具监听事件，用于获取绘制结果
			drawingManager.addEventListener('overlaycomplete', overlaycomplete);
			});
			$('.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>