/*
|
* @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: "https://web.byisf.com/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;
|
});
|
