From d74b495736f0c04522ec54274b70fed0ded2878d Mon Sep 17 00:00:00 2001
From: zhongrj <646384940@qq.com>
Date: Tue, 27 Jun 2023 11:30:06 +0800
Subject: [PATCH] 任务新增导出
---
public/map/widgets/securityMap/SecurityMap.js | 729 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 729 insertions(+), 0 deletions(-)
diff --git a/public/map/widgets/securityMap/SecurityMap.js b/public/map/widgets/securityMap/SecurityMap.js
new file mode 100644
index 0000000..8008b8c
--- /dev/null
+++ b/public/map/widgets/securityMap/SecurityMap.js
@@ -0,0 +1,729 @@
+/*
+ * @Description:
+ * @Version: 1.0
+ * @Author: yangsx
+ * @Date: 2019-12-09 19:01:40
+ * @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",
+ "base/AppEvent",
+ "base/ConfigData",
+ "widgets/securityMap/config",
+ "dojo/dom",
+ "dojo/dom-construct",
+ "dojo/dom-attr",
+ "dojo/dom-style",
+ "dojo/on",
+ "esri/layers/ArcGISDynamicMapServiceLayer",
+ "esri/layers/ArcGISTiledMapServiceLayer",
+ "esri/layers/FeatureLayer",
+ "controls/tab/TabControl",
+ "esri/dijit/SymbolStyler",
+ "esri/styles/basic",
+ "dojo/_base/array",
+ "esri/InfoTemplate",
+ "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",
+ "esri/symbols/SimpleFillSymbol",
+ "esri/symbols/PictureMarkerSymbol",
+ "esri/symbols/SimpleMarkerSymbol",
+ "esri/SpatialReference",
+ "esri/tasks/GeometryService",
+ "esri/tasks/ProjectParameters",
+ "esri/layers/GraphicsLayer",
+ "esri/layers/LabelLayer",
+ "esri/symbols/TextSymbol",
+ "esri/renderers/SimpleRenderer",
+ "esri/renderers/ClassBreaksRenderer",
+ "esri/tasks/Geoprocessor",
+ "esri/tasks/DataFile",
+ "esri/geometry/webMercatorUtils",
+ "esri/symbols/Font",
+ "esri/geometry/ScreenPoint",
+ "esri/layers/ImageParameters",
+ "esri/geometry/geometryEngine",
+ "esri/dijit/PopupTemplate",
+ "widgets/securityMap/FlareClusterLayer_v3",
+ "dojo/domReady!"
+], function(
+ dojo,
+ declare,
+ lang,
+ BaseWidget,
+ template,
+ AppEvent,
+ ConfigData,
+ config,
+ dom,
+ domConstruct,
+ domAttr,
+ domStyle,
+ on,
+ ArcGISDynamicMapServiceLayer,
+ ArcGISTiledMapServiceLayer,
+ FeatureLayer,
+ TabControl,
+ SymbolStyler,
+ basic,
+ arrayUtils,
+ InfoTemplate,
+ Query,
+ QueryTask,
+ Color,
+ Edit,
+ Graphic,
+ Point,
+ Polyline,
+ Polygon,
+ Extent,
+ FeatureSet,
+ HeatmapRenderer,
+ SimpleLineSymbol,
+ SimpleFillSymbol,
+ PictureMarkerSymbol,
+ SimpleMarkerSymbol,
+ SpatialReference,
+ GeometryService,
+ ProjectParameters,
+ GraphicsLayer,
+ LabelLayer,
+ TextSymbol,
+ SimpleRenderer,
+ ClassBreaksRenderer,
+ Geoprocessor,
+ DataFile,
+ webMercatorUtils,
+ Font,
+ ScreenPoint,
+ ImageParameters,
+ geometryEngine,
+ PopupTemplate,
+ FlareClusterLayer
+) {
+ var Widget = declare([BaseWidget], {
+ widgetName: "SecurityMap",
+ label: "处警队伍管理",
+ templateString: template,
+ _map: null,
+ objThis: null,
+ _siteLayer: new GraphicsLayer(),
+ layuiLayer: null,
+ layuiLadate: null,
+
+ // 保留添加实体图层的变量
+ addEntitys: null,
+ entitysData: [],
+
+ // 存储新增点，线，面，数据的地方
+ polygonData: [],
+ polygonFlag: false,
+ editToolbar: null,
+ addPolygonEntitys: null,
+ addLineEntitys: null,
+
+ //是否选中电子围栏区域
+ isChecked: false,
+
+ //当前处警员是否已有电子围栏
+ isEngineer: false,
+
+ //是否可编辑
+ isEdit: false,
+
+ // 用来记录巡逻区域或者巡逻路线的下标的
+ patrolIndex: 0,
+
+ // 拖拽
+ isDown: false,
+ x: 0,
+ y: 0,
+ offset: null,
+ moveThis: null,
+
+ //编辑工具激活后为true
+ editToolbarStatus: false,
+
+ //基础路径
+ //pathUrl: "http://localhost:89",
+ pathUrl: "http://61.131.136.25:2082/api/blade-jfpts",
+
+ // 电子围栏需要新增的Id
+ newElectronicFenceId: null,
+
+ // 新增路线时，派发人员，人员名称，以及人员id
+ anumber: null,
+ realname: null,
+
+ //存放聚合实体
+ clusterLayer: null,
+ constructor: function(options, srcRefNode) {
+ this._map = options.map;
+ objThis = this;
+
+ //创建图层
+ this.addEntitys = new GraphicsLayer({
+ id: 'addEntitys'
+ });
+
+ // 添加点面线的图层
+ this.addPolygonEntitys = new GraphicsLayer({
+ id: 'addPolygonEntitys'
+ });
+
+
+ // 添加线的图层
+ this.addLineEntitys = new GraphicsLayer({
+ id: 'addLineEntitys'
+ });
+
+ // 添加所有图层的地方
+ this.entityPolygonAll = new GraphicsLayer({
+ id: 'entityPolygonAll'
+ });
+
+
+ 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值
+ 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;
+ //获取父页面传过来的参数
+ var lgtd = that.getQueryStringByKey('jd');
+ var lttd = that.getQueryStringByKey('wd');
+ anumber = that.getQueryStringByKey('code');
+ realname = that.getQueryString('name');
+ //如果处警员的位置信息存在
+ if (lgtd != null && lgtd != "") {
+ //所在位置标记
+ that.addPoint(that.addEntitys, lgtd, lttd, './images/security.png');
+ }
+
+ //获取当前处警员的电子围栏信息
+ $.ajax({
+ url: this.pathUrl + '/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.isEngineer = true;
+ that.addPolygon(that.addPolygonEntitys, entityArr);
+ } else {
+ //如果无电子围栏信息，则提示请编辑电子围栏信息
+ //编辑好电子围栏信息后，将当前处警员的电子围栏信息保存到数据库
+ that.newElectronicFenceId = null;
+ that.newElectronicFenceId = anumber;
+ }
+ }
+ }
+ })
+
+ //调用点击事件
+ that.clickHand();
+
+ //鼠标右击事件
+ document.getElementById('mainMapWidget').onmousedown = function(event) {
+ //去除系统默认右键功能
+ document.oncontextmenu = function() {
+ //alert("当前页面不能使用右键！");
+ return false;
+ }
+ //event.preventDefault();
+ if (event.button == 2) {
+ if (that.polygonFlag == true) {
+ 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;
+ }
+ }
+ })
+ }
+
+ }
+
+ }
+ }
+ },
+
+ // 鼠标点击事件
+ clickHand: function() {
+ var that = this;
+ var self = this;
+ self._map.onClick = mapClick;
+
+
+ //点击事件
+ function mapClick(evt) {
+ //坐标格式转换
+ 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,
+ });
+
+ // 编辑中的
+ 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;
+
+ that.isChecked = true;
+
+ //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(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 {
+ 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 = 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": {
+ "wkid": 4326
+ }
+ });
+
+ entitys.add(new Graphic(polyline, polylineSymbol));
+ },
+
+
+ //编辑电子围栏（多边形）
+ modifyPolygon: function() {
+ var self = this;
+ if (self.editToolbar != null) {
+ //获取当前的多边形数据
+ var polygon = self.editToolbar.getCurrentState();
+
+ //释放编辑后
+ self.editToolbar.deactivate();
+
+ self.editToolbar = null;
+
+ // 声明空字符串，存储数据
+ 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: this.pathUrl + '/enclosure/enclosure/updatee',
+ type: 'POST',
+ dataType: 'JSON',
+ data: {
+ anumber: anumber,
+ routeInfo: dataStr
+ },
+ success: function(result) {
+ 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;
+ // }
+ // 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);
+
+ },
+
+ close: function() {},
+
+ // 创建实体图层
+ 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) {
+ 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) {
+ 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