239 lines
8.6 KiB
Plaintext
239 lines
8.6 KiB
Plaintext
|
//在div中初始化地图
|
||
|
|
let uploadedDataURL2 = "../../../js/compreDisplay/anhui/hefei.json";
|
||
|
|
echarts.init(document.getElementById('echarts-map')).dispose();
|
||
|
|
let myChart2 = null;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 加载地图
|
||
|
|
* @param dataMap
|
||
|
|
*/
|
||
|
|
function map2(dataMap) {
|
||
|
|
$.getJSON(uploadedDataURL2, function (geoJson) {
|
||
|
|
echarts.registerMap('anhui', geoJson);
|
||
|
|
myChart.hideLoading();
|
||
|
|
let max = 480,
|
||
|
|
min = 1.1; // todo
|
||
|
|
let maxSize4Pin = 100,
|
||
|
|
minSize4Pin = 100;
|
||
|
|
|
||
|
|
let convertData = function (data) {
|
||
|
|
let res = [];
|
||
|
|
for (let i = 0; i < data.length; i++) {
|
||
|
|
let geoCoord = data[i].coordinate;
|
||
|
|
if (geoCoord) {
|
||
|
|
res.push({
|
||
|
|
proName: data[i].proName,
|
||
|
|
riskLevel: data[i].riskType,
|
||
|
|
workContent: dealEmptyString(data[i].workContent),
|
||
|
|
isOnline: isOnline(data[i].ballStatus),
|
||
|
|
workManager: dealEmptyString(data[i].workManage) + '' + dealEmptyString(data[i].workManagePhone),
|
||
|
|
value: geoCoord.concat(data[i].value),
|
||
|
|
coordinate: data[i].coordinate,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return res;
|
||
|
|
};
|
||
|
|
|
||
|
|
let option = {
|
||
|
|
silent: false,
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: 'red'
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
enterable: true,
|
||
|
|
position: function (pos, params, dom, rect, size) {
|
||
|
|
if ($(dom).children($('p')).length === 0) $(dom).css('display', 'none')
|
||
|
|
pos = [pos[0], pos[1] + 10];
|
||
|
|
return pos;
|
||
|
|
},
|
||
|
|
backgroundColor: 'rgba(14, 17, 28,0.63)', //设置背景颜色
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff'
|
||
|
|
},
|
||
|
|
borderColor: "#174FDD",
|
||
|
|
formatter: function (params) {
|
||
|
|
if (params.data)
|
||
|
|
return (
|
||
|
|
'<p class="map-p">' + params.data.proName + '</p>' +
|
||
|
|
'<p class="map-p">风险等级：' + setRiskLevelColor(params.data.riskLevel) + '</p>' +
|
||
|
|
'<p class="map-p" title="' + params.data.workContent + '">作业内容：' + sliceStr(params.data.workContent) + '</p>' +
|
||
|
|
'<p class="map-p">班组长：' + params.data.workManager + '</p>' +
|
||
|
|
'<p class="map-p">球机：' + params.data.isOnline + '</p>'
|
||
|
|
)
|
||
|
|
},
|
||
|
|
// extraCssText: "background:url('../../img/tc.png') 100% 100% repeat;",
|
||
|
|
extraCssText: "max-width:300px;height:auto;word-break:break-all;white-space:pre-wrap;",
|
||
|
|
|
||
|
|
},
|
||
|
|
geo: {
|
||
|
|
show: true,
|
||
|
|
map: 'anhui',
|
||
|
|
aspectScale: 0.8,
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
||
|
|
},
|
||
|
|
rotate: -20,
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
show: true,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
roam: false,
|
||
|
|
scaleLimit: {
|
||
|
|
max: max,
|
||
|
|
min: min
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
areaColor: '#52ADF3',
|
||
|
|
borderColor: '#fff',
|
||
|
|
borderWidth: 2,
|
||
|
|
shadowColor: 'rgba(80, 172, 243, 0.5)',
|
||
|
|
shadowBlur: 30
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
areaColor: '#2B91B7',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '在线',
|
||
|
|
type: 'scatter',
|
||
|
|
coordinateSystem: 'geo',
|
||
|
|
animation: false,
|
||
|
|
symbolSize: function (val) {
|
||
|
|
let a = (maxSize4Pin - minSize4Pin) / (max - min);
|
||
|
|
let b = minSize4Pin - a * min;
|
||
|
|
b = maxSize4Pin - a * max;
|
||
|
|
return 20;
|
||
|
|
},
|
||
|
|
symbol: function (val) {
|
||
|
|
switch (val[2]) {
|
||
|
|
case 2:
|
||
|
|
return 'image://../../img/compreDisplay/two-risk.png';
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
return 'image://../../img/compreDisplay/three-risk.png';
|
||
|
|
break;
|
||
|
|
case 4:
|
||
|
|
return 'image://../../img/compreDisplay/four-risk.png';
|
||
|
|
break;
|
||
|
|
case 5:
|
||
|
|
return 'image://../../img/compreDisplay/five-risk.png';
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: false,
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 15,
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
zlevel: 6,
|
||
|
|
z: 6,
|
||
|
|
data: convertData(dataMap)
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
|
||
|
|
myChart2.clear();
|
||
|
|
myChart2.setOption(option, true);
|
||
|
|
});
|
||
|
|
window.addEventListener("resize", function () {
|
||
|
|
myChart2.resize();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/*判空*/
|
||
|
|
function dealEmptyString(str) {
|
||
|
|
if (str) {
|
||
|
|
return str;
|
||
|
|
}
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
|
||
|
|
// 超长设置隐藏
|
||
|
|
function sliceStr(value) {
|
||
|
|
if (value) {
|
||
|
|
return value.length > 12 ? value.slice(0, 12) + '...' : value;
|
||
|
|
} else {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*判断球机是否在线*/
|
||
|
|
function isOnline(value) {
|
||
|
|
if (value) {
|
||
|
|
if (value === '0' || value === 0) {
|
||
|
|
return '离线';
|
||
|
|
} else {
|
||
|
|
return '在线';
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
return '离线';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 地市地图
|
||
|
|
function setCityMap(name, isSup, mapPointList) {
|
||
|
|
if (isSup === '1' || isSup === '2') {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/anhui.json';
|
||
|
|
} else {
|
||
|
|
if (name === "12A0") {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/hefei.json';
|
||
|
|
} else if (name === "12C0") {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/wuhu.json';
|
||
|
|
} else if (name === "12L0") {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/bengbu.json';
|
||
|
|
} else if (name === "12F0") {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/huainan.json';
|
||
|
|
} else if (name === "12B0") {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/maansan.json';
|
||
|
|
} else if (name === "12P0") {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/huaibei.json';
|
||
|
|
} else if (name === "12J0") {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/tongling.json';
|
||
|
|
} else if (name === "12D0") {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/anqing.json';
|
||
|
|
} else if (name === "12S0") {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/huangshan.json';
|
||
|
|
} else if (name === "12H0") {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/fuyang.json';
|
||
|
|
} else if (name === "12Q0") {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/suzhou.json';
|
||
|
|
} else if (name === "12M0") {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/chuzhou.json';
|
||
|
|
} else if (name === "12N0") {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/liuan.json';
|
||
|
|
} else if (name === "12G0") {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/xuancheng.json';
|
||
|
|
} else if (name === "12R0") {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/chizhou.json';
|
||
|
|
} else if (name === "12T0") {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/bozhou.json';
|
||
|
|
} else if (name === "12Z0") {
|
||
|
|
uploadedDataURL2 = '../../js/compreDisplay/anhui/anhui.json';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
myChart2 = echarts.init(document.getElementById('echarts-map'));
|
||
|
|
map2(mapPointList);
|
||
|
|
}
|