From d874cdc354465eeed76f7039de9e4d7e5b17dabc Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Tue, 20 Apr 2021 18:23:19 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue
---
public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js | 236 +++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 159 insertions(+), 77 deletions(-)
diff --git a/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js b/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
index 2199920..f56d68e 100644
--- a/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
+++ b/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
@@ -169,7 +169,7 @@
},
_mapClick: function (e) {//地图全局点击事件 标记不能点击
// console.log('地图全局点击事件');
-
+
if (!e.target) {
return;
}
@@ -189,62 +189,144 @@
onClick: function (evt) { //标志以及聚合表示点击事件
var eour = evt.graphic.attributes.clusterCount;
- if(eour == undefined){
- var dataO = evt
+ if (eour == undefined) {
+ var dataO = evt;
+ var aa = evt.graphic.screenX;
+ var bb = evt.graphic.screenX;
var data = {
- nums : evt.graphic.attributes.deviceNumber,
- nams : evt.graphic.attributes.deviceName,
+ nums: evt.graphic.attributes.deviceNumber,
+ nams: evt.graphic.attributes.deviceName,
+ type: evt.graphic.attributes.jtype,
}
- console.log(dataO);
-
- var rightCard = (num,name,posi)=>{
- var that = this;
- var url = './popup/html/FlareClusterLayer_v3.html?num=' + num + '&name=' + name;
- layui.use('layer', function () {
- that.layuiLayer = layui.layer;
- // that.layuiLayer.config({
- // extend: 'myskin/police-details.css'
- // });
- that.layuiLayer.close(that.layuiLayer.index);
- that.layuiLayer.open({
- title: '',
- type: 2,
- shadeClose: true,
- shade: false,
- skin: 'demo-class',
- id: 'onelyOne',
- maxmin: false, //开启最大化最小化按钮
- // area: ['500px', '400px'],
- offset: posi,
- skin: 'police-details',
- content: [url,'no'],
- resize: false,
- closeBtn: 1,
- success: function(layero, index){//成功后添加全局点击关闭
- console.log(layero, index);
-
- // var a = window.onmousedown = ()=>{
- // // parent[0].layer.close(index);
- // // begins();
- // }
- var d = document.onclick = ()=>{
- parent[0].layer.close(index);
- d = '';
- }
- },
- });
+ // console.log(dataO);
+ // console.log(aa - bb);
+
+ var fCard = (posi) => {
+ var that = this,
+ url = './popup/html/FlareClusterLayer_v3.html',
+ clickD = null,
+ downs = null,
+ moves = null,
+ ups = null;
+ layui.use('layer', function () {
+ that.layuiLayer = layui.layer;
+ that.layuiLayer.config({
+ extend: 'myskin/FlareClusterLayer.css'
+ });
+ // layer.alert('layer 新皮肤');
+ that.layuiLayer.close(that.layuiLayer.index);
+ that.layuiLayer.open({
+ title: '',
+ type: 2,
+ shadeClose: false,
+ shade: false,
+ skin: 'demo-class',
+ id: 'onelyOne',
+ maxmin: false, //开启最大化最小化按钮
+ area: ['200px', '75px'],
+ // area: 'auto',
+ offset: posi,
+ skin: 'flare',
+ closeBtn: 0,//关闭按钮，可通过配置1和2来展示,0关闭
+ content: [url, 'no'],
+ resize: false,
+ scrollbar: false,
+ tipsMore: true, //允许多个tipe
+ // content: num,
+ success: function (layero, index) {//成功后添加全局点击关闭
+ $("#layui-layer-iframe" + index).contents().find("#input1").val(JSON.stringify(evt.graphic.attributes));
+ // console.log(layero, index);
+ layero[0].style.position = 'absolute';
+ 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","");
+ moves = document.onmousemove = () => {
+ // console.log('move');//move
+ // console.log(this.offset)
+ var ux = window.event.clientX//记录实时位置
+ , uy = window.event.clientY;
+ var endx = +cx + (ux - mx)// 初始位置+（鼠标初始位置-实时位置）
+ , endy = +cy + (uy - my);
+ layero[0].style.left = endx + 'px';
+ layero[0].style.top = endy + 'px';
+ // console.log(+cx, +cy,'初始位置');
+ // console.log(mx, my,'鼠标初始位置');
+ // console.log(ux, uy,'记录实时位置');
+ // console.log(ux, uy,'最后位置');
+
+ ups = document.onmouseup = () => {
+ // console.log('up');//end
+ downs = document.onmousedown = null;
+ moves = document.onmousemove = null;
+ ups = document.onmouseup = null;
+ }
+ }
+ }
+
+ clickD = document.onclick = () => {
+ parent[0].layer.close(index);
+ parent[0].layer.close(+index + 1);
+ // parent[0].layer.closeAll();
+ // console.log(111111111111)
+ clickD = document.onclick = null;
+ }
+
+ },
+ end: function () {//关闭事件
+
+ }
+ });
+ that.layuiLayer.open({//第二个iframe
+ title: '',
+ type: 2,
+ shadeClose: true,
+ shade: false,
+ skin: 'demo-class',
+ id: 'onelyTwo',
+ maxmin: false, //开启最大化最小化按钮
+ area: ['360px', '484px'],
+ // area: 'auto',
+ offset: 'r',
+ skin: 'flare',
+ isOutAnim: false,
+ 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) {//成功后添加全局点击关闭
+ // var z = document.onclick = ()=>{
+ // parent[0].layer.close(index);
+ // // // parent[0].layer.close(+index + 1);
+ // z = null;
+ // }
+ //尝试传值
+ //js对象转json对象
+ $("#layui-layer-iframe" + index).contents().find("input").val(JSON.stringify(evt.graphic.attributes));
+ },
})
+ })
}
- var offsetMy = [+evt.screenY - 370 + 'px',+evt.screenX - 370 + 'px'];
- rightCard (data.nums,data.nams,offsetMy);
- var begins = ()=>{
- var offsetMy = [+evt.screenY - 370 + 'px',+evt.screenX - 370 + 'px'];
- rightCard (data.nums,data.nams,offsetMy);
+ var offsetMy = [+evt.screenY - 300 + 'px', +evt.screenX - 172.5 + 'px'];
+ // var offsetMy = [+evt.graphic._shape.shape.y - 80 + 'px',+evt.graphic._shape.shape.x + 'px'];
+ fCard(offsetMy);
+ var begins = (xy) => {
+ var offsetMy = [xy.y + 'px', xy.x + 'px'];
+ fCard(offsetMy);
}
- }else {
- console.log(num,'zoom');
+ } else {
+ // var taxLotExtent = evt.graphic.geometry.getExtent();
+ // this.map.setExtent(evt.graphic._extent)
+ this.map.setZoom(this.map.getZoom() + 1)//地图中心缩放
+ // this.map.setZoom(18);
+ // console.log('111:', this.map.zoomToFullExtent(), '222:', evt, evt.graphic._extent, 'zoom');
}
- console.log(evt)
+ // console.log(evt)
this._restoreInfoWindowSettings();
if (evt.graphic.attributes.isCluster) {
@@ -444,7 +526,7 @@
dojo.query("g.cluster-group:empty", this.getNode()).forEach(dojo.destroy);
},
-
+
_graphicDraw: function (e) {
var g = e.graphic;
if (g.attributes.isCluster) {
@@ -810,11 +892,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,
@@ -938,10 +1020,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");
@@ -1242,11 +1324,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,
@@ -1260,12 +1342,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",
@@ -1401,11 +1483,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