From c6796cb12ca7aa0717349ca185ece091acdd2bbc Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Tue, 20 Apr 2021 15:32:01 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue
---
public/map/widgets/securityMap/SecurityMap.js | 551 ++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 389 insertions(+), 162 deletions(-)
diff --git a/public/map/widgets/securityMap/SecurityMap.js b/public/map/widgets/securityMap/SecurityMap.js
index 17d7985..00dd42c 100644
--- a/public/map/widgets/securityMap/SecurityMap.js
+++ b/public/map/widgets/securityMap/SecurityMap.js
@@ -3,18 +3,18 @@
* @Version: 1.0
* @Author: yangsx
* @Date: 2019-12-09 19:01:40
- * @LastEditors: song
- * @LastEditTime: 2021-02-25 13:59:29
+ * @LastEditors: yangsx
+ * @LastEditTime: 2019-12-14 14:44:57
*/
define([
"dojo",
"dojo/_base/declare",
"dojo/_base/lang",
"base/BaseWidget",
- "dojo/text!widgets/SecurityMap/template.html",
+ "dojo/text!widgets/securityMap/template.html",
"base/AppEvent",
"base/ConfigData",
- "widgets/realTimePolice/config",
+ "widgets/securityMap/config",
"dojo/dom",
"dojo/dom-construct",
"dojo/dom-attr",
@@ -31,8 +31,12 @@
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/Color",
+ "esri/toolbars/edit",
"esri/graphic",
"esri/geometry/Point",
+ "esri/geometry/Polyline",
+ "esri/geometry/Polygon",
+ "esri/geometry/Extent",
"esri/tasks/FeatureSet",
"esri/renderers/HeatmapRenderer",
"esri/symbols/SimpleLineSymbol",
@@ -55,9 +59,8 @@
"esri/layers/ImageParameters",
"esri/geometry/geometryEngine",
"esri/dijit/PopupTemplate",
- "widgets/SecurityMap/FlareClusterLayer_v3",
- "dojo/domReady!",
- "widgets/realTimePolice/LayUIDataTable"
+ "widgets/securityMap/FlareClusterLayer_v3",
+ "dojo/domReady!"
], function(
dojo,
declare,
@@ -83,8 +86,12 @@
Query,
QueryTask,
Color,
+ Edit,
Graphic,
Point,
+ Polyline,
+ Polygon,
+ Extent,
FeatureSet,
HeatmapRenderer,
SimpleLineSymbol,
@@ -112,11 +119,9 @@
var Widget = declare([BaseWidget], {
widgetName: "SecurityMap",
label: "处警队伍管理",
-
templateString: template,
_map: null,
objThis: null,
- // 现场图层
_siteLayer: new GraphicsLayer(),
layuiLayer: null,
layuiLadate: null,
@@ -126,25 +131,18 @@
addEntitys: null,
entitysData: [],
- // 是否派发保安的 文字
- treatmentIndex: null,
- securityFlag: false,
- editParentInd: null,
-
- // 存储新增点，线，面，数据的地方
- polygonData: [],
- polygonFlag: false,
- editToolbar: null,
- addPolygonEntitys: null,
-
- // 所有的面图层
- entityPolygonAll: null,
// 用来存储区域名称
globalRegionName: null,
// 用来区域得最大最小经纬度
currentDrawing: [],
+
+ // 存储新增点，线，面，数据的地方
+ polygonData: [],
+ polygonFlag: false,
+ editToolbar: null,
+ addPolygonEntitys: null,
// 巡逻区域或者巡逻路线的描述
routeOrRegionDescribe: null,
@@ -158,200 +156,429 @@
y: 0,
offset: null,
moveThis: null,
+
// 电子围栏需要新增的Id
newElectronicFenceId: null,
// 新增路线时，派发人员，人员名称，以及人员id
- peopleRealName: null,
- pepleRealId: null,
+ anumber: null,
+ realname: null,
+ //存放聚合实体
+ clusterLayer: null,
constructor: function(options, srcRefNode) {
- debugger;
- console.log("option=" + options);
this._map = options.map;
objThis = this;
-
- this.addEntitys = new GraphicsLayer({ id: 'addEntitys' });
+ this.addEntitys = new GraphicsLayer({
+ id: 'addEntitys'
+ });
// 添加点面线的图层
- this.addPolygonEntitys = new GraphicsLayer({ id: 'addPolygonEntitys' });
+ this.addPolygonEntitys = new GraphicsLayer({
+ id: 'addPolygonEntitys'
+ });
+
// 添加所有图层的地方
- this.entityPolygonAll = new GraphicsLayer({ id: 'entityPolygonAll' });
+ this.entityPolygonAll = new GraphicsLayer({
+ id: 'entityPolygonAll'
+ });
this._map.addLayer(this.addEntitys);
-
-
this._map.addLayer(this.addPolygonEntitys);
this._map.addLayer(this.entityPolygonAll);
-
},
-
startup: function() {
objThis._map.addLayer(objThis._siteLayer);
+ },
+
+ //根据key 取value值
+ getQueryStringByKey: function(key) {
+ return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
+ },
+
+ //带有中文的解码
+ getQueryString: function(name) {
+ var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+ var r = window.location.search.substr(1).match(reg);
+ if (r != null) return decodeURI(r[2]);
+ return null;
+ },
+
+ //页面打开后，获取参数数据
+ open: function() {
var that = this;
- // 保安出警管理表格中点击事件
- $('.police-dispatching .police-container .police-container-policeforce .table .tbody tbody').off('click', 'input').on('click', 'input', function(event) {
- event.stopPropagation();
- var lgtd = Number($(this).parent().parent().attr('lgtd'));
- var lttd = Number($(this).parent().parent().attr('lttd'));
- var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 })); //根据输入坐标信息找地图上的点
- that.newElectronicFenceId = null;
- that._map.centerAndZoom(position, 18); //缩放，10是缩放级别，可以自定义，数值越大缩放越大
- var graphic = that.entityPolygonAll.graphics;
- for (var i = 0; i < graphic.length; i++) {
- if (graphic[i].objId.id == $(this).attr('resultid')) {
- if (graphic[i].geometry.rings[0].length > 0) {
- that.polygonFlag = false;
- that.electronicFence();
- that.activateToolbar(graphic[i]);
+ 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');
+ //获取当前处警员的电子围栏信息
+ $.ajax({
+ //https://web.byisf.com/api/blade-jfpts/enclosure/enclosure/selectEnclosureDetail
+ url: 'http://localhost:89/enclosure/enclosure/selectEnclosureDetail',
+ type: 'GET',
+ dataType: 'JSON',
+ data: {
+ anumber: anumber
+ },
+ success: function(result) {
+ //如果已有电子围栏信息，展示出围栏区域，并且可以编辑
+ if (result.code == 200) {
+ if (JSON.stringify(result.data) != "{}") {
+ var entityArr = [];
+ var coordinate = result.data.coordinate.match(/\(([^)]*)\)/).toString();
+ var a = coordinate.indexOf("(");
+ var b = coordinate.indexOf(")");
+ coordinate = coordinate.substring(a + 1, b) + "";
+ if (coordinate && coordinate != '') {
+ coordinate = coordinate.split(',');
+ for (var i = 0; i < coordinate.length; i++) {
+ entityArr.push([Number(coordinate[i].split(' ')[0]), Number(coordinate[i].split(' ')[1])]);
+ }
+ }
+ that.addPolygon(that.addPolygonEntitys, entityArr);
} else {
+ //如果无电子围栏信息，则提示请编辑电子围栏信息
+ //编辑好电子围栏信息后，将当前处警员的电子围栏信息保存到数据库
+ that.newElectronicFenceId = null;
+
layui.use('layer', function() {
layui.layer.msg('请开始划分电子围栏');
})
that.polygonFlag = true;
- that.newElectronicFenceId = graphic[i].objId;
+ that.newElectronicFenceId = anumber;
}
+
}
}
})
- $('.police-dispatching .police-container .police-container-policeforce .table .tbody tbody').off('click', 'tr').on('click', 'tr', function(event) {
- event.stopPropagation();
- var lgtd = Number($(this).attr('lgtd'));
- var lttd = Number($(this).attr('lttd'));
- var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 })); //根据输入坐标信息找地图上的点
+ //调用点击事件
+ that.clickHand();
- that._map.centerAndZoom(position, 18); //缩放，10是缩放级别，可以自定义，数值越大缩放越大
-
- var snumber = $(this).attr('term-snumber');
-
- var url = './popup/html/personnel-information-management.html?id=' + code;
- layui.use('layer', function() {
- that.layuiLayer = layui.layer;
- that.layuiLayer.config({
- extend: 'myskin/personnel-information-management.css'
- });
- that.layuiLayer.close(that.layuiLayer.index);
- that.layuiLayer.open({
- title: '保安人员信息',
- type: 2,
- shadeClose: true,
- shade: false,
- maxmin: false, //开启最大化最小化按钮
- area: ['400px', '220px'],
- offset: 'auto',
- skin: 'personnel-information-management',
- content: url,
- closeBtn: 1,
- });
- })
- })
- },
-
-
- open: function() {
- var that = this;
- debugger;
- $.ajax({
- url: '/api/blade-jfpts/alarm/alarm/listAll?',
- type: 'get',
- dataType: 'JSON',
- success: function(data) {
- var datas = data.data;
- for (var i = 0; i < datas.length; i++) {
- datas[i].x = Number(datas[i].jd);
- datas[i].y = Number(datas[i].wd);
+ //鼠标右击事件
+ document.getElementById('mainMapWidget').onmousedown = function(event) {
+ if (event.button == 2) {
+ if (that.polygonData.length < 2) {
+ layui.use('layer', function() {
+ layui.layer.msg('不能形成区域，请继续划分！！！')
+ })
+ return;
}
- debugger;
- that.flareClusterLayer(datas);
+ 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/updatee',
+ 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) {}
+ }
+ })
+ }
+ that.polygonFlag = false;
+
}
- });
-
- },
-
-
- close: function() {
-
+ }
},
// 鼠标点击事件
- clickHand: function() {},
+ clickHand: function() {
- //聚合图层事件
- flareClusterLayer: function(datas) {
- debugger;
+ var self = this;
+ self._map.onClick = mapClick;
- var that = this;
+ function mapClick(evt) {
+ debugger;
+ var normalizedVal = webMercatorUtils.xyToLngLat(evt.mapPoint.x, evt.mapPoint.y);
+ var y = self._map.toMap({
+ spatialReference: '4326',
+ type: "point",
+ x: evt.screenPoint.x,
+ y: evt.screenPoint.y,
+ });
- var preClustered = false;
- var displaySingleFlaresAtCount = 10;
- var areaDisplayMode = "";
- // var allData = JSON.parse(DATA);
- // DataManager.setData(allData);
- //init the layer, more options are available and explained in the cluster layer constructor
- that.clusterLayer = new FlareClusterLayer({
- id: "flare-cluster-layer",
- spatialReference: new esri.SpatialReference({ "wkid": 4326 }),
- subTypeFlareProperty: "facilityType",
- singleFlareTooltipProperty: "name",
- displaySubTypeFlares: true,
- displaySingleFlaresAtCount: displaySingleFlaresAtCount,
- flareShowMode: "mouse",
- preClustered: preClustered,
- clusterRatio: 75,
- clusterAreaDisplay: areaDisplayMode,
- clusteringBegin: function() {
- console.log("clustering begin");
- },
- clusteringComplete: function() {
- console.log("clustering complete");
+ // 编辑中的
+ if (self.polygonFlag == true) {
+ if (self.polygonData.length == 0) {
+ self.polygonData.push([normalizedVal[0], normalizedVal[1]]);
+ self.addPoint(self.addPolygonEntitys, normalizedVal[0], normalizedVal[1]);
+ } else if (self.polygonData.length == 1) {
+ self.polygonData.push([normalizedVal[0], normalizedVal[1]]);
+ self.addPolyline(self.addPolygonEntitys, self.polygonData);
+ return;
+ } else if (self.polygonData.length > 1) {
+ self.polygonData.push([normalizedVal[0], normalizedVal[1]]);
+ self.addPolygon(self.addPolygonEntitys, self.polygonData);
+ }
+
+ } else { // 不在编辑中
+ if (evt.graphic) { // 点击在图形上
+ // 保存当前点击得图形
+ // self.currentDrawing = evt.graphic;
+
+ self.modifyPolygon();
+
+ self.activateToolbar(evt.graphic);
+ } else { // 点击不在图形上
+
+ self.modifyPolygon()
+ }
+ }
+
+ }
+
+ // 提示信息
+ $(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();
+ }
+
+ } else {
+ $('.police-dispatching .tips').stop().hide();
+ }
+ })
+ },
+
+ //新增线
+ addPolyline: function(entitys, path) {
+ entitys.clear();
+ var polylineSymbol = new SimpleLineSymbol();
+ polylineSymbol.color = [255, 0, 0, 1];
+ polylineSymbol.width = 4;
+ var polyline = new Polyline({
+ "paths": [path],
+ "spatialReference": {
+ "wkid": 4326
}
});
- //set up a class breaks renderer to render different symbols based on the cluster count. Use the required clusterCount property to break on.
- var defaultSym = new PictureMarkerSymbol("./images/ceshi.png", 32, 32).setOffset(0, 15);
- var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
- var xlSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 32, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([200, 52, 59, 0.8]), 1), new dojo.Color([250, 65, 74, 0.8]));
- var lgSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 28, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([41, 163, 41, 0.8]), 1), new dojo.Color([51, 204, 51, 0.8]));
- var mdSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 24, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 163, 204, 0.8]), 1), new dojo.Color([102, 204, 255, 0.8]));
- var smSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 22, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([230, 184, 92, 0.8]), 1), new dojo.Color([255, 204, 102, 0.8]));
- renderer.addBreak(0, 19, smSymbol);
- renderer.addBreak(20, 150, mdSymbol);
- renderer.addBreak(151, 1000, lgSymbol);
- renderer.addBreak(1001, Infinity, xlSymbol);
+ entitys.add(new Graphic(polyline, polylineSymbol));
+ },
- that.clusterLayer.setRenderer(renderer); //use standard setRenderer.
- //set up a popup template
- var template = new PopupTemplate({
- title: "{name}",
- fieldInfos: [
- { fieldName: "facilityType", label: "Facility Type", visible: true },
- { fieldName: "postcode", label: "Post Code", visible: true },
- { fieldName: "isOpen", label: "Opening Hours", visible: true }
- ]
- });
+ //编辑电子围栏（多边形）
+ modifyPolygon: function() {
+ var self = this;
+ if (self.editToolbar != null) {
+ //获取当前的多边形数据
+ var polygon = self.editToolbar.getCurrentState();
- //clusterLayer.infoTemplate = template;
- that._map.infoWindow.titleInBody = false;
+ //释放编辑后
+ self.editToolbar.deactivate();
- that._map.addLayer(that.clusterLayer);
+ self.editToolbar = null;
- //var data = DataManager.getData();
- that.clusterLayer.addData(datas);
+ // 声明空字符串，存储数据
+ var dataStr = '';
+
+ // 获取数据
+ var data = polygon.graphic.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/updatee',
+ url: 'http://localhost:89/enclosure/enclosure/updatee',
+ type: 'POST',
+ dataType: 'JSON',
+ data: {
+ anumber: anumber,
+ routeInfo: dataStr
+ },
+ success: function(result) {
+ if (result.code == 200) {}
+ }
+ })
+
+ }
+ },
+
+
+ activateToolbar: function(graphic) {
+ var tool = 0;
+
+ this.editToolbar = new Edit(this._map);
+
+ // if (registry.byId("tool_move").checked) {
+ tool = tool | Edit.MOVE;
+ // }
+ // if (registry.byId("tool_vertices").checked) {
+ tool = tool | Edit.EDIT_VERTICES;
+ // }
+ // if (registry.byId("tool_scale").checked) {
+ tool = tool | Edit.SCALE;
+ // }
+ // if (registry.byId("tool_rotate").checked) {
+ tool = tool | Edit.ROTATE;
+ // }
+ // enable text editing if a graphic uses a text symbol
+ // if ( graphic.symbol.declaredClass === "esri.symbol.TextSymbol" ) {
+ tool = tool | Edit.EDIT_TEXT;
+ // }
+
+ var options = {
+ allowAddVertices: true,
+ allowDeleteVertices: true,
+ uniformScaling: true
+ };
+ this.editToolbar.activate(tool, graphic, options);
},
- clearLayer: function() {
- var that = this;
- that._map.removeLayer(that.clusterLayer);
- that.clusterLayer = null;
- }
+ 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({
+ wkid: 4326
+ }));
+ pt.entityData = item;
+ var graphic = new esri.Graphic(pt, symbol);
+ entitys.add(graphic);
+ entityContent.push(item);
+ },
+
+ //在地图上新增点
+ addPoint: function(entitys, lgtd, lttd, img) {
+ 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) {
+ entitys.clear();
+ var polygonSymbol = new SimpleFillSymbol();
+ polygonSymbol.color = [24, 255, 243, 0.411];
+ var polygon = new Polygon({
+ "rings": [rings],
+ "spatialReference": {
+ "wkid": 4326
+ }
+ });
+ entitys.add(new Graphic(polygon, polygonSymbol));
+ }
});
return Widget;
--
Gitblit v1.9.3