From b2168d65cb98b602555cfed68ee16739612794d1 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 21 Apr 2021 17:09:34 +0800
Subject: [PATCH] 地图模式添加预警图标
---
public/map/images/by-jingbao.png | 0
public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js | 116 ++++++++++++++++++++++++++++++---------------------------
public/map/images/yj-jingbao.png | 0
3 files changed, 61 insertions(+), 55 deletions(-)
diff --git a/public/map/images/by-jingbao.png b/public/map/images/by-jingbao.png
new file mode 100644
index 0000000..bdedf67
--- /dev/null
+++ b/public/map/images/by-jingbao.png
Binary files differ
diff --git a/public/map/images/yj-jingbao.png b/public/map/images/yj-jingbao.png
new file mode 100644
index 0000000..a4f0271
--- /dev/null
+++ b/public/map/images/yj-jingbao.png
Binary files differ
diff --git a/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js b/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
index ddb8741..f355403 100644
--- a/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
+++ b/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
@@ -167,7 +167,7 @@
}
}
},
- _mapClick: function (e) {//地图全局点击事件 标记不能点击
+ _mapClick: function (e) { //地图全局点击事件 标记不能点击
// console.log('地图全局点击事件');
if (!e.target) {
@@ -188,8 +188,8 @@
},
// zoomNum: this.map.getZoom(),
indexs: null,
- onceTime: 300,//防抖定时
- onceTimeMethod: null,//防抖判断属性
+ onceTime: 300, //防抖定时
+ onceTimeMethod: null, //防抖判断属性
onClick: function (evt) { //标志以及聚合表示点击事件
var eour = evt.graphic.attributes.clusterCount;
var mySelf = this;
@@ -232,40 +232,43 @@
// area: 'auto',
offset: posi,
skin: 'flare',
- closeBtn: 0,//关闭按钮，可通过配置1和2来展示,0关闭
+ closeBtn: 0, //关闭按钮，可通过配置1和2来展示,0关闭
content: [url, 'no'],
resize: false,
scrollbar: false,
// tipsMore: true, //允许多个tipe
// content: num,
- success: function (layero, index) {//成功后添加全局点击关闭
+ success: function (layero, index) { //成功后添加全局点击关闭
$("#layui-layer-iframe" + index).contents().find("#input1").val(JSON.stringify(evt.graphic.attributes));
// console.log(layero, index);
that.indexs = index;
- var isclickD = true
- , endx = null
- , endy = null;
+ var isclickD = true,
+ endx = null,
+ endy = null;
layero[0].style.position = 'absolute';
- downs = document.onmousedown = () => {//鼠标按下事件
+ downs = document.onmousedown = () => { //鼠标按下事件
// console.log('down');//start
// downs = document.onmousedown = null;
- var mx = window.event.clientX//鼠标初始位置
- , my = window.event.clientY
- , cx = this.offset[1].replace("px", "")//初始位置
- , cy = this.offset[0].replace("px", "");
+ var mx = window.event.clientX //鼠标初始位置
+ ,
+ my = window.event.clientY,
+ cx = this.offset[1].replace("px", "") //初始位置
+ ,
+ cy = this.offset[0].replace("px", "");
if (endx != null && endy != null) {
cx = endx;
cy = endy;
}
- moves = document.onmousemove = () => {//鼠标移动事件
+ moves = document.onmousemove = () => { //鼠标移动事件
// console.log('move');//move
// console.log(this.offset)
- var ux = window.event.clientX//记录实时位置
- , uy = window.event.clientY;
- endx = +cx + (ux - mx)// 初始位置+（鼠标初始位置-实时位置）
+ var ux = window.event.clientX //记录实时位置
+ ,
+ uy = window.event.clientY;
+ endx = +cx + (ux - mx) // 初始位置+（鼠标初始位置-实时位置）
endy = +cy + (uy - my);
layero[0].style.left = endx + 'px';
layero[0].style.top = endy + 'px';
@@ -274,7 +277,7 @@
// console.log(ux, uy,'记录实时位置');
// console.log(ux, uy,'最后位置');
isclickD = false;
- ups = document.onmouseup = () => {//鼠标抬起事件
+ ups = document.onmouseup = () => { //鼠标抬起事件
// console.log('up');//end
// downs = document.onmousedown = null;
moves = document.onmousemove = null;
@@ -308,11 +311,11 @@
}
},
- end: function () {//关闭事件
+ end: function () { //关闭事件
}
});
- that.layuiLayer.open({//第二个iframe
+ that.layuiLayer.open({ //第二个iframe
title: '',
type: 2,
shadeClose: true,
@@ -325,13 +328,13 @@
offset: 'r',
skin: 'flare',
isOutAnim: false,
- closeBtn: 0,//关闭按钮，可通过配置1和2来展示,0关闭
+ closeBtn: 0, //关闭按钮，可通过配置1和2来展示,0关闭
content: ['./popup/html/FlareClusterLayer_v3 copy.html'],
resize: false,
scrollbar: false,
// tipsMore: true, //允许多个tipe
// content: num,
- success: function (layero, index) {//成功后添加全局点击关闭
+ success: function (layero, index) { //成功后添加全局点击关闭
// var z = document.onclick = ()=>{
// parent[0].layer.close(index);
// // // parent[0].layer.close(+index + 1);
@@ -344,14 +347,13 @@
})
})
}
- if (mySelf.onceTimeMethod == null) {//防抖.限制时间内点击次数，否则会造成不能正确销毁前一个弹窗
+ if (mySelf.onceTimeMethod == null) { //防抖.限制时间内点击次数，否则会造成不能正确销毁前一个弹窗
var offsetMy = [+evt.screenY - 300 + 'px', +evt.screenX - 172.5 + 'px'];
fCard(offsetMy);
mySelf.onceTimeMethod = setTimeout(() => {
mySelf.onceTimeMethod = null;
}, mySelf.onceTime);
- } else {
- };
+ } else {};
@@ -360,7 +362,7 @@
} else {
// var taxLotExtent = evt.graphic.geometry.getExtent();
// this.map.setExtent(evt.graphic._extent)
- this.map.setZoom(this.map.getZoom() + 1)//地图中心缩放
+ this.map.setZoom(this.map.getZoom() + 1) //地图中心缩放
// this.map.setZoom(18);
parent[0].layer.close(this.indexs)
parent[0].layer.close(+this.indexs + 1)
@@ -835,12 +837,16 @@
this.singles.push(single);
delete single.graphic;
var symbol;
- console.log(single.onlineStatus, '移动事件');
- if (single.onlineStatus == 1) {
- symbol = new esri.symbol.PictureMarkerSymbol("./images/zx-jingbao.png", 40, 40);
+ if (single.jtype == 1) {
+ symbol = new esri.symbol.PictureMarkerSymbol("./images/yj-jingbao.png", 40, 40);
} else {
- symbol = new esri.symbol.PictureMarkerSymbol("./images/dx-jingbao.png", 40, 40);
+ if (single.onlineStatus == 1) {
+ symbol = new esri.symbol.PictureMarkerSymbol("./images/zx-jingbao.png", 40, 40);
+ } else {
+ symbol = new esri.symbol.PictureMarkerSymbol("./images/dx-jingbao.png", 40, 40);
+ }
}
+
var point = new Point(single[this.xPropertyName], single[this.yPropertyName], this.spatialRef);
var attributes = lang.clone(single);
var graphic = new Graphic(point, symbol, attributes, null);
@@ -933,11 +939,11 @@
//add a text element for the label to display the count and add to the group
var shapeCenter = this._getShapeCenter(cluster.graphicShape);
var textShape = groupShape.createText({
- x: shapeCenter.x,
- y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2),
- text: cluster.clusterCount,
- align: 'middle'
- })
+ x: shapeCenter.x,
+ y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2),
+ text: cluster.clusterCount,
+ align: 'middle'
+ })
.setFont({
size: this.textSymbol.font.size,
family: this.textSymbol.font.family,
@@ -1061,10 +1067,10 @@
//create a transparent circle that contains the boundary of the flares, this is to make sure the mouse events don't fire moving in between flares
var conCircleRadius = (center.x - (bbox.x - radius - buffer)) + radius; //get the radius of the circle to contain everything
var containerCircle = groupShape.createCircle({
- cx: center.x,
- cy: center.y,
- r: conCircleRadius
- })
+ cx: center.x,
+ cy: center.y,
+ r: conCircleRadius
+ })
//.setStroke({ width: 1, color: "000" })
.setFill(new Color([0, 0, 0, 0]));
containerCircle.rawNode.setAttribute("class", "flare-object cluster-object");
@@ -1365,11 +1371,11 @@
var textShapes = [];
for (var i = 0, len = lines.length; i < len; i++) {
var textShape = tooltipGroup.createText({
- x: xPos,
- y: yPos + (i * 10),
- text: lines[i],
- align: 'middle'
- })
+ x: xPos,
+ y: yPos + (i * 10),
+ text: lines[i],
+ align: 'middle'
+ })
.setFill("#000")
.setFont({
size: 8,
@@ -1383,12 +1389,12 @@
var rectPadding = 2;
var textBox = tooltipGroup.getBoundingBox();
var rectShape = tooltipGroup.createRect({
- x: textBox.x - rectPadding,
- y: textBox.y - rectPadding,
- width: textBox.width + (rectPadding * 2),
- height: textBox.height + (rectPadding * 2),
- r: 0
- })
+ x: textBox.x - rectPadding,
+ y: textBox.y - rectPadding,
+ width: textBox.width + (rectPadding * 2),
+ height: textBox.height + (rectPadding * 2),
+ r: 0
+ })
.setFill(new Color([255, 255, 255, 0.9]))
.setStroke({
color: "#000",
@@ -1524,11 +1530,11 @@
//Have to add the flare text after the flare group animation otherwise Edge just reloads the page and dies for some reason?
if (this.shape.flareText) {
var flareText = this.shape.createText({
- x: this.shape.flareText.location.x,
- y: this.shape.flareText.location.y,
- text: this.shape.flareText.text,
- align: 'middle'
- })
+ x: this.shape.flareText.location.x,
+ y: this.shape.flareText.location.y,
+ text: this.shape.flareText.text,
+ align: 'middle'
+ })
.setFill(layer.textSymbol.color)
.setFont({
size: this.shape.flareText.textSize,
--
Gitblit v1.9.3