<%--
|
Created by IntelliJ IDEA.
|
User: Dell
|
Date: 2023/11/21
|
Time: 17:03
|
To change this template use File | Settings | File Templates.
|
--%>
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
<html>
|
<link rel="stylesheet" href="../../CSS/layui.css">
|
<link rel="stylesheet" href="../../CSS/layer.css">
|
<link rel="stylesheet" href="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
|
<head>
|
<title>绘制围栏</title>
|
<style>
|
.layui-layout-body{
|
padding-bottom: 0px;
|
}
|
</style>
|
</head>
|
<body style="">
|
<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" style="">
|
<div class="widget-content widget-content-area br-6">
|
<div class="table-responsive mb-4 mt-4" >
|
<input type="hidden" id="fencelist" value="${fenceList}">
|
<div style="width:100%; height: 10%; float: left;">
|
<div class="" style="width: 12%;display: inline-block;float: left;margin-top: 28px">
|
<label class="layui-form-label">选择图层:</label>
|
<div class="layui-input-block">
|
<select id="chooselayer" onchange="floorChange()" style="width: 100%; font-size: 12px; padding: 5px 5px">
|
<option value="百度地图">百度地图</option>
|
</select>
|
</div>
|
<input class="layui-input" type="text" id="tagida"
|
style="width: 40%; margin-top: 10px;font-size: 12px; padding: 5px 5px;display:none;"
|
placeholder="标签ID">
|
</div>
|
<div class="" style="display: inline-block;float: left;margin-top: 28px">
|
<label class="layui-form-label">围栏类型:</label>
|
<div class="layui-input-block">
|
<select id="weilanleixing" style="width: 100%; font-size: 12px; padding: 5px 5px" lay-filter="aihao">
|
<option value="考勤区域">考勤区域</option>
|
<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>
|
<div style="width: 12%;display: inline-block;float: left;margin-top: 28px">
|
<label class="layui-form-label">关联对象:</label><div class="layui-input-block"><select
|
id="guanlianduixiang"
|
style="width: 100%; font-size: 12px; padding: 5px 5px">
|
</select>
|
</div>
|
</div>
|
<div class="" style="width: 12%;display: inline-block;float: left;margin-top: 25px">
|
<label class="layui-form-label">围栏名称:</label>
|
<div class="layui-input-block">
|
<input
|
class="layui-input" type="text" id="quyumingcheng"
|
style="width:100%; font-size: 12px;height: 30px">
|
</div>
|
</div>
|
<div class="" style="width: 12%;display: inline-block;float: left;margin-top: 25px">
|
<label class="layui-form-label">围栏高度:</label>
|
<div class="layui-input-block">
|
<input
|
class="layui-input" type="text" id="fencegao"
|
style="width: 100%; font-size: 12px;height: 30px">
|
</div>
|
</div>
|
<div style="width: 5%;display: none;float: left;margin-top: 25px;margin-left: 15px"
|
id="xuanxingzhuang">
|
<div class="custom-control custom-radio custom-control-inline">
|
<select id="draw_shape" style="height: 30px">
|
<option value="矩形">矩形</option>
|
<option value="多边形">多边形</option>
|
</select>
|
</div>
|
</div>
|
<div style="padding: 10px; width: 14%;display: none;float: left;margin-top: 20px"
|
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 style=" padding: 10px; width: 100%;display: none;"
|
id="wenben">
|
<label for="exampleFormControlInput1"
|
title="先经度后纬度,经纬度以逗号分隔,点与点以分号分隔,必须要按照围栏边框顺时
|
针或逆时针顺序填写,不能输入空格和回车">围栏坐标:
|
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"
|
fill="currentColor" class="bi bi-exclamation-circle"
|
viewBox="0 0 16 16">
|
<path
|
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8
|
8 0 0 0 0 16z" />
|
<path
|
d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1
|
4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" />
|
</svg></label>
|
<textarea class="form-control"
|
style="width: 60%; font-size: 12px; padding: 5px 5px;border:0;border-
|
radius:5px;padding: 10px;font-size: 13px;"
|
id="shoudong"
|
placeholder="经度,纬度; 经度,纬度; 经度,纬
|
度"></textarea>
|
</div>
|
<div align="left" style="float: left;margin-top: 20px">
|
<button type="button" class="layui-btn layui-btn-normal" id="begin_draw"
|
style="display: none;">绘制</button>
|
<button type="button" class="layui-btn layui-btn-normal" id="save_fence"
|
style="display: none;">保存</button>
|
<button type="button" class="layui-btn layui-btn-normal" id="cancel_draw"
|
style="display: none;">取消</button>
|
<button type="button" class="layui-btn layui-btn-normal" id="bdbaocun"
|
style="margin-left: 30px;" onclick="bdbaocuns()">保存</button>
|
<button type="button" class="layui-btn layui-btn-normal"id="bdquxiao"
|
onclick="clearAll()">取消</button>
|
<button type="button" class="layui-btn layui-btn-normal" id="kaishijiantinga"
|
style="display: none;" onclick="kaishijianting()">开始</button>
|
<button type="button" class="layui-btn layui-btn-normal" id="jieshujiantinga"
|
style="display: none;" onclick="jieshujianting()">结束并保存</button>
|
|
</div>
|
<div style="float: left;margin-left: 10px;margin-top: 30px" id="baiduti" >
|
<label id="draw_hin">绘制完成双击结束绘制</label>
|
</div>
|
<div style="display:none;" id="tiaofu3">
|
<label id="tiaofu3a"></label>
|
</div>
|
</div>
|
<div id="baidumap" style="width: 100%; height: 90%;box-shadow: 3px 3px 3px #666666;position: fixed;top: 0px">
|
</div>
|
<div id="wrap" style="width: 100%; height: 90%; float: right;display: none;box-shadow: 3px 3px 3px #666666;background-color: #666666">
|
<canvas id="draw"></canvas>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
</div>
|
</div>
|
</body>
|
<script type="text/javascript" id="baidumap_api"
|
src="http://api.map.baidu.com/getscript?v=3.0&ak=6Ernv1uxtTFKv8F15TymTbVktfldFS3b"></script>
|
<script type="text/javascript" src="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
|
<script src="/hxzkuwb/HouTai/Js/jquery-3.5.1.js"></script>
|
<script src="../../JS/layui.js"></script>
|
<script src="../../JS/layer.js">
|
<script src="HuiZhiWeiLanJs/HuiZhiWeiLan.js"></script>
|
<script src="HuiZhiWeiLanJs/HuiZhiWeiLan1.js"></script>
|
<script>
|
|
var ds = "username="+sessionStorage.getItem("username")
|
$.get("/hxzkuwb/findUserRole",ds,function (data){
|
if (data.uadd == "No"){
|
var myButton = document.getElementById("bdbaocun");
|
myButton.className = "layui-btn layui-btn-disabled";
|
}
|
if (data.uupdate == "No"){
|
var myButton = document.getElementById('bdquxiao');
|
myButton.className = "layui-btn layui-btn-disabled";
|
}
|
})
|
|
|
var layers = layui.layer;
|
window.onload = function () {
|
var fences = getfence();
|
//console.log(superuser)
|
//console.log(superuser+"---------"+fenceq)
|
var bm = new BMap.Map("baidumap", {mapType: BMAP_SATELLITE_MAP}); // 创建Map实例
|
bm.centerAndZoom(new BMap.Point(87.506299, 43.840568), 15); // 初始化地图,设置中心点坐标和地图级别
|
bm.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
|
for (var i = 0; i < fences.length; i++) {
|
fences[i] = fences[i].split(";");
|
for (var j = 0; j < fences[i].length; j++) {
|
fences[i][j] = fences[i][j].split(",");
|
}
|
}
|
|
for (var i = 0; i < fences.length; i++) {
|
var str = [];
|
var xianshi = [];
|
for (var j = 0; j < fences[i].length; j++) {
|
if (fences[i][j][0] != "" && fences[i][j][0] != null) {
|
xianshi[j] = wgs84tobd09(parseFloat(fences[i][j][0]), parseFloat(fences[i][j][1]))
|
var point = {
|
lng: xianshi[j][0],
|
lat: xianshi[j][1]
|
}
|
str[j] = point;
|
}
|
}
|
var polygon = new BMap.Polygon(str, {
|
strokeColor: "rgba(255,0,0,0.3)",
|
fillColor: "rgba(255,0,0,0.3)",
|
strokeWeight: 2,
|
strokeOpacity: 0.5
|
});
|
bm.addOverlay(polygon);
|
}
|
|
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);
|
|
//百度地图显示坐标
|
|
var myIcon = new BMap.Icon("/hxzkoa/hxzk/image/targeticon/default.png", new BMap.Size(40, 40), {
|
//使用自定义标注时,指向的地理位置位于图片的中心点
|
//anchor为图片左上角相对于地理位置的偏移量,此时指向的地理位置位于图标中心最下方
|
anchor: new BMap.Size(20, 40)
|
}
|
);
|
var sousuopd = false;
|
jQuery.Hashtable = function () {
|
this.items = new Array();
|
this.itemsCount = 0;
|
this.add = function (key, value) {
|
if (!this.containsKey(key)) {
|
this.items[key] = value;
|
this.itemsCount++;
|
} else
|
throw "key '" + key + "' allready exists."
|
}
|
this.get = function (key) {
|
if (this.containsKey(key))
|
return this.items[key];
|
else
|
return null;
|
}
|
|
this.remove = function (key) {
|
if (this.containsKey(key)) {
|
delete this.items[key];
|
this.itemsCount--;
|
} else
|
throw "key '" + key + "' does not exists."
|
}
|
this.containsKey = function (key) {
|
return typeof (this.items[key]) != "undefined";
|
}
|
this.containsValue = function containsValue(value) {
|
for (var item in this.items) {
|
if (this.items[item] == value)
|
return true;
|
}
|
return false;
|
}
|
this.contains = function (keyOrValue) {
|
return this.containsKey(keyOrValue) || this.containsValue(keyOrValue);
|
}
|
this.clear = function () {
|
this.items = new Array();
|
itemsCount = 0;
|
}
|
this.size = function () {
|
return this.itemsCount;
|
}
|
this.isEmpty = function () {
|
return this.size() == 0;
|
}
|
};
|
//读取系统设置
|
// var bm_sysSetting = getSystemSetting();
|
// var tt = 0;
|
// var markers = new jQuery.Hashtable();
|
// var labelzuobiaos = new jQuery.Hashtable();
|
// var labeltagids = new jQuery.Hashtable();
|
// var labeldianliangs = new jQuery.Hashtable();
|
// var xinxi = new jQuery.Hashtable();
|
// var bm_tagZb = bm_sysSetting[0].tagZb;//是否显示标签坐标
|
// var bm_viewName = bm_sysSetting[0].viewName;//是否显示人员名称
|
// var bm_viewPower = bm_sysSetting[0].viewPower;//是否显示电量
|
// var bm_viewTagid = bm_sysSetting[0].viewTagid;//是否显示标签ID
|
// var bm_offView = bm_sysSetting[0].offView;//是否离线不显示图标
|
// var bm_quiet = bm_sysSetting[0].quiet;//静止输出固定坐标
|
// var bm_name = bm_sysSetting[0].viewName;//是否显示人员姓名
|
|
|
// function getGPS() {
|
// var gpslist = [];
|
// $.ajax({
|
// async: false,
|
// type: 'POST',
|
// traditional: true,
|
// url: "/hxzkoa/getGPS.do",
|
// dataType: 'json',
|
// data: {},
|
// success: function (data) {
|
// //经纬度从度分秒转成度
|
// for (var i = 0; i < data.length; i++) {
|
// if (data[i].gps_weidu != "" && data[i].gsp_jingdu != "") {
|
// //data[i].gps_weidu="3951.74908"
|
// //var weiduaaa = data[i].gps_weidu.split(".")[0];
|
// var weidu = data[i].gps_weidu;
|
// //if (data[i].gps_NS == "S") {
|
// //if (weiduaaa.length != 2) {
|
// //weidu = ToDigital(data[i].gps_weidu.substring(0, 2), data[i].gps_weidu.substring(2, 4), data[i].gps_weidu.substring(4));
|
// //}
|
// //};
|
// //data[i].gsp_jingdu="11615.43424"
|
// //var jingduaaa = data[i].gsp_jingdu.split(".")[0];
|
// var jingdu = data[i].gsp_jingdu;
|
// //if (data[i].gps_EW == "W") {
|
// //if (jingduaaa != 3) {
|
// //jingdu = ToDigital(data[i].gsp_jingdu.substring(0, 3), data[i].gsp_jingdu.substring(3, 5), data[i].gsp_jingdu.substring(5));
|
// //}
|
// //};
|
// gpslist.push([data[i].tagid, jingdu, weidu, data[i].gps_haiba_gao, data[i].gps_state, data[i].gps_num, data[i].gps_hdop, data[i].gps_tuoqiu, data[i].gps_chafen_time, data[i].gps_chafen_id, data[i].gps_jiaoyan, data[i].gps_kahao, data[i].gps_power, data[i].gps_sos, data[i].addtime, data[i].name, data[i].gsp_jingdu, data[i].gps_weidu, data[i].sex, data[i].minzu, data[i].dianhua, data[i].bumen, data[i].baoliu14, data[i].baoliu15, data[i].baoliu13, data[i].p_addtiem]);
|
// }
|
// };
|
// },
|
// });
|
// return gpslist;
|
// };
|
//
|
//
|
// fn();
|
//
|
// var timer = setTimeout(function f() {
|
// fn();
|
// timer = setTimeout(f, 1000);
|
// }, 1000);
|
|
//timer_bm = setTimeout(fn ,t);
|
|
// function fn() {
|
// //console.log(tt)
|
// //获取gps坐标, [tagid, jingdu, weidu, gps_haiba_gao, gps_state, gps_num, gps_hdop, gps_tuoqiu, gps_chafen_time, gps_chafen_id, gps_jiaoyan, gps_kahao, gps_power, gps_sos, addtime]
|
// var gps_node_list1 = getGPS();
|
// var gps_node_list = [];
|
// //坐标转换完之后的回调函数
|
//
|
// //bm.clearOverlays();
|
// // var points = [];
|
// if (gps_node_list1.length != 0) {
|
// for (var i = 0; i < gps_node_list1.length; i++) {
|
// if ((bm_offView == '1' && gps_node_list1[i][4] == '1') || (bm_offView == '0')) {
|
// // if (current_node_list[gps_node_list1[i][0]] == null) {
|
// // current_node_list[gps_node_list1[i][0]] = new Queue();
|
// // }
|
// if (sousuopd) {
|
// if (gps_node_list1[i][0] == sousuoid || gps_node_list1[i][15] == sousuoid) {
|
// gps_node_list.push(gps_node_list1[i])
|
// } else {
|
// bm.removeOverlay(markers.get(gps_node_list1[i][0]));
|
// if (markers.get(gps_node_list1[i][0]) != null) {
|
// if (bm_viewTagid == "1") {
|
// labeltagids.remove(gps_node_list1[i][0]);
|
// }
|
// if (bm_tagZb == "1") {
|
// labelzuobiaos.remove(gps_node_list1[i][0]);
|
// }
|
// if (bm_viewPower == "1") {
|
// labeldianliangs.remove(gps_node_list1[i][0]);
|
// }
|
// // if (bm_viewPower == "1") {
|
// // bdtanchuangs.remove(gps_node_list1[i][0]);
|
// // }
|
// markers.remove(gps_node_list1[i][0]);
|
// xinxi.remove(gps_node_list1[i][0]);
|
// }
|
// }
|
// } else {
|
// gps_node_list.push(gps_node_list1[i]);
|
// }
|
// }
|
// if (tt == 1) {
|
// //console.log("推出去")
|
// if (gps_node_list1[i][4] == '1') {
|
// bm.removeOverlay(markers.get(gps_node_list1[i][0]));
|
// if (markers.get(gps_node_list1[i][0]) != null) {
|
// if (bm_viewTagid == "1") {
|
// labeltagids.remove(gps_node_list1[i][0]);
|
// }
|
// if (bm_tagZb == "1") {
|
// labelzuobiaos.remove(gps_node_list1[i][0]);
|
// }
|
// if (bm_viewPower == "1") {
|
// labeldianliangs.remove(gps_node_list1[i][0]);
|
// }
|
// // if (bm_viewPower == "1") {
|
// // bdtanchuangs.remove(gps_node_list1[i][0]);
|
// // }
|
// markers.remove(gps_node_list1[i][0]);
|
// xinxi.remove(gps_node_list1[i][0]);
|
// }
|
// }
|
// }
|
// if (gps_node_list1[i][4] != '1') {
|
// bm.removeOverlay(markers.get(gps_node_list1[i][0]));
|
// if (markers.get(gps_node_list1[i][0]) != null) {
|
// if (bm_viewTagid == "1") {
|
// labeltagids.remove(gps_node_list1[i][0]);
|
// }
|
// if (bm_tagZb == "1") {
|
// labelzuobiaos.remove(gps_node_list1[i][0]);
|
// }
|
// if (bm_viewPower == "1") {
|
// labeldianliangs.remove(gps_node_list1[i][0]);
|
// }
|
// // if (bm_viewPower == "1") {
|
// // bdtanchuangs.remove(gps_node_list1[i][0]);
|
// // }
|
// markers.remove(gps_node_list1[i][0]);
|
// xinxi.remove(gps_node_list1[i][0]);
|
// }
|
// }
|
// };
|
// $("#shuliang").html(gps_node_list.length);
|
// if (markers.itemsCount != gps_node_list.length) {
|
// // var point = new BMap.Point(new Number(gps_node_list[i][1]), new Number(gps_node_list[i][2]));
|
// // points.push(point);
|
// // var newzuobiao = zhuanhuan(points);
|
// baidummm()
|
// } else {
|
// baidumm()
|
// }
|
// }
|
//
|
// function baidummm() {
|
// var info = [];
|
// console.log(gps_node_list.length)
|
// for (var i = 0; i < gps_node_list.length; i++) {
|
// if (markers.get(gps_node_list[i][0]) == null) {
|
// var c = new Convertor();
|
// var rr = c.WGS2BD09({ lng: new Number(gps_node_list[i][1]), lat: new Number(gps_node_list[i][2]) });
|
// var point = new BMap.Point(rr.lng, rr.lat);
|
// marker = new BMap.Marker(point, { icon: myIcon });
|
// bm.addOverlay(marker);
|
// if (bm_viewTagid == "1") {
|
// var aaaaa = gps_node_list[i][15] + " " + gps_node_list[i][0]
|
// var tagid = new BMap.Label(aaaaa, { offset: new BMap.Size(20, -30) });
|
// tagid.setStyle({
|
// color: "#fff",
|
// fontSize: "14px",
|
// borderRadius: "5px",
|
// padding: "5px 5px",
|
// border: "0",
|
// backgroundColor: "#32CD32",
|
// transform: 'translateX(-50%)',
|
// });
|
// console.log("1")
|
// console.log(marker)
|
// marker.setLabel(tagid); //添加label-tagid
|
// labeltagids.add(gps_node_list[i][0], tagid);
|
// }
|
// if (bm_tagZb == "1") {
|
// var zuobiao = new BMap.Label(gps_node_list[i][16] + ',' + gps_node_list[i][17] + '\n\r高' + gps_node_list[i][3], { offset: new BMap.Size(20, +40) });
|
// zuobiao.setStyle({
|
// transform: 'translateX(-50%)',
|
// backgroundColor: "0.000000000001",
|
// border: 'none'
|
// });
|
// console.log("2")
|
// marker.setLabel(zuobiao);
|
// labelzuobiaos.add(gps_node_list[i][0], zuobiao);
|
// }
|
// if (bm_viewPower == "1") {
|
// var dianliang = new BMap.Label("设备电量" + gps_node_list[i][12], { offset: new BMap.Size(20, +55) });
|
// dianliang.setStyle({
|
// transform: 'translateX(-50%)',
|
// backgroundColor: "0.000000000001",
|
// border: 'none'
|
// });
|
// console.log("3")
|
// marker.setLabel(dianliang);
|
// labeldianliangs.add(gps_node_list[i][0], dianliang);
|
// }
|
// marker.setTitle(gps_node_list[i][0]);
|
// // if (bm_viewPower == "1") {
|
// // var bdtanchuang = new BMap.InfoWindow(gps_node_list[i][16] + ',' + gps_node_list[i][17] + '\n\r高' + gps_node_list[i][3], { width: 0,height: 0});
|
// // marker.openInfoWindow(bdtanchuang);
|
// // bdtanchuangs.add(gps_node_list[i][0], bdtanchuang)
|
// // }
|
// // info[i] = new BMap.InfoWindow('经度:' + gps_node_list[i][16] + '\n\r纬度' + gps_node_list[i][17] + '\n\r海拔高' + gps_node_list[i][3], { width: 0, height: 0, offset: new BMap.Size(0, -20) });
|
// // (function (i) {
|
// marker.addEventListener("click", function () {
|
//
|
// var xinxizong = xinxi.get(this.getTitle());
|
// document.getElementById("nameqq").innerHTML = xinxizong[15];
|
// document.getElementById("sexqq").innerHTML = xinxizong[18];
|
// document.getElementById("minzuqq").innerHTML = xinxizong[19];
|
// document.getElementById("gaoqq").innerHTML = xinxizong[3];
|
// document.getElementById("dianhuaqq").innerHTML = xinxizong[20];
|
// document.getElementById("zuobiaoqq").innerHTML = xinxizong[22] + ' -- ' + xinxizong[23];
|
// document.getElementById("zhuangtaiqq").innerHTML = xinxizong[24];
|
// document.getElementById("timeqq").innerHTML = xinxizong[25];
|
// document.getElementById("tagidqq").innerHTML = xinxizong[0];
|
// document.getElementById("dianliangqq").innerHTML = xinxizong[12] + '%';
|
// document.getElementById("bumenqq").innerHTML = xinxizong[21];
|
// document.getElementById("zhendongqq").onclick = function () {
|
// $.ajax({
|
// url: "xiafazhendong.do",
|
// type: "POST",
|
// dataType: "JSON",
|
// data: {
|
// tagid: xinxizong[0],
|
// }
|
// })
|
// updatemsg("发送成功!!!")
|
// }
|
// });
|
// // })(i);
|
// // bdtanchuangs.add(gps_node_list[i][0], info[i]);
|
// markers.add(gps_node_list[i][0], marker);
|
// xinxi.add(gps_node_list[i][0], gps_node_list[i])
|
// break;
|
// }
|
// }
|
// tt = tt + 1;
|
// }
|
//
|
// function baidumm() {
|
// var info = [];
|
// for (var i = 0; i < gps_node_list.length; i++) {
|
// //var zhuangtaia = getstatus(gps_node_list[i][0]);
|
// // if (current_node_list[gps_node_list[i][0]].size() > 0) {
|
// // old_mark = current_node_list[gps_node_list[i][0]].front();
|
// // current_node_list[gps_node_list[i][0]].dequeue();
|
// // bm.removeOverlay(old_mark);//清除上一个
|
// // old_mark = null;
|
// // }
|
// // marker = new BMap.Marker(data[i], { icon: myIcon });
|
// // bm.addOverlay(marker);
|
// // current_node_list[gps_node_list[i][0]].enqueue(marker);
|
// marker = markers.get(gps_node_list[i][0]);
|
// var pd = 0;
|
// var c = new Convertor();
|
// var rr = c.WGS2BD09({ lng: new Number(gps_node_list[i][1]), lat: new Number(gps_node_list[i][2]) });
|
// var point = new BMap.Point(rr.lng, rr.lat);
|
// marker.setPosition(point);
|
//
|
// if (bm_viewTagid == "1") {
|
// tagid = labeltagids.get(gps_node_list[i][0]);
|
// var aaaaa = gps_node_list[i][15] + " " + gps_node_list[i][0];
|
// if (pd != 1) {
|
// tagid.setStyle({
|
// backgroundColor: "#32CD32",
|
// });
|
// } else {
|
// if (tt2) {
|
// tagid.setStyle({
|
// backgroundColor: "#bb1b1b",
|
// });
|
// tt3 += 1;
|
// if (tt3 == 3) {
|
// tt2 = !tt2;
|
// tt3 = 0;
|
// }
|
// } else {
|
// tagid.setStyle({
|
// backgroundColor: "#32CD32",
|
// });
|
// tt3 += 1;
|
// if (tt3 == 3) {
|
// tt2 = !tt2;
|
// tt3 = 0;
|
// }
|
// }
|
// }
|
// tagid.setContent(aaaaa); //添加label-tagid
|
// }
|
// if (bm_tagZb == "1") {
|
// zuobiao = labelzuobiaos.get(gps_node_list[i][0]);
|
// var bbbbb = gps_node_list[i][16] + ',' + gps_node_list[i][17] + '\n\r高' + gps_node_list[i][3]
|
// zuobiao.setContent(bbbbb);
|
// }
|
// if (bm_viewPower == "1") {
|
// diangliang = labeldianliangs.get(gps_node_list[i][0]);
|
// var ccccc = "设备电量" + gps_node_list[i][12]
|
// diangliang.setContent(ccccc);
|
// }
|
// xinxi.remove(gps_node_list[i][0]);
|
// xinxi.add(gps_node_list[i][0], gps_node_list[i]);
|
// // info[i] = bdtanchuangs.get(gps_node_list[i][0]);
|
// // var ddddd = '经度:' + gps_node_list[i][16] + '\n\r纬度' + gps_node_list[i][17] + '\n\r海拔高' + gps_node_list[i][3]
|
// // info[i].setContent(ddddd);
|
// // if (bm_viewTagid == "1") {
|
// // var aaaaa = gps_node_list[i][15] + " " + gps_node_list[i][0]
|
// // var tagid = new BMap.Label(aaaaa, { offset: new BMap.Size(20, -30) });
|
// // tagid.setStyle({
|
// // color: "#fff",
|
// // fontSize: "14px",
|
// // borderRadius: "5px",
|
// // padding: "5px 5px",
|
// // border: "0",
|
// // backgroundColor: "#32CD32",
|
// // transform: 'translateX(-50%)',
|
// // });
|
// // marker.setLabel(tagid); //添加label-tagid
|
// // tagid = null;
|
// // }
|
// // if (bm_tagZb == "1") {
|
// // var zuobiao = new BMap.Label(gps_node_list[i][1] + ',' + gps_node_list[i][2], { offset: new BMap.Size(20, +40) });
|
// // zuobiao.setStyle({
|
// // transform: 'translateX(-50%)',
|
// // backgroundColor: "0.000000000001",
|
// // border: 'none'
|
// // });
|
// // marker.setLabel(zuobiao);
|
// // zuobiao = null;
|
// // }
|
// // if (bm_viewPower == "1") {
|
// // var dianliang = new BMap.Label("设备电量" + gps_node_list[i][12], { offset: new BMap.Size(20, +55) });
|
// // dianliang.setStyle({
|
// // transform: 'translateX(-50%)',
|
// // backgroundColor: "0.000000000001",
|
// // border: 'none'
|
// // });
|
// // marker.setLabel(dianliang);
|
// // dianliang = null;
|
// // }
|
// }
|
// tt = tt + 1;
|
// };
|
//
|
// /**
|
// * 坐标常量说明:
|
// * COORDINATES_WGS84 = 1, WGS84坐标
|
// * COORDINATES_WGS84_MC = 2, WGS84的平面墨卡托坐标
|
// * COORDINATES_GCJ02 = 3,GCJ02坐标
|
// * COORDINATES_GCJ02_MC = 4, GCJ02的平面墨卡托坐标
|
// * COORDINATES_BD09 = 5, 百度bd09经纬度坐标
|
// * COORDINATES_BD09_MC = 6,百度bd09墨卡托坐标
|
// * COORDINATES_MAPBAR = 7,mapbar地图坐标
|
// * COORDINATES_51 = 8,51地图坐标
|
// */
|
//
|
// };
|
|
|
};
|
|
|
var bdzuobiao = "";
|
var bdzuobiaodufen = "";
|
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 getfence() {
|
var fences = [];
|
return fences;
|
};
|
|
function func(str) {
|
return str.replace(/[\r\n]/g, '');
|
}
|
|
function bdbaocuns() {
|
//console.log(bdzuobiao)
|
var layer = document.getElementById("chooselayer").value;
|
if (layer == "百度地图") {
|
if (bdzuobiao == "" || bdzuobiao == null) {
|
layers.msg('还未绘制围栏')
|
return;
|
}
|
if (overlays.length != 1) {
|
layers.msg("一次只能保存一个围栏")
|
return;
|
}
|
var weilanleixing = document.getElementById("weilanleixing").value;
|
var guanlianduixiang = document.getElementById("guanlianduixiang").value;
|
var quyumingcheng = document.getElementById("quyumingcheng").value;
|
var fencelist = document.getElementById("fencelist").value;
|
fencelist = fencelist.replace("[", "");
|
fencelist = fencelist.replace("]", "");
|
var fences = fencelist.split(",");
|
//删除开头空格
|
for (var i = 0; i < fences.length; i++) {
|
if (fences[i][0] == " ") {
|
fences[i] = fences[i].substr(1)
|
}
|
}
|
for (var i = 0; i < fences.length; i++) {
|
if (fences[i] == quyumingcheng) {
|
layers.msg('围栏名称重复')
|
return;
|
}
|
}
|
var fencegao = document.getElementById("fencegao").value;
|
if(fencegao == ""){
|
layers.msg('围栏高度不能为空')
|
return;
|
}
|
var xingzhuang = "多边形";
|
var yanse = "红色";
|
$.ajax({
|
type: 'POST',
|
url: '/hxzkuwb/addbaidufence',
|
dataType: 'json',
|
data: {
|
layer: layer,
|
weilanleixing: weilanleixing,
|
guanlianduixiang: guanlianduixiang,
|
quyumingcheng: quyumingcheng,
|
xingzhuang: xingzhuang,
|
yanse: yanse,
|
zuobiao: bdzuobiao,
|
zuobiaodufen: bdzuobiaodufen,
|
fencegao: fencegao,
|
},
|
success: function (data) {
|
}
|
})
|
layers.msg('保存成功')
|
} else {
|
var weilanleixing = document.getElementById("weilanleixing").value;
|
var guanlianduixiang = document.getElementById("guanlianduixiang").value;
|
var quyumingcheng = document.getElementById("quyumingcheng").value;
|
var fencelist = document.getElementById("fencelist").value;
|
fencelist = fencelist.replace("[", "");
|
fencelist = fencelist.replace("]", "");
|
var fences = fencelist.split(",");
|
//删除开头空格
|
for (var i = 0; i < fences.length; i++) {
|
if (fences[i][0] == " ") {
|
fences[i] = fences[i].substr(1)
|
}
|
}
|
for (var i = 0; i < fences.length; i++) {
|
if (fences[i] == quyumingcheng) {
|
alert("围栏名称重复!!!");
|
return;
|
}
|
}
|
var fencegao = document.getElementById("fencegao").value;
|
var xingzhuang = "多边形";
|
var yanse = "红色";
|
var bdzuobiao2 = document.getElementById("shoudong").value;
|
bdzuobiao2 = func(bdzuobiao2);
|
if (bdzuobiao2.substr(bdzuobiao2.length - 1, 1) == ";") {
|
bdzuobiao2 = bdzuobiao2.slice(0, bdzuobiao2.length - 1);
|
}
|
var panduan22 = bdzuobiao2.split(";");
|
if (panduan22.length < 3) {
|
alert("围栏绘制最少三个点!!!");
|
return;
|
}
|
panduan22[panduan22.length] = panduan22[0];
|
var c = new Convertor();
|
var strs = "";
|
for (var j = 0; j < panduan22.length; j++) {
|
panduan22[j] = panduan22[j].split(",");
|
var jingdu = ToDigital(panduan22[j][0].substring(0, 3), panduan22[j][0].substring(3, 5), panduan22[j][0].substring(5));
|
var weidu = ToDigital(panduan22[j][1].substring(0, 2), panduan22[j][1].substring(2, 4), panduan22[j][1].substring(4));
|
//var rr = c.WGS2BD09({ lng: new Number(jingdu), lat: new Number(weidu) });
|
strs += jingdu + "," + weidu + ";"
|
}
|
bdzuobiao2 = strs;
|
var bdzuobiaodufen = "-"
|
$.ajax({
|
type: 'POST',
|
url: '/hxzkuwb/addbaidufence',
|
dataType: 'json',
|
data: {
|
layer: layer,
|
weilanleixing: weilanleixing,
|
guanlianduixiang: guanlianduixiang,
|
quyumingcheng: quyumingcheng,
|
xingzhuang: xingzhuang,
|
yanse: yanse,
|
zuobiao: bdzuobiao2,
|
zuobiaodufen: bdzuobiaodufen,
|
fencegao: fencegao,
|
},
|
success: function (data) {
|
if(data == "success"){
|
layers.msg('保存成功')
|
}
|
}
|
})
|
layers.msg('保存成功')
|
}
|
}
|
function ToDegrees(val) {
|
if (typeof (val) == "undefined" || val == "") {
|
return "";
|
}
|
val = val + "";
|
var i = val.indexOf('.');
|
var strDu = i < 0 ? val : val.substring(0, i);//获取度
|
var strFen = 0;
|
var strMiao = 0;
|
if (i > 0) {
|
var strFen = "0" + val.substring(i);
|
strFen = strFen * 60 + "";
|
i = strFen.indexOf('.');
|
if (i > 0) {
|
strMiao = "0" + strFen.substring(i);
|
strFen = strFen.substring(0, i);//获取分
|
strMiao = strMiao * 60 + "";
|
i = strMiao.indexOf('.');
|
strMiao = strMiao.substring(0, i + 4);//取到小数点后面三位
|
strMiao = parseFloat(strMiao).toFixed(2);//精确小数点后面两位
|
var bb = strMiao.indexOf('.');
|
var strMiao1 = strMiao.substring(0, bb);
|
var strMiao2 = strMiao.substring(bb + 1, bb + 3);
|
strMiao = strMiao1 + strMiao2;
|
}
|
}
|
return strDu + strFen + "." + strMiao;
|
}
|
|
function floorChange() {
|
// when change floor num, the map will also change.
|
var select_value = document.getElementById("chooselayer").value;
|
if (select_value == "百度地图" || select_value == "手动输入" || 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("tiaofu3").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 = "";
|
if (select_value == "百度地图") {
|
document.getElementById("baiduti").style.display = "";
|
document.getElementById("wenben").style.display = "none";
|
document.getElementById("tagida").style.display = "none";
|
document.getElementById("kaishijiantinga").style.display = "none";
|
document.getElementById("jieshujiantinga").style.display = "none";
|
|
}
|
if (select_value == "手动输入") {
|
document.getElementById("baiduti").style.display = "none";
|
document.getElementById("wenben").style.display = "";
|
document.getElementById("tagida").style.display = "none";
|
document.getElementById("kaishijiantinga").style.display = "none";
|
document.getElementById("jieshujiantinga").style.display = "none";
|
|
}
|
if (select_value == "自动输入") {
|
document.getElementById("baiduti").style.display = "none";
|
document.getElementById("wenben").style.display = "";
|
document.getElementById("tagida").style.display = "";
|
document.getElementById("kaishijiantinga").style.display = "";
|
document.getElementById("jieshujiantinga").style.display = "";
|
document.getElementById("bdbaocun").style.display = "none";
|
document.getElementById("bdquxiao").style.display = "none";
|
}
|
} else {
|
if(select_value != "请选择"){
|
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("tiaofu3").style.display = "";
|
document.getElementById("yanseaa").style.display = "";
|
document.getElementById("bdbaocun").style.display = "none";
|
document.getElementById("bdquxiao").style.display = "none";
|
document.getElementById("baidumap").style.display = "none";
|
document.getElementById("baiduti").style.display = "none";
|
document.getElementById("wenben").style.display = "none";
|
document.getElementById("tagida").style.display = "none";
|
document.getElementById("kaishijiantinga").style.display = "none";
|
document.getElementById("jieshujiantinga").style.display = "none";
|
$.ajax({
|
async: false,
|
type: 'POST',
|
url: "/hxzkuwb/findfloorMap.do",
|
dataType: 'json',
|
data: {
|
value: select_value
|
},
|
success: function (data) {
|
|
imgUrl = '/hxzkuwb/HouTai/MapImg/' + data[0].mapname;
|
// imgUrl = '/hxzkoa/hxzk/image/mapfile/office.jpg';
|
new MarkPoints(imgUrl);
|
}
|
})
|
}
|
}
|
};
|
var ts1 = "";
|
var ts2 = "";
|
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 ppoin = bd09towgs84(poi_arr[i].lng, poi_arr[i].lat)
|
var str2 = ppoin[0] + "," + ppoin[1] + ";";
|
var str3 = ToDegrees(poi_arr[i].lng) + "," + ToDegrees(poi_arr[i].lat) + ";";
|
bdzuobiao += str2;
|
bdzuobiaodufen += str3;
|
}
|
// 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 ToDigital(strDu, strFen, strMiao, len) {
|
len = (len > 6 || typeof (len) == "undefined") ? 6 : len;//精确到小数点后最多六位
|
strDu = (typeof (strDu) == "undefined" || strDu == "") ? 0 : parseFloat(strDu);
|
strFen = (typeof (strFen) == "undefined" || strFen == "") ? 0 : parseFloat(strFen) / 60;
|
strMiao = (typeof (strMiao) == "undefined" || strMiao == "") ? 0 : parseFloat(strMiao) / 60; //秒为分的格式
|
var digital = strDu + strFen + strMiao;
|
if (digital == 0) {
|
return "";
|
} else {
|
return digital.toFixed(len);
|
}
|
};
|
|
|
|
function clearAll() {
|
for (var i = 0; i < overlays.length; i++) {
|
bm.removeOverlay(overlays[i]);
|
}
|
overlays.length = 0;
|
}
|
|
function kaishijianting() {
|
var type = document.getElementById("weilanleixing").value;
|
var tagid = document.getElementById("tagida").value;
|
var bumen = document.getElementById("guanlianduixiang").value;
|
if (tagid == "" || tagid == null) {
|
alert("标签ID不能为空!!!");
|
return;
|
}
|
if (type == "进入告警") {
|
$.ajax({
|
url: "kaishijianting1.do",
|
type: "POST",
|
dataType: "JSON",
|
data: {
|
tagid: tagid,
|
bumen: bumen
|
}
|
})
|
} else {
|
$.ajax({
|
url: "kaishijianting.do",
|
type: "POST",
|
dataType: "JSON",
|
data: {
|
tagid: tagid,
|
bumen: bumen
|
}
|
})
|
}
|
|
alert("移动URT开始绘制")
|
}
|
|
function jieshujianting() {
|
var tagid = document.getElementById("tagida").value;
|
var bumen = document.getElementById("guanlianduixiang").value;
|
if (tagid == "" || tagid == null) {
|
alert("标签ID不能为空!!!");
|
return;
|
}
|
$.ajax({
|
url: "jieshujianting.do",
|
type: "POST",
|
dataType: "JSON",
|
data: {
|
tagid: tagid,
|
bumen: bumen
|
}
|
})
|
alert("保存围栏成功")
|
}
|
|
function huoquzuobiao() {
|
$.ajax({
|
url: "huoquzuobiao.do",
|
type: "POST",
|
dataType: "JSON",
|
success: function (data) {
|
if (data.dataList[0].baoliu10 == "" || data.dataList[0].baoliu10 == null) {
|
alert("还未获取坐标!!!");
|
return;
|
}
|
$("#shoudong").val(data.dataList[0].baoliu10);
|
document.getElementById("kaishijiantinga").style.display = "none";
|
document.getElementById("jieshujiantinga").style.display = "none";
|
|
document.getElementById("bdbaocun").style.display = "";
|
}
|
})
|
}
|
|
function getShape() {
|
var radio = $("#draw_shape").val();
|
return radio;
|
};
|
|
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: "/hxzkuwb/floornumTomap",
|
dataType: 'json',
|
data: {
|
value: floor
|
},
|
success: function (data) {
|
console.log(data)
|
yuandian = [data[0].x0Length, data[0].y0Width];
|
},
|
});
|
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: "/hxzkuwb/floornumTomap",
|
dataType: 'json',
|
data: {
|
value: floor
|
},
|
success: function (data) {
|
map_wl = [data[0].xtruelength, data[0].ytruewidth];
|
},
|
});
|
return map_wl;
|
};
|
|
function getExistFence(leixing) {
|
var floor = document.getElementById("chooselayer").value;
|
var fencelist = [];
|
var fencecolor = [];
|
var fencename = [];
|
$.ajax({
|
async: false,
|
type: 'POST',
|
url: "/hxzkuwb/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
|
}
|
|
function Convertor(ak) {
|
this.stepCount = 100;
|
this.pointCount = [];
|
this.Result = [];
|
this.NoisIndex = [];
|
this.Time = new Date();
|
this.AK = ak;
|
this.M_PI = 3.14159265358979324;
|
this.A = 6378245.0;
|
this.EE = 0.00669342162296594323;
|
this.X_PI = this.M_PI * 3000.0 / 180.0;
|
}
|
|
Convertor.prototype.outofChine = function (p) {
|
if (p.lng < 72.004 || p.lng > 137.8347) {
|
return true;
|
}
|
if (p.lat < 0.8293 || p.lat > 55.8271) {
|
return true;
|
}
|
return false;
|
}
|
;
|
Convertor.prototype.WGS2GCJ_lat = function (x, y) {
|
var ret1 = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
|
ret1 += (20.0 * Math.sin(6.0 * x * this.M_PI) + 20.0 * Math.sin(2.0 * x * this.M_PI)) * 2.0 / 3.0;
|
ret1 += (20.0 * Math.sin(y * this.M_PI) + 40.0 * Math.sin(y / 3.0 * this.M_PI)) * 2.0 / 3.0;
|
ret1 += (160.0 * Math.sin(y / 12.0 * this.M_PI) + 320 * Math.sin(y * this.M_PI / 30.0)) * 2.0 / 3.0;
|
return ret1;
|
}
|
;
|
Convertor.prototype.WGS2GCJ_lng = function (x, y) {
|
var ret2 = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
|
ret2 += (20.0 * Math.sin(6.0 * x * this.M_PI) + 20.0 * Math.sin(2.0 * x * this.M_PI)) * 2.0 / 3.0;
|
ret2 += (20.0 * Math.sin(x * this.M_PI) + 40.0 * Math.sin(x / 3.0 * this.M_PI)) * 2.0 / 3.0;
|
ret2 += (150.0 * Math.sin(x / 12.0 * this.M_PI) + 300.0 * Math.sin(x / 30.0 * this.M_PI)) * 2.0 / 3.0;
|
return ret2;
|
}
|
;
|
Convertor.prototype.WGS2GCJ = function (poi) {
|
if (this.outofChine(poi)) {
|
return;
|
}
|
var poi2 = {};
|
var dLat = this.WGS2GCJ_lat(poi.lng - 105.0, poi.lat - 35.0);
|
var dLon = this.WGS2GCJ_lng(poi.lng - 105.0, poi.lat - 35.0);
|
var radLat = poi.lat / 180.0 * this.M_PI;
|
var magic = Math.sin(radLat);
|
magic = 1 - this.EE * magic * magic;
|
var sqrtMagic = Math.sqrt(magic);
|
dLat = (dLat * 180.0) / ((this.A * (1 - this.EE)) / (magic * sqrtMagic) * this.M_PI);
|
dLon = (dLon * 180.0) / (this.A / sqrtMagic * Math.cos(radLat) * this.M_PI);
|
poi2.lat = poi.lat + dLat;
|
poi2.lng = poi.lng + dLon;
|
return poi2;
|
};
|
Convertor.prototype.GCJ2BD09 = function (poi) {
|
var poi2 = {};
|
var x = poi.lng
|
, y = poi.lat;
|
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.X_PI);
|
var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.X_PI);
|
poi2.lng = z * Math.cos(theta) + 0.0065;
|
poi2.lat = z * Math.sin(theta) + 0.006;
|
return poi2;
|
}
|
;
|
/**
|
* WGS->百度坐标系
|
*/
|
Convertor.prototype.WGS2BD09 = function (poi) {
|
//WGS->GCJ
|
var poi2 = this.WGS2GCJ(poi);
|
if (typeof poi2 === "undefined") {
|
return;
|
}
|
//GCJ->百度坐标系
|
return this.GCJ2BD09(poi2);
|
}
|
|
// 定义一些常量
|
const x_PI = 3.14159265358979324 * 3000.0 / 180.0
|
const PI = 3.1415926535897932384626
|
const a = 6378245.0
|
const ee = 0.00669342162296594323
|
|
/**
|
* 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换 / 即百度转谷歌、高德
|
* @param { Number } bd_lon
|
* @param { Number } bd_lat
|
*/
|
function bd09togcj02(bd_lon, bd_lat) {
|
var x_pi = 3.14159265358979324 * 3000.0 / 180.0
|
var x = bd_lon - 0.0065
|
var y = bd_lat - 0.006
|
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
|
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
|
var gg_lng = z * Math.cos(theta)
|
var gg_lat = z * Math.sin(theta)
|
return [gg_lng, gg_lat]
|
}
|
|
/**
|
* 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换 / 即谷歌、高德 转 百度
|
* @param { Number } lng
|
* @param { Number } lat
|
*/
|
function gcj02tobd09(lng, lat) {
|
var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI)
|
var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI)
|
var bd_lng = z * Math.cos(theta) + 0.0065
|
var bd_lat = z * Math.sin(theta) + 0.006
|
return [bd_lng, bd_lat]
|
}
|
|
/**
|
* WGS84坐标系转火星坐标系GCj02 / 即WGS84 转谷歌、高德
|
* @param { Number } lng
|
* @param { Number } lat
|
*/
|
function wgs84togcj02(lng, lat) {
|
if (outOfChina(lng, lat)) {
|
return [lng, lat]
|
} else {
|
var dlat = transformlat(lng - 105.0, lat - 35.0)
|
var dlng = transformlng(lng - 105.0, lat - 35.0)
|
var radlat = lat / 180.0 * PI
|
var magic = Math.sin(radlat)
|
magic = 1 - ee * magic * magic
|
var sqrtmagic = Math.sqrt(magic)
|
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)
|
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)
|
const mglat = lat + dlat
|
const mglng = lng + dlng
|
return [mglng, mglat]
|
}
|
}
|
|
/**
|
* GCJ02(火星坐标系) 转换为 WGS84 / 即谷歌高德转WGS84
|
* @param { Number } lng
|
* @param { Number } lat
|
*/
|
function gcj02towgs84(lng, lat) {
|
if (outOfChina(lng, lat)) {
|
return [lng, lat]
|
} else {
|
var dlat = transformlat(lng - 105.0, lat - 35.0)
|
var dlng = transformlng(lng - 105.0, lat - 35.0)
|
var radlat = lat / 180.0 * PI
|
var magic = Math.sin(radlat)
|
magic = 1 - ee * magic * magic
|
var sqrtmagic = Math.sqrt(magic)
|
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)
|
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)
|
const mglat = lat + dlat
|
const mglng = lng + dlng
|
return [lng * 2 - mglng, lat * 2 - mglat]
|
}
|
}
|
|
/**
|
* 百度坐标系转wgs84坐标系
|
* @param {*} lng
|
* @param {*} lat
|
*/
|
function bd09towgs84(lng, lat) {
|
// 百度坐标系先转为火星坐标系
|
const gcj02 = bd09togcj02(lng, lat)
|
// 火星坐标系转wgs84坐标系
|
const result = gcj02towgs84(gcj02[0], gcj02[1])
|
return result
|
}
|
|
/**
|
* wgs84坐标系转百度坐标系
|
* @param {*} lng
|
* @param {*} lat
|
*/
|
function wgs84tobd09(lng, lat) {
|
// wgs84先转为火星坐标系
|
const gcj02 = wgs84togcj02(lng, lat)
|
// 火星坐标系转百度坐标系
|
const result = gcj02tobd09(gcj02[0], gcj02[1])
|
return result
|
}
|
|
/**
|
* 经度转换
|
* @param { Number } lng
|
* @param { Number } lat
|
*/
|
function transformlat(lng, lat) {
|
var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
|
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
|
ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0
|
ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
|
return ret
|
}
|
|
/**
|
* 纬度转换
|
* @param { Number } lng
|
* @param { Number } lat
|
*/
|
function transformlng(lng, lat) {
|
var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
|
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
|
ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0
|
ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
|
return ret
|
}
|
|
/**
|
* 判断是否在国内,不在国内则不做偏移
|
* @param {*} lng
|
* @param {*} lat
|
*/
|
function outOfChina(lng, lat) {
|
return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false)
|
}
|
|
|
function MarkPoints(Imgurl) {
|
ts1 = getYuandian();
|
ts2 = getTruemap();
|
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);
|
_this.FenceList = getExistFence("zuobiao");
|
_this.FenceColor = getExistFence("color");
|
_this.FenceName = getExistFence("name");
|
var x_x0 = new Number(ts1[0]);
|
var y_y0 = new Number(ts1[1]);
|
var trueMeasure = ts2;
|
var trueLength = new Number(trueMeasure[0]);
|
var trueWidth = new Number(trueMeasure[1]);
|
var x_ratio = new Number(_this.img.naturalWidth / trueLength);
|
var y_ratio = new Number(_this.img.naturalHeight / trueWidth);
|
|
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 = [];
|
//实际坐标转成图上坐标
|
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);
|
}
|
}
|
//var color = _this.FenceColor[m];
|
var color = getDrawColor(_this.FenceColor[m]);
|
var name = _this.FenceName[m];
|
|
if (draw_points_list.length == 2) {
|
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 {
|
var can = _this.context;
|
can.beginPath();
|
can.fillStyle = color;
|
can.lineWidth = 2;
|
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";
|
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]);
|
var points = _this.allMarkLins[m];
|
var newPoints = _this.getNewPoints(points);
|
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++) {
|
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 () {
|
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();
|
var x_x0 = new Number(ts1[0]);
|
var y_y0 = new Number(ts1[1]);
|
var trueMeasure = ts2;
|
var trueLength = new Number(trueMeasure[0]);
|
var trueWidth = new Number(trueMeasure[1]);
|
var x_ratio = new Number(_this.img.naturalWidth / trueLength);
|
var y_ratio = new Number(_this.img.naturalHeight / trueWidth);
|
|
if (shape == "多边形") {
|
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;
|
if (Math.abs(now_x - start_x) <= 5 && Math.abs(now_y - start_y) <= 5) { //连成闭合图形时(代替原鼠标右键)
|
$("#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;
|
|
if (_this.CreatLinepoints.length > 0) {
|
var jposXY = _this.CreatLinepoints[_this.CreatLinepoints.length - 1]
|
var jrealx = (new Number(jposXY.x)) / (_this.rateNum * x_ratio) + x_x0;
|
jrealx = jrealx.toFixed(0);
|
var jrealy = (new Number(jposXY.y)) / (_this.rateNum * y_ratio) + y_y0;
|
jrealy = jrealy.toFixed(0);
|
var realx = (new Number(posXY.x)) / (_this.rateNum * x_ratio) + x_x0;
|
realx = realx.toFixed(0);
|
var realy = (new Number(posXY.y)) / (_this.rateNum * y_ratio) + y_y0;
|
realy = realy.toFixed(0);
|
var juli = Math.sqrt(Math.pow(realx - jrealx, 2) + Math.pow(realy - jrealy, 2))
|
juli = (juli / 100).toFixed(2);
|
$("#draw_hint").html("距离上个点" + juli + "米")
|
}
|
|
_this.CreatLinepoints.push(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;
|
|
if (_this.CreatLinepoints.length > 0) {
|
var jposXY = _this.CreatLinepoints[_this.CreatLinepoints.length - 1]
|
var jrealx = (new Number(jposXY.x)) / (_this.rateNum * x_ratio) + x_x0;
|
jrealx = jrealx.toFixed(0);
|
var jrealy = (new Number(jposXY.y)) / (_this.rateNum * y_ratio) + y_y0;
|
jrealy = jrealy.toFixed(0);
|
var realx = (new Number(posXY.x)) / (_this.rateNum * x_ratio) + x_x0;
|
realx = realx.toFixed(0);
|
var realy = (new Number(posXY.y)) / (_this.rateNum * y_ratio) + y_y0;
|
realy = realy.toFixed(0);
|
var juli = Math.sqrt(Math.pow(realx - jrealx, 2) + Math.pow(realy - jrealy, 2))
|
juli = (juli / 100).toFixed(2);
|
$("#draw_hint").html("距离上个点" + juli + "米")
|
}
|
|
_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;
|
|
if (_this.CreatLinepoints.length > 0) {
|
var jposXY = _this.CreatLinepoints[_this.CreatLinepoints.length - 1]
|
var jrealx = (new Number(jposXY.x)) / (_this.rateNum * x_ratio) + x_x0;
|
jrealx = jrealx.toFixed(0);
|
var jrealy = (new Number(jposXY.y)) / (_this.rateNum * y_ratio) + y_y0;
|
jrealy = jrealy.toFixed(0);
|
var realx = (new Number(posXY.x)) / (_this.rateNum * x_ratio) + x_x0;
|
realx = realx.toFixed(0);
|
var realy = (new Number(posXY.y)) / (_this.rateNum * y_ratio) + y_y0;
|
realy = realy.toFixed(0);
|
var juli = Math.sqrt(Math.pow(realx - jrealx, 2) + Math.pow(realy - jrealy, 2))
|
juli = (juli / 100).toFixed(2);
|
$("#draw_hint").html("距离上个点" + juli + "米")
|
}
|
|
_this.CreatLinepoints.push(posXY);
|
|
_this.allMarkLins.pop();
|
_this.allMarkLins.push(_this.CreatLinepoints);
|
_this.allFenceColor.pop();
|
_this.allFenceColor.push(color);
|
|
_this.drawImg();
|
|
if (_this.CreatLinepoints.length == 2) {
|
setTimeout(function () {
|
$("#draw_hint").html("绘制完成,请点击保存,放弃绘制请点击取消");
|
}, 1500)
|
|
_this.CreateLineColor.push(color);
|
|
_this.markFlag = false;
|
_this.dragFlag = true;
|
_this.canvas.style.cursor = "normal";
|
_this.drawImg();
|
return;
|
}
|
}
|
}
|
if (event.button == 0) {//点击鼠标左键
|
_this.dragFlag = true;
|
_this.canvas.style.cursor = "move";
|
_this.pos = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
|
}
|
},
|
/*鼠标移动事件*/
|
mouseMove: function (event) {
|
var _this = this;
|
/*拖拽*/
|
if (_this.dragFlag) {
|
_this.canvas.style.cursor = "move";
|
var pos1 = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
|
var x = pos1.x - _this.pos.x;
|
var y = pos1.y - _this.pos.y;
|
_this.pos = pos1;
|
_this.imgX += x;
|
_this.imgY += y;
|
_this.drawImg();
|
}
|
/*边界标记*/
|
if (!_this.dragFlag && _this.markFlag) {
|
//var 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(ts1[0]);
|
var y_y0 = new Number(ts1[1]);
|
var trueMeasure = ts2;
|
var trueLength = new Number(trueMeasure[0]);
|
var trueWidth = new Number(trueMeasure[1]);
|
var x_ratio = new Number(_this.img.naturalWidth / trueLength);
|
var y_ratio = new Number(_this.img.naturalHeight / trueWidth);
|
//console.log(_this.img.naturalWidth,trueLength,_this.img.naturalHeight,trueWidth,_this.rateNum)
|
var zuobiao = _this.CreatLinepoints;
|
|
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);
|
//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: '/hxzkuwb/addbaidufence',
|
dataType: 'json',
|
data: {
|
layer: layer,
|
weilanleixing: weilanleixing,
|
guanlianduixiang: guanlianduixiang,
|
quyumingcheng: quyumingcheng,
|
xingzhuang: xingzhuang,
|
yanse: yanse,
|
zuobiao: String(real_zuobiao),
|
},
|
success: function (data) {
|
|
}
|
})
|
layers.msg('保存成功')
|
}
|
;
|
|
},
|
|
}
|
//var imgUrl = '../image/mapfile/led.png';//图片路径
|
//var imgUrl = ''
|
new MarkPoints(imgUrl);
|
</script>
|
</html>
|