|
@ -36,7 +36,7 @@
|
36
|
36
|
"
|
37
|
37
|
>轨迹</t-button
|
38
|
38
|
>
|
39
|
|
<div style="min-width:100px">悬浮窗<t-switch rounded></t-switch></div>
|
|
39
|
<div style="min-width:100px">悬浮窗<t-switch v-model="switch1" rounded @change="switchChange"></t-switch></div>
|
40
|
40
|
</div>
|
41
|
41
|
</div>
|
42
|
42
|
<div id="div1" style="height: 100%"></div>
|
|
@ -193,9 +193,11 @@ export default {
|
193
|
193
|
data() {
|
194
|
194
|
return {
|
195
|
195
|
map: null,
|
|
196
|
switch1: true,
|
196
|
197
|
pointsarr: null,
|
197
|
198
|
markTypes: [],
|
198
|
199
|
toolTypes: [],
|
|
200
|
popups: [],
|
199
|
201
|
aggregatedMapAreaList: {
|
200
|
202
|
mapAreas: [], // 围栏集合
|
201
|
203
|
coreEntitys: [] // 聚合设备集合
|
|
@ -406,20 +408,66 @@ export default {
|
406
|
408
|
this.$test.post(services.organization.INIT_LOCATION_DETAILS, {}
|
407
|
409
|
).then(res => {
|
408
|
410
|
// 请求成功处理...
|
|
411
|
this.loadUnaggregated(res.data.unaggregatedEntityPositionList)
|
409
|
412
|
res.data.aggregatedMapAreaList.forEach(e => {
|
410
|
|
if (e.businessType) {
|
|
413
|
if (e.mapAreaContent) {
|
411
|
414
|
this.aggregatedMapAreaList.mapAreas.push(e)
|
412
|
415
|
} else {
|
413
|
416
|
this.aggregatedMapAreaList.coreEntitys.push(e)
|
414
|
417
|
}
|
415
|
418
|
})
|
|
419
|
this.map.on('popupclose', this.popClose)
|
|
420
|
this.map.on('popupopen', this.popOpen)
|
416
|
421
|
this.loadMapArea()
|
417
|
422
|
this.loadCoreEntity()
|
418
|
|
this.loadMapView()
|
|
423
|
// this.loadMapView()
|
419
|
424
|
}).catch(res => {
|
420
|
425
|
// 请求失败处理...
|
421
|
426
|
})
|
422
|
427
|
},
|
|
428
|
loadCoreEntity() {
|
|
429
|
this.map.addLayer(this.layer.equipmentLayer)
|
|
430
|
this.aggregatedMapAreaList.coreEntitys.forEach(e => {
|
|
431
|
if (e.latitude) {
|
|
432
|
var url = '/static/images/ship.png'
|
|
433
|
var businessTypeName = '设备'
|
|
434
|
this.toolTypes.forEach(t => {
|
|
435
|
if (e.coreEntityType == t.resourceToolType) {
|
|
436
|
url = t.iconUrl
|
|
437
|
businessTypeName = t.name
|
|
438
|
}
|
|
439
|
})
|
|
440
|
if (e.employeeCount > 0) {
|
|
441
|
var classStr = this.getClassByStatus(e.locationStatus)
|
|
442
|
var point = Ai.Point([e.latitude, e.longitude], {
|
|
443
|
icon: Ai.DivIcon({
|
|
444
|
html: '<div class="' + classStr + '">' + e.employeeCount + '人</div>',
|
|
445
|
className: 'person-count',
|
|
446
|
// 设置图标大小
|
|
447
|
// iconSize: [20, 20],
|
|
448
|
// 设置点对象和图标的相对偏移量
|
|
449
|
iconAnchor: [15, 50]
|
|
450
|
})
|
|
451
|
})
|
|
452
|
point.setAttributes({'resourceToolType': ''})
|
|
453
|
this.layer.equipmentLayer.addLayer(point)
|
|
454
|
this.getPopup(point, e.ebcEntityPositionList, businessTypeName, e.mapAreaName, [0, -40])
|
|
455
|
}
|
|
456
|
var coreEntity = Ai.Point([e.latitude, e.longitude], {
|
|
457
|
icon: Ai.Icon({
|
|
458
|
// 设置图标URL路径
|
|
459
|
iconUrl: url,
|
|
460
|
// 设置图标大小
|
|
461
|
iconSize: [20, 20],
|
|
462
|
// 设置点对象和图标的相对偏移量
|
|
463
|
iconAnchor: [100, 100]
|
|
464
|
})
|
|
465
|
})
|
|
466
|
coreEntity.setAttributes({'resourceToolType': '002'})
|
|
467
|
this.layer.equipmentLayer.addLayer(coreEntity)
|
|
468
|
}
|
|
469
|
})
|
|
470
|
},
|
423
|
471
|
loadMapArea() {
|
424
|
472
|
this.map.addLayer(this.layer.areaLayer)
|
425
|
473
|
this.aggregatedMapAreaList.mapAreas.forEach(e => {
|
|
@ -447,8 +495,8 @@ export default {
|
447
|
495
|
businessTypeName = m.name
|
448
|
496
|
}
|
449
|
497
|
})
|
450
|
|
this.getPopup(point, e.ebcEntityPositionList, businessTypeName, e.mapAreaName)
|
451
|
|
point.setAttributes({'mapAreaBusinessType': e.businessType})
|
|
498
|
this.getPopup(point, e.ebcEntityPositionList, businessTypeName, e.mapAreaName, [0, -10])
|
|
499
|
point.setAttributes({'mapAreaBusinessType': ''})
|
452
|
500
|
}
|
453
|
501
|
})
|
454
|
502
|
},
|
|
@ -490,14 +538,30 @@ export default {
|
490
|
538
|
return 'normal'
|
491
|
539
|
}
|
492
|
540
|
},
|
493
|
|
getPopup(point, positionList, type, name) {
|
|
541
|
switchChange(status) {
|
|
542
|
console.log(status)
|
|
543
|
if (status) {
|
|
544
|
this.popups.forEach(e => {
|
|
545
|
e.openOn(this.map)
|
|
546
|
})
|
|
547
|
} else {
|
|
548
|
this.popups.forEach(e => {
|
|
549
|
this.map.closePopup(e)
|
|
550
|
})
|
|
551
|
}
|
|
552
|
},
|
|
553
|
getPopup(point, positionList, type, name, offset) {
|
494
|
554
|
var popup = Ai.Popup({
|
495
|
|
minWidth: 300,
|
496
|
|
offset: [0, -10],
|
497
|
|
// autoClose: true,
|
|
555
|
offset: offset,
|
|
556
|
autoClose: false,
|
|
557
|
autoPan: false,
|
498
|
558
|
closeButton: true
|
499
|
559
|
})
|
500
|
|
var content = '<div class="tips-item"><div class="top"><div>' + type + ':</div><div>' + name + '</div></div><div class="container">'
|
|
560
|
var content = '<div class="tips-item">'
|
|
561
|
if (type) {
|
|
562
|
content += '<div class="top"><div><b>' + type + '</b></div><div>' + name + '</div></div>'
|
|
563
|
}
|
|
564
|
content += '<div class="container">'
|
501
|
565
|
positionList.forEach(e => {
|
502
|
566
|
content +=
|
503
|
567
|
'<div class="' + this.getClassByStatus(e.locationStatus) + '">' + e.name + '</div>'
|
|
@ -510,27 +574,28 @@ export default {
|
510
|
574
|
popup.openOn(this.map)
|
511
|
575
|
point.popup = popup
|
512
|
576
|
point.on('click', (e) => {
|
513
|
|
point.popup.openOn(this.map)
|
|
577
|
if (point.popup.openo) {
|
|
578
|
this.map.closePopup(point.popup)
|
|
579
|
} else {
|
|
580
|
point.popup.openOn(this.map)
|
|
581
|
}
|
514
|
582
|
})
|
|
583
|
this.popups.push(popup)
|
|
584
|
popup.openo = true
|
515
|
585
|
return popup
|
516
|
586
|
},
|
517
|
|
loadMapView() {
|
518
|
|
this.$test
|
519
|
|
.post(services.organization.MAP_LOCATION_VIEW, {})
|
520
|
|
.then((res) => {
|
521
|
|
console.log(res)
|
522
|
|
this.loadUnaggregated(res.data.unaggregatedEntityPositionList)
|
523
|
|
})
|
524
|
|
.catch((res) => {
|
525
|
|
// 请求失败处理...
|
526
|
|
})
|
|
587
|
popClose(e) {
|
|
588
|
e.popup.openo = false
|
|
589
|
},
|
|
590
|
popOpen(e) {
|
|
591
|
e.popup.openo = true
|
527
|
592
|
},
|
528
|
593
|
loadUnaggregated(dataList) { // 加载不聚合的人
|
529
|
|
var points = []
|
530
|
594
|
dataList.forEach(element => {
|
|
595
|
var classStr = this.getClassByStatus(element.locationStatus)
|
531
|
596
|
var point = Ai.Point([element.latitude, element.longitude], {
|
532
|
597
|
icon: Ai.DivIcon({
|
533
|
|
html: '<div class="sos">1人</div>',
|
|
598
|
html: '<div class="' + classStr + '">1人</div>',
|
534
|
599
|
className: 'person-count',
|
535
|
600
|
// 设置图标大小
|
536
|
601
|
// iconSize: [20, 20],
|
|
@ -539,81 +604,18 @@ export default {
|
539
|
604
|
})
|
540
|
605
|
})
|
541
|
606
|
this.map.addLayer(point)
|
542
|
|
var popup = Ai.Popup({
|
543
|
|
minWidth: 100,
|
544
|
|
offset: [0, -10],
|
545
|
|
autoClose: false,
|
546
|
|
closeButton: false
|
547
|
|
})
|
548
|
|
var content =
|
549
|
|
'<div class="tips-item"><div class="container">' +
|
550
|
|
'<div class="sos">' + element.name + '</div>' +
|
551
|
|
'</div></div>'
|
552
|
|
// 设置弹出框弹出位置
|
553
|
|
popup.setLatLng(point.getLatLng())
|
554
|
|
// 设置弹出框弹出内容
|
555
|
|
popup.setContent(content)
|
556
|
|
popup.openOn(this.map)
|
557
|
|
points.push(point)
|
|
607
|
this.getPopup(point, [element], '', '', [0, -10])
|
558
|
608
|
})
|
559
|
|
this.map.setViewPort([points])
|
|
609
|
// this.map.setViewPort([points])
|
560
|
610
|
},
|
561
|
611
|
loadAggregated(dataList) {
|
562
|
612
|
},
|
563
|
|
loadCoreEntity() {
|
564
|
|
var point = Ai.Point([32.04533333333333, 125.4221944444444], {
|
565
|
|
icon: Ai.DivIcon({
|
566
|
|
html: '<div class="sos">4人</div>',
|
567
|
|
className: 'person-count',
|
568
|
|
// 设置图标大小
|
569
|
|
// iconSize: [20, 20],
|
570
|
|
// 设置点对象和图标的相对偏移量
|
571
|
|
iconAnchor: [15, 50]
|
572
|
|
})
|
573
|
|
})
|
574
|
|
var point2 = Ai.Point([32.04533333333333, 125.4221944444444], {
|
575
|
|
icon: Ai.Icon({
|
576
|
|
// 设置图标URL路径
|
577
|
|
iconUrl: '/static/images/fan.png',
|
578
|
|
// 设置图标大小
|
579
|
|
iconSize: [20, 20],
|
580
|
|
// 设置点对象和图标的相对偏移量
|
581
|
|
iconAnchor: [100, 100]
|
582
|
|
})
|
583
|
|
})
|
584
|
|
point.setAttributes({'resourceToolType': '002'})
|
585
|
|
point2.setAttributes({'resourceToolType': '002'})
|
586
|
|
var layer = this.layer.equipmentLayer
|
587
|
|
layer.addLayer(point)
|
588
|
|
layer.addLayer(point2)
|
589
|
|
this.map.addLayer(layer)
|
590
|
|
var popup = Ai.Popup({
|
591
|
|
minWidth: 300,
|
592
|
|
offset: [0, -40],
|
593
|
|
// autoClose: true,
|
594
|
|
closeButton: true
|
595
|
|
})
|
596
|
|
var content =
|
597
|
|
'<div class="tips-item"><div class="top"><div class="fengji"></div><div>风机</div><div>FJ001</div></div><div class="container">' +
|
598
|
|
'<div class="sos">张三</div><div class="normal">张三</div><div class="outline">张三</div><div class="offline">张三</div><div class="sos">张三</div>' +
|
599
|
|
'</div></div>'
|
600
|
|
// 设置弹出框弹出位置
|
601
|
|
popup.setLatLng(point.getLatLng())
|
602
|
|
// 设置弹出框弹出内容
|
603
|
|
popup.setContent(content)
|
604
|
|
popup.openOn(this.map)
|
605
|
|
this.popup = popup
|
606
|
|
point.on('click', (e) => {
|
607
|
|
this.popup.openOn(this.map)
|
608
|
|
})
|
609
|
|
},
|
610
|
613
|
showOrHide(layer, item) { // 地图设备人员围栏显示和隐藏
|
611
|
614
|
item.show = !item.show
|
612
|
615
|
layer.eachLayer((e) => {
|
613
|
616
|
if ((e.getAttributes().resourceToolType == item.resourceToolType && item.resourceToolType != undefined) || (e.getAttributes().mapAreaBusinessType == item.mapAreaBusinessType && item.mapAreaBusinessType != undefined)) {
|
614
|
617
|
if (this.map.hasLayer(e)) {
|
615
|
618
|
this.map.removeLayer(e)
|
616
|
|
debugger
|
617
|
619
|
if (e.popup) {
|
618
|
620
|
this.map.closePopup(e.popup)
|
619
|
621
|
}
|