From 8aa3edd56c279100c9053576f3e90fa55459fe77 Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Mon, 16 Jan 2023 16:15:55 +0800
Subject: [PATCH] 修改
---
public/map/widgets/securityMap/SecurityMap.js | 456 +++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 300 insertions(+), 156 deletions(-)
diff --git a/public/map/widgets/securityMap/SecurityMap.js b/public/map/widgets/securityMap/SecurityMap.js
index dd96a88..502e27f 100644
--- a/public/map/widgets/securityMap/SecurityMap.js
+++ b/public/map/widgets/securityMap/SecurityMap.js
@@ -125,27 +125,26 @@
_siteLayer: new GraphicsLayer(),
layuiLayer: null,
layuiLadate: null,
- tabIndex: 0,
// 保留添加实体图层的变量
addEntitys: null,
entitysData: [],
-
-
- // 用来存储区域名称
- globalRegionName: null,
-
- // 用来区域得最大最小经纬度
- currentDrawing: [],
// 存储新增点，线，面，数据的地方
polygonData: [],
polygonFlag: false,
editToolbar: null,
addPolygonEntitys: null,
+ addLineEntitys: null,
- // 巡逻区域或者巡逻路线的描述
- routeOrRegionDescribe: null,
+ //是否选中电子围栏区域
+ isChecked: false,
+
+ //当前处警员是否已有电子围栏
+ isEngineer: false,
+
+ //是否可编辑
+ isEdit: false,
// 用来记录巡逻区域或者巡逻路线的下标的
patrolIndex: 0,
@@ -156,6 +155,13 @@
y: 0,
offset: null,
moveThis: null,
+
+ //编辑工具激活后为true
+ editToolbarStatus: false,
+
+ //基础路径
+ //pathUrl: "http://localhost:89",
+ pathUrl: "https://web.byisf.com/api/blade-jfpts",
// 电子围栏需要新增的Id
newElectronicFenceId: null,
@@ -170,6 +176,7 @@
this._map = options.map;
objThis = this;
+ //创建图层
this.addEntitys = new GraphicsLayer({
id: 'addEntitys'
});
@@ -177,6 +184,12 @@
// 添加点面线的图层
this.addPolygonEntitys = new GraphicsLayer({
id: 'addPolygonEntitys'
+ });
+
+
+ // 添加线的图层
+ this.addLineEntitys = new GraphicsLayer({
+ id: 'addLineEntitys'
});
// 添加所有图层的地方
@@ -187,12 +200,86 @@
this._map.addLayer(this.addEntitys);
this._map.addLayer(this.addPolygonEntitys);
+ this._map.addLayer(this.addLineEntitys);
this._map.addLayer(this.entityPolygonAll);
},
startup: function() {
objThis._map.addLayer(objThis._siteLayer);
+ var that = this;
+
+ //删除电子围栏点击事件
+ $(".mapBtn .delBtn").click(function() {
+ if (!that.isEngineer) {
+ layui.use('layer', function() {
+ layui.layer.msg('请先新增电子围栏信息!')
+ })
+ return;
+ }
+ //需选中电子围栏，然后进行删除
+ layer.confirm('是否确认删除', {
+ btn: ['确定', '取消'], //按钮
+ title: false
+ }, function() {
+ //删除数据库数据
+ $.ajax({
+ url: that.pathUrl + '/enclosure/enclosure/deleteByAnumber',
+ type: 'POST',
+ dataType: 'JSON',
+ data: {
+ anumber: anumber
+ },
+ success: function(result) {
+ if (result.code == 200) {
+ layui.use('layer', function() {
+ layui.layer.msg('删除电子围栏成功!')
+ })
+ }
+ }
+ })
+ that.addPolygonEntitys.clear();
+ //修改围栏状态
+ that.isEngineer = false;
+ })
+ })
+
+ //新增电子围栏
+ $('.mapBtn .insBtn').click(function() {
+ //修改按钮样式
+ $("#insertEngineeringMap").css("color", "#3385FF")
+ //判断
+ if (that.isEngineer) {
+ layui.use('layer', function() {
+ layui.layer.msg('已存在电子围栏');
+ })
+ //新增按钮颜色改回
+ $("#insertEngineeringMap").css("color", "#757575");
+ } else {
+ layui.use('layer', function() {
+ layui.layer.msg('请开始划分电子围栏');
+ })
+ that.polygonFlag = true;
+ }
+ })
+
+
+ //编辑电子围栏
+ $('.mapBtn .editBtn').click(function() {
+ if (!that.isEngineer) {
+ layui.use('layer', function() {
+ layui.layer.msg('请先新增电子围栏信息!')
+ })
+ return;
+ }
+ $("#editEngineeringMap").css("color", "#3385FF");
+ //修改为可编辑状态
+ that.isEdit = true;
+ layui.use('layer', function() {
+ layui.layer.msg('点击电子围栏图形即可编辑');
+ })
+ })
+
},
//根据key 取value值
@@ -211,19 +298,20 @@
//页面打开后，获取参数数据
open: function() {
var that = this;
+ //获取父页面传过来的参数
var lgtd = that.getQueryStringByKey('jd');
var lttd = that.getQueryStringByKey('wd');
- if (lgtd == null || lgtd == "") {
- return;
- }
anumber = that.getQueryStringByKey('code');
realname = that.getQueryString('name');
- //所在位置标记
- that.addPoint(that.addEntitys, lgtd, lttd, './images/security.png');
+ //如果处警员的位置信息存在
+ if (lgtd != null && lgtd != "") {
+ //所在位置标记
+ that.addPoint(that.addEntitys, lgtd, lttd, './images/security.png');
+ }
+
//获取当前处警员的电子围栏信息
$.ajax({
- url: 'https://web.byisf.com/api/blade-jfpts/enclosure/enclosure/selectEnclosureDetail',
- //url: 'http://localhost:89/enclosure/enclosure/selectEnclosureDetail',
+ url: this.pathUrl + '/enclosure/enclosure/selectEnclosureDetail',
type: 'GET',
dataType: 'JSON',
data: {
@@ -244,19 +332,14 @@
entityArr.push([Number(coordinate[i].split(' ')[0]), Number(coordinate[i].split(' ')[1])]);
}
}
+ that.isEngineer = true;
that.addPolygon(that.addPolygonEntitys, entityArr);
} else {
//如果无电子围栏信息，则提示请编辑电子围栏信息
//编辑好电子围栏信息后，将当前处警员的电子围栏信息保存到数据库
that.newElectronicFenceId = null;
-
- layui.use('layer', function() {
- layui.layer.msg('请开始划分电子围栏');
- })
- that.polygonFlag = true;
that.newElectronicFenceId = anumber;
}
-
}
}
})
@@ -266,53 +349,70 @@
//鼠标右击事件
document.getElementById('mainMapWidget').onmousedown = function(event) {
+ //去除系统默认右键功能
+ document.oncontextmenu = function() {
+ //alert("当前页面不能使用右键！");
+ return false;
+ }
+ //event.preventDefault();
if (event.button == 2) {
- if (that.polygonData.length < 2) {
- layui.use('layer', function() {
- layui.layer.msg('不能形成区域，请继续划分！！！')
- })
- return;
- }
if (that.polygonFlag == true) {
- // 勾画最后一个点
- var normalizedVal = webMercatorUtils.xyToLngLat(event.mapPoint.x, event.mapPoint.y);
- that.polygonData.push([normalizedVal[0], normalizedVal[1]]);
- // 声明空字符串，存储数据
- var dataStr = '';
- var data = null;
- if (that.patrolIndex == 1) {
- that.addPolyline(that.addPolygonEntitys, that.polygonData);
- // 获取数据
- data = that.addPolygonEntitys.graphics[0].geometry.paths[0];
- } else {
- that.addPolygon(that.addPolygonEntitys, that.polygonData);
- // 获取数据
- data = that.addPolygonEntitys.graphics[0].geometry.rings[0];
- }
-
- // 组装数据
- for (var i = 0; i < data.length; i++) {
- dataStr += (data[i][0] + ' ' + data[i][1] + ',');
- }
- dataStr = dataStr.substring(0, dataStr.length - 1);
-
- //将数据存入数据库
- $.ajax({
- url: 'https://web.byisf.com/api/blade-jfpts/enclosure/enclosure/insertes',
- //url: 'http://localhost:89/enclosure/enclosure/insertes',
- type: 'POST',
- dataType: 'JSON',
- data: {
- aname: realname,
- anumber: anumber,
- routeInfo: dataStr
- },
- success: function(result) {
- if (result.code == 200) {}
+ if (that.polygonData.length >= 2) {
+ // 勾画最后一个点
+ var normalizedVal = webMercatorUtils.xyToLngLat(event.mapPoint.x, event.mapPoint.y);
+ that.polygonData.push([normalizedVal[0], normalizedVal[1]]);
+ // 声明空字符串，存储数据
+ var dataStr = '';
+ var data = null;
+ if (that.patrolIndex == 1) {
+ that.addPolyline(that.addPolygonEntitys, that.polygonData);
+ // 获取数据
+ data = that.addPolygonEntitys.graphics[0].geometry.paths[0];
+ } else {
+ that.addPolygon(that.addPolygonEntitys, that.polygonData);
+ // 获取数据
+ data = that.addPolygonEntitys.graphics[0].geometry.rings[0];
}
- })
+
+ // 组装数据
+ for (var i = 0; i < data.length; i++) {
+ dataStr += (data[i][0] + ' ' + data[i][1] + ',');
+ }
+ dataStr = dataStr.substring(0, dataStr.length - 1);
+
+ //将数据存入数据库
+ $.ajax({
+ url: that.pathUrl + '/enclosure/enclosure/insertes',
+ type: 'POST',
+ dataType: 'JSON',
+ data: {
+ aname: realname,
+ anumber: anumber,
+ routeInfo: dataStr
+ },
+ success: function(result) {
+ if (result.code == 200) {
+ layui.use('layer', function() {
+ layui.layer.msg('新增电子围栏成功!')
+ })
+ //清除点信息
+ that.polygonData = [];
+ //新增按钮颜色改回
+ $("#insertEngineeringMap").css("color", "#757575");
+ //清空线图层信息
+ that.addLineEntitys.clear();
+ //修改电子围栏数据状态
+ that.isEngineer = true;
+ //修改电子围栏选中状态
+ that.isChecked = false;
+ //修改电子围栏编辑状态
+ that.polygonFlag = false;
+ }
+ }
+ })
+ }
+
}
- that.polygonFlag = false;
}
}
@@ -320,12 +420,14 @@
// 鼠标点击事件
clickHand: function() {
-
+ var that = this;
var self = this;
self._map.onClick = mapClick;
+
+ //点击事件
function mapClick(evt) {
- debugger;
+ //坐标格式转换
var normalizedVal = webMercatorUtils.xyToLngLat(evt.mapPoint.x, evt.mapPoint.y);
var y = self._map.toMap({
spatialReference: '4326',
@@ -333,7 +435,6 @@
x: evt.screenPoint.x,
y: evt.screenPoint.y,
});
-
// 编辑中的
if (self.polygonFlag == true) {
@@ -354,72 +455,134 @@
// 保存当前点击得图形
// self.currentDrawing = evt.graphic;
- self.modifyPolygon();
+ that.isChecked = true;
- self.activateToolbar(evt.graphic);
+ //self.modifyPolygon();
+
+ //进入编辑状态
+ //self.activateToolbar(evt.graphic);
} else { // 点击不在图形上
+ //修改电子围栏选中状态
+ that.isChecked = false;
self.modifyPolygon()
+ }
+
+ if (that.isEdit) {
+ that.isChecked = true;
+ self.modifyPolygon();
+ //进入编辑状态
+ self.activateToolbar(evt.graphic);
}
}
}
- // 提示信息
- $(document).off('mousemove').mousemove(function(e) {
- var y = e.clientY + 10;
- var x = e.clientX + 20;
-
- if (e.clientX < 40) {
- var x = 40;
- }
-
- if (e.clientY < 42) {
- y = 42;
- }
-
- if (e.clientY > ($(window).height() - 82)) {
- y = ($(window).height() - 66);
- }
-
- if (e.clientX > ($(window).width() - 184)) {
- x = ($(window).width() - 184);
- }
-
- if (self.tabIndex == 1 || self.tabIndex == 2) {
-
- if (self.polygonFlag == true) {
- $('.police-dispatching .tips').stop().show();
-
- if (self.polygonData.length == 0) {
- $('.police-dispatching .tips').text('单击左键开始绘制。');
- } else {
- if (e.clientY > ($(window).height() - 98)) {
- y = ($(window).height() - 88);
- }
- $('.police-dispatching .tips').text('单击左键新增加点。单击右键完成绘制。');
- }
-
- $('.police-dispatching .tips').css({
- 'top': y,
- 'left': x,
- })
- } else {
- $('.police-dispatching .tips').stop().hide();
+ // 鼠标移动监听事件
+ $(document).off('mousemove').mousemove(function(ev) {
+ var oEvent = ev || event;
+ //鼠标移动，提示语
+ var oDiv1 = document.getElementById('securityMapTips1');
+ var oDiv2 = document.getElementById('securityMapTips2');
+ var oDiv3 = document.getElementById('securityMapTips3');
+ var oDiv4 = document.getElementById('securityMapTips4');
+ //新增电子围栏提示语
+ if (self.polygonFlag == true) {
+ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+ var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
+ if (self.polygonData.length == 0) {
+ oDiv1.style.left = oEvent.clientX + scrollLeft + 15 + 'px';
+ oDiv1.style.top = oEvent.clientY + scrollTop + 'px';
+ oDiv1.style.display = 'block';
}
+ if (self.polygonData.length == 1) {
+ oDiv1.style.display = 'none';
+ oDiv2.style.left = oEvent.clientX + scrollLeft + 15 + 'px';
+ oDiv2.style.top = oEvent.clientY + scrollTop + 'px';
+ oDiv2.style.display = 'block';
+ }
+
+ if (self.polygonData.length > 1) {
+ oDiv2.style.display = 'none';
+ oDiv3.style.left = oEvent.clientX + scrollLeft + 15 + 'px';
+ oDiv3.style.top = oEvent.clientY + scrollTop + 'px';
+ oDiv3.style.display = 'block';
+ }
+
+ //已经有一个点或以上
+ if (self.polygonData.length >= 1) {
+ //鼠标移动，上个点和当前点之间画线
+ //临时的线数据
+ var tempLineData = [];
+ //鼠标当前点的数据
+ var normalizedVal = webMercatorUtils.xyToLngLat(oEvent.originalEvent.mapPoint.x, oEvent.originalEvent.mapPoint.y);
+ //获取面数据
+ var polygonArr = self.polygonData;
+ //上个点的数据
+ var prevPointArr = polygonArr[self.polygonData.length - 1];
+ //封装数据
+ tempLineData.push([prevPointArr[0], prevPointArr[1]]);
+ tempLineData.push([normalizedVal[0], normalizedVal[1]]);
+ console.log(tempLineData, 123);
+ //画线
+ self.addLine(self.addLineEntitys, tempLineData);
+ }
} else {
- $('.police-dispatching .tips').stop().hide();
+ oDiv3.style.display = 'none';
}
+
+ //编辑电子围栏提示语
+ if (that.editToolbarStatus) {
+ $("#securityMapTips4").css("width", "220px");
+ $("#securityMapTips4").css("height", "40px");
+ $("#securityMapTips4").css("line-height", "20px");
+ $("#securityMapTips4 span").css("line-height", "20px");
+ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+ var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
+ oDiv4.style.left = oEvent.clientX + scrollLeft + 15 + 'px';
+ oDiv4.style.top = oEvent.clientY + scrollTop + 'px';
+ oDiv4.style.display = 'block';
+ } else {
+ oDiv4.style.display = 'none';
+ }
+
})
},
- //新增线
+ /**
+ * 新增线图层
+ * @param {*} entitys addPolygonEntitys
+ * @param {*} path 坐标点的数据
+ */
addPolyline: function(entitys, path) {
entitys.clear();
var polylineSymbol = new SimpleLineSymbol();
polylineSymbol.color = [255, 0, 0, 1];
- polylineSymbol.width = 4;
+ polylineSymbol.width = 2;
+ var polyline = new Polyline({
+ "paths": [path],
+ "spatialReference": {
+ "wkid": 4326
+ }
+ });
+
+ entitys.add(new Graphic(polyline, polylineSymbol));
+ },
+
+
+ /**
+ * 新增线图层
+ * @param {*} entitys addLineEntitys
+ * @param {*} path 坐标点的数据
+ */
+ addLine: function(entitys, path) {
+ entitys.clear();
+ var polylineSymbol = new SimpleLineSymbol();
+ //var polylineSymbol = new SimpleMarkerSymbol();
+ polylineSymbol.color = [255, 0, 0, 1];
+ polylineSymbol.width = 2;
+ polylineSymbol.style = "short-dot";
var polyline = new Polyline({
"paths": [path],
"spatialReference": {
@@ -457,8 +620,7 @@
//更新电子围栏数据
$.ajax({
- url: 'https://web.byisf.com/api/blade-jfpts/enclosure/enclosure/updatee',
- //url: 'http://localhost:89/enclosure/enclosure/updatee',
+ url: this.pathUrl + '/enclosure/enclosure/updatee',
type: 'POST',
dataType: 'JSON',
data: {
@@ -466,18 +628,29 @@
routeInfo: dataStr
},
success: function(result) {
- if (result.code == 200) {}
+ if (result.code == 200) {
+ layui.use('layer', function() {
+ layui.layer.msg('电子围栏修改成功!');
+ })
+ $("#editEngineeringMap").css("color", "#757575");
+ $("#securityMapTips4").css("display", "none");
+ self.isEdit = false;
+ self.editToolbarStatus = false;
+ }
}
})
-
}
},
activateToolbar: function(graphic) {
+ var that = this;
+
+ that.editToolbarStatus = true;
var tool = 0;
this.editToolbar = new Edit(this._map);
+
// if (registry.byId("tool_move").checked) {
tool = tool | Edit.MOVE;
@@ -507,44 +680,8 @@
close: function() {},
- // 获取当前时间，以及昨天现在的时间
- getTime: function getTime() {
- var timestamp = Date.parse(new Date());
-
- // 当前时间
- var currentTime = new Date(timestamp);
- // 年
- var currentY = currentTime.getFullYear();
- // 月
- var currentM = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime.getMonth() + 1;
- // 日
- var currentD = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate();
- // 时
- var currentH = currentTime.getHours() < 10 ? '0' + currentTime.getHours() : currentTime.getHours();
- // 分
- var currentDd = currentTime.getMinutes() < 10 ? '0' + currentTime.getMinutes() : currentTime.getMinutes();
- // 明天
- var tomorrowTime = new Date(timestamp - 60 * 60 * 24 * 1000);
- // 年
- var tomorrowY = tomorrowTime.getFullYear();
- // 月
- var tomorrowM = tomorrowTime.getMonth() + 1 < 10 ? '0' + (tomorrowTime.getMonth() + 1) : tomorrowTime.getMonth() + 1;
- // 日
- var tomorrowD = tomorrowTime.getDate() < 10 ? '0' + tomorrowTime.getDate() : tomorrowTime.getDate();
- // 时
- var tomorrowH = tomorrowTime.getHours() < 10 ? '0' + tomorrowTime.getHours() : tomorrowTime.getHours();
- // 分
- var tomorrowDd = tomorrowTime.getMinutes() < 10 ? '0' + tomorrowTime.getMinutes() : tomorrowTime.getMinutes();
- return {
- current: currentY + '-' + currentM + '-' + currentD + ' ' + currentH + ':' + currentDd,
- tomorrow: tomorrowY + '-' + tomorrowM + '-' + tomorrowD + ' ' + tomorrowH + ':' + tomorrowDd,
- month: currentM + currentD
- };
- },
-
// 创建实体图层
createEntitys: function(entitys, entityContent, name, item, lgtd, lttd, outlineColors) {
-
var symbol = new esri.symbol.PictureMarkerSymbol(outlineColors, 33, 48);
symbol.name = name;
var pt = new Point(lgtd, lttd, new esri.SpatialReference({
@@ -558,13 +695,18 @@
//在地图上新增点
addPoint: function(entitys, lgtd, lttd, img) {
- var symbol = new esri.symbol.PictureMarkerSymbol(img, 22, 22);
+ if (img == undefined) {
+ var symbol = new esri.symbol.PictureMarkerSymbol('./images/point.png', 22, 22);
+ } else {
+ var symbol = new esri.symbol.PictureMarkerSymbol(img, 22, 22);
+ }
var pt = new Point(lgtd, lttd, new SpatialReference({
wkid: 4326
}));
var graphic = new esri.Graphic(pt, symbol);
entitys.add(graphic);
},
+
//绘制多边形
addPolygon: function(entitys, rings) {
@@ -581,5 +723,7 @@
}
});
+
+
return Widget;
});
\ No newline at end of file
--
Gitblit v1.9.3