|
|
|
|
@ -1,4 +1,5 @@
|
|
|
|
|
import { Component, OnInit } from "@angular/core"; |
|
|
|
|
import { DomSanitizer } from "@angular/platform-browser"; |
|
|
|
|
import * as echarts from "echarts"; |
|
|
|
|
declare var T: any; |
|
|
|
|
@Component({ |
|
|
|
|
@ -7,29 +8,32 @@ declare var T: any;
|
|
|
|
|
styleUrls: ["./gis-home.component.scss"], |
|
|
|
|
}) |
|
|
|
|
export class GisHomeComponent implements OnInit { |
|
|
|
|
constructor() {} |
|
|
|
|
constructor(private sanitizer: DomSanitizer) {} |
|
|
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
|
|
this.createLabelSContent(this.markerList); |
|
|
|
|
this.initMap(); |
|
|
|
|
this.initEcharts(); |
|
|
|
|
|
|
|
|
|
console.log(this.markerList); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
echartleft1; |
|
|
|
|
echartleft1Data = [ |
|
|
|
|
{ value: 1312, name: "综合应急预案" }, |
|
|
|
|
{ value: 1583, name: "专项应急预案" }, |
|
|
|
|
{ value: 1235, name: "现场处置方案" }, |
|
|
|
|
{ value: 1852, name: "应急处置卡" }, |
|
|
|
|
{ value: 3152, name: "现场处置方案" }, |
|
|
|
|
{ value: 5421, name: "应急处置卡" }, |
|
|
|
|
{ value: 1735, name: "应急预案" }, |
|
|
|
|
{ value: 1258, name: "类型预案" }, |
|
|
|
|
{ value: 600, name: "I-V级预案" }, |
|
|
|
|
{ value: 19150, name: "I-V级预案" }, |
|
|
|
|
]; |
|
|
|
|
echartleft1Option = { |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: "item", |
|
|
|
|
}, |
|
|
|
|
title: { |
|
|
|
|
text: "9,333", |
|
|
|
|
text: "33,611", |
|
|
|
|
subtext: "预案总数", |
|
|
|
|
left: "28.5%", |
|
|
|
|
x: "center", |
|
|
|
|
@ -227,17 +231,17 @@ export class GisHomeComponent implements OnInit {
|
|
|
|
|
}; |
|
|
|
|
echartleft2; |
|
|
|
|
echartleft2Data = [ |
|
|
|
|
{ value: 3523, name: "综合演练" }, |
|
|
|
|
{ value: 2560, name: "跨区域演练" }, |
|
|
|
|
{ value: 345, name: "综合演练" }, |
|
|
|
|
{ value: 21, name: "跨区域演练" }, |
|
|
|
|
{ value: 853, name: "单项演练" }, |
|
|
|
|
{ value: 1237, name: "研究性演练" }, |
|
|
|
|
{ value: 12, name: "研究性演练" }, |
|
|
|
|
]; |
|
|
|
|
echartleft2Option = { |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: "item", |
|
|
|
|
}, |
|
|
|
|
title: { |
|
|
|
|
text: "8,173", |
|
|
|
|
text: "1,231", |
|
|
|
|
subtext: "演练总数", |
|
|
|
|
left: "28.5%", |
|
|
|
|
x: "center", |
|
|
|
|
@ -445,7 +449,7 @@ export class GisHomeComponent implements OnInit {
|
|
|
|
|
trigger: "item", |
|
|
|
|
}, |
|
|
|
|
title: { |
|
|
|
|
text: "9,173", |
|
|
|
|
text: "8,173", |
|
|
|
|
subtext: "隐患总数", |
|
|
|
|
left: "28.5%", |
|
|
|
|
x: "center", |
|
|
|
|
@ -1133,17 +1137,157 @@ export class GisHomeComponent implements OnInit {
|
|
|
|
|
map; |
|
|
|
|
zoom = 5; |
|
|
|
|
|
|
|
|
|
markerList = [ |
|
|
|
|
{ marker: null, coordinate: [98.56934, 38.93555] }, |
|
|
|
|
{ marker: null, coordinate: [97.0752, 32.95898] }, |
|
|
|
|
{ marker: null, coordinate: [103.88672, 22.89551] }, |
|
|
|
|
{ marker: null, coordinate: [108.41309, 29.79492] }, |
|
|
|
|
markerList: any = [ |
|
|
|
|
{ |
|
|
|
|
id: 0, |
|
|
|
|
name: "天津", |
|
|
|
|
marker: null, |
|
|
|
|
label: null, |
|
|
|
|
coordinate: [117.42188, 38.14453], |
|
|
|
|
data: { |
|
|
|
|
station: 5, |
|
|
|
|
oilDepot: 5, |
|
|
|
|
chemical: 22, |
|
|
|
|
enterprise: 74, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 1, |
|
|
|
|
name: "北京", |
|
|
|
|
marker: null, |
|
|
|
|
label: null, |
|
|
|
|
coordinate: [116.39465, 39.88586], |
|
|
|
|
data: { |
|
|
|
|
station: 9, |
|
|
|
|
oilDepot: 1, |
|
|
|
|
chemical: 1, |
|
|
|
|
enterprise: 116, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 2, |
|
|
|
|
name: "上海", |
|
|
|
|
marker: null, |
|
|
|
|
label: null, |
|
|
|
|
coordinate: [121.46759, 31.20392], |
|
|
|
|
data: { |
|
|
|
|
station: 131, |
|
|
|
|
oilDepot: 99, |
|
|
|
|
chemical: 172, |
|
|
|
|
enterprise: 19191, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 3, |
|
|
|
|
name: "湖北", |
|
|
|
|
marker: null, |
|
|
|
|
label: null, |
|
|
|
|
coordinate: [112.45605, 30.27832], |
|
|
|
|
data: { |
|
|
|
|
station: 0, |
|
|
|
|
oilDepot: 2, |
|
|
|
|
chemical: 6, |
|
|
|
|
enterprise: 34, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 4, |
|
|
|
|
name: "湖南", |
|
|
|
|
marker: null, |
|
|
|
|
label: null, |
|
|
|
|
coordinate: [111.62109, 26.93848], |
|
|
|
|
data: { |
|
|
|
|
station: 30, |
|
|
|
|
oilDepot: 2, |
|
|
|
|
chemical: 3, |
|
|
|
|
enterprise: 44, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 5, |
|
|
|
|
name: "广东", |
|
|
|
|
marker: null, |
|
|
|
|
label: null, |
|
|
|
|
coordinate: [113.37891, 22.76367], |
|
|
|
|
data: { |
|
|
|
|
station: 42, |
|
|
|
|
oilDepot: 0, |
|
|
|
|
chemical: 1, |
|
|
|
|
enterprise: 23, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 6, |
|
|
|
|
name: "广西", |
|
|
|
|
marker: null, |
|
|
|
|
label: null, |
|
|
|
|
coordinate: [108.76465, 22.71973], |
|
|
|
|
data: { |
|
|
|
|
station: 4, |
|
|
|
|
oilDepot: 5, |
|
|
|
|
chemical: 29, |
|
|
|
|
enterprise: 91, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 7, |
|
|
|
|
name: "福建", |
|
|
|
|
marker: null, |
|
|
|
|
label: null, |
|
|
|
|
coordinate: [118.21289, 25.22461], |
|
|
|
|
data: { |
|
|
|
|
station: 108, |
|
|
|
|
oilDepot: 0, |
|
|
|
|
chemical: 0, |
|
|
|
|
enterprise: 0, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
createLabelSContent(list) { |
|
|
|
|
list.forEach((element) => { |
|
|
|
|
let totalString = this.numberProcess(this.sumValues(element.data)); |
|
|
|
|
element.sContent1 = `<div class='markerTotal'> ${totalString} </div>`; |
|
|
|
|
element.sContent2 = "<div class='markerInfoWin'>"; |
|
|
|
|
for (const key in element.data) { |
|
|
|
|
if (Object.prototype.hasOwnProperty.call(element.data, key)) { |
|
|
|
|
const item = element.data[key]; |
|
|
|
|
if (item !== 0) { |
|
|
|
|
switch (key) { |
|
|
|
|
case "station": |
|
|
|
|
element.sContent2 += `<div class='icon icon1'><img src='../../../assets/gismap/gis/1.png' alt=''></div><div class='num'> ${item} </div>`; |
|
|
|
|
break; |
|
|
|
|
|
|
|
|
|
case "oilDepot": |
|
|
|
|
element.sContent2 += `<div class='icon icon2'><img src='../../../assets/gismap/gis/2.png' alt=''></div><div class='num'> ${item} </div>`; |
|
|
|
|
break; |
|
|
|
|
|
|
|
|
|
case "chemical": |
|
|
|
|
element.sContent2 += `<div class='icon icon3'><img src='../../../assets/gismap/gis/3.png' alt=''></div><div class='num'> ${item} </div>`; |
|
|
|
|
break; |
|
|
|
|
|
|
|
|
|
case "enterprise": |
|
|
|
|
element.sContent2 += `<div class='icon icon4'><img src='../../../assets/gismap/gis/4.png' alt=''></div><div class='num'> ${item} </div>`; |
|
|
|
|
break; |
|
|
|
|
|
|
|
|
|
default: |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
element.sContent2 += "</div>"; |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
selectedMarker = null; |
|
|
|
|
PointOffset1 = [-25, -53]; //markerlabel偏移量
|
|
|
|
|
PointOffset2 = [-28, -65]; |
|
|
|
|
initMap() { |
|
|
|
|
this.map = new T.Map("mapDiv", { |
|
|
|
|
projection: "EPSG:4326", |
|
|
|
|
}); |
|
|
|
|
this.map.centerAndZoom(new T.LngLat(107.79785, 35.77148), this.zoom); |
|
|
|
|
this.map.centerAndZoom(new T.LngLat(116.2793, 32.95898), this.zoom); |
|
|
|
|
//创建图片对象
|
|
|
|
|
var icon = new T.Icon({ |
|
|
|
|
iconUrl: "../../../assets/gismap/gis/marker.png", |
|
|
|
|
@ -1160,34 +1304,75 @@ export class GisHomeComponent implements OnInit {
|
|
|
|
|
); |
|
|
|
|
//向地图上添加标注
|
|
|
|
|
this.map.addOverLay(element.marker); |
|
|
|
|
|
|
|
|
|
let sContent = |
|
|
|
|
"<div class='markerInfoWin'><div class='icon icon1'><img src='../../../assets/gismap/gis/1.png' alt=''></div><div class='num'> 36 </div><div class='icon icon2'><img src='../../../assets/gismap/gis/2.png' alt=''></div><div class='num'> 36 </div><div class='icon icon3'><img src='../../../assets/gismap/gis/3.png' alt=''></div><div class='num'> 36 </div><div class='icon icon4'><img src='../../../assets/gismap/gis/4.png' alt=''></div><div class='num'> 36 </div></div>"; |
|
|
|
|
// infoWin1.setContent(sContent);
|
|
|
|
|
// let infoWin1 = new T.InfoWindow(sContent, {
|
|
|
|
|
// closeButton: false,
|
|
|
|
|
// });
|
|
|
|
|
// element.marker.openInfoWindow(infoWin1);s
|
|
|
|
|
let label = new T.Label({ |
|
|
|
|
text: sContent, |
|
|
|
|
element.marker.addEventListener("click", (event) => { |
|
|
|
|
this.markerClick(element); |
|
|
|
|
}); |
|
|
|
|
element.label = new T.Label({ |
|
|
|
|
text: element.sContent1, |
|
|
|
|
position: element.marker.getLngLat(), |
|
|
|
|
offset: new T.Point(-28, -65), |
|
|
|
|
offset: new T.Point(this.PointOffset1[0], this.PointOffset1[1]), |
|
|
|
|
}); |
|
|
|
|
this.map.addOverLay(label); |
|
|
|
|
this.map.addOverLay(element.label); |
|
|
|
|
}); |
|
|
|
|
this.map.addEventListener("click", (e) => { |
|
|
|
|
this.MapClick(e); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//数字加工 ,
|
|
|
|
|
numberProcess(num) { |
|
|
|
|
if (num.toString().length > 3) { |
|
|
|
|
return num.toLocaleString(); |
|
|
|
|
} |
|
|
|
|
return num.toString(); |
|
|
|
|
} |
|
|
|
|
//对象求和
|
|
|
|
|
sumValues(obj) { |
|
|
|
|
let sum = 0; |
|
|
|
|
|
|
|
|
|
for (let key in obj) { |
|
|
|
|
if (typeof obj[key] === "number") { |
|
|
|
|
sum += obj[key]; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return sum; |
|
|
|
|
} |
|
|
|
|
//地图点击事件
|
|
|
|
|
MapClick(e) { |
|
|
|
|
console.log("点击坐标:", e.lnglat.getLng() + "," + e.lnglat.getLat()); |
|
|
|
|
this.markerList.forEach((element) => { |
|
|
|
|
element.label.setLabel(element.sContent1); |
|
|
|
|
element.label.setOffset( |
|
|
|
|
new T.Point(this.PointOffset1[0], this.PointOffset1[1]) |
|
|
|
|
); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
//标注点 点击事件
|
|
|
|
|
markerClick(item) { |
|
|
|
|
console.log("标注点击", item); |
|
|
|
|
// // this.selectedMarker = element;
|
|
|
|
|
// // this.selectedMarker.label.setLabel("");
|
|
|
|
|
this.markerList.forEach((element) => { |
|
|
|
|
element.label.setLabel(element.sContent1); |
|
|
|
|
element.label.setOffset( |
|
|
|
|
new T.Point(this.PointOffset1[0], this.PointOffset1[1]) |
|
|
|
|
); |
|
|
|
|
}); |
|
|
|
|
item.label.setLabel(item.sContent2); |
|
|
|
|
item.label.setOffset( |
|
|
|
|
new T.Point(this.PointOffset2[0], this.PointOffset2[1]) |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
urlTo(url) { |
|
|
|
|
window.open(url); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
aHref(e, url) { |
|
|
|
|
e.preventDefault(); // 阻止默认行为
|
|
|
|
|
let aHrefUnsafe = this.sanitizer.bypassSecurityTrustUrl(url); |
|
|
|
|
// console.log("aHrefUnsafe", aHrefUnsafe);
|
|
|
|
|
window.location.href = url; // 执行链接的跳转行为
|
|
|
|
|
} |
|
|
|
|
unitList1 = ["广西有限公司", "重庆有限公司", "柳州有限公司"]; |
|
|
|
|
unitList2 = [ |
|
|
|
|
"芯恩集成电路有限公司", |
|
|
|
|
|
