From 0a6ef5b319ab9e18405a4f115a3c852955533194 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Sat, 24 Apr 2021 15:31:55 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue
---
public/map/widgets/securityMap/SecurityMap.js | 181 +++++++++++++++++++++++++++++++--------------
1 files changed, 124 insertions(+), 57 deletions(-)
diff --git a/public/map/widgets/securityMap/SecurityMap.js b/public/map/widgets/securityMap/SecurityMap.js
index 09b16d2..502e27f 100644
--- a/public/map/widgets/securityMap/SecurityMap.js
+++ b/public/map/widgets/securityMap/SecurityMap.js
@@ -135,6 +135,7 @@
polygonFlag: false,
editToolbar: null,
addPolygonEntitys: null,
+ addLineEntitys: null,
//是否选中电子围栏区域
isChecked: false,
@@ -185,6 +186,12 @@
id: 'addPolygonEntitys'
});
+
+ // 添加线的图层
+ this.addLineEntitys = new GraphicsLayer({
+ id: 'addLineEntitys'
+ });
+
// 添加所有图层的地方
this.entityPolygonAll = new GraphicsLayer({
id: 'entityPolygonAll'
@@ -193,6 +200,7 @@
this._map.addLayer(this.addEntitys);
this._map.addLayer(this.addPolygonEntitys);
+ this._map.addLayer(this.addLineEntitys);
this._map.addLayer(this.entityPolygonAll);
},
@@ -342,60 +350,70 @@
//鼠标右击事件
document.getElementById('mainMapWidget').onmousedown = function(event) {
//去除系统默认右键功能
- event.preventDefault();
+ document.oncontextmenu = function() {
+ //alert("当前页面不能使用右键！");
+ return false;
+ }
+ //event.preventDefault();
if (event.button == 2) {
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: 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");
- }
+ 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.isEngineer = true;
- //修改电子围栏选中状态
- that.isChecked = false;
- //修改电子围栏编辑状态
- that.polygonFlag = false;
+
}
}
},
@@ -406,8 +424,10 @@
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',
@@ -415,7 +435,6 @@
x: evt.screenPoint.x,
y: evt.screenPoint.y,
});
-
// 编辑中的
if (self.polygonFlag == true) {
@@ -459,10 +478,10 @@
}
- // 提示信息
+ // 鼠标移动监听事件
$(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');
@@ -490,14 +509,35 @@
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", "200px");
- $("#securityMapTips4").css("height", "36");
+ $("#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';
@@ -510,12 +550,39 @@
})
},
- //新增线
+ /**
+ * 新增线图层
+ * @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": {
--
Gitblit v1.9.3