264 lines
11 KiB
JavaScript
264 lines
11 KiB
JavaScript
/**
|
|
* 顶部header
|
|
*/
|
|
Vue.component("safe-china-map", {
|
|
template: `
|
|
<div :style="{'height': height+'px'}" ref="map"></div>
|
|
`,
|
|
props: {
|
|
data:{
|
|
type:Array
|
|
},
|
|
tooltip:{
|
|
type:Array
|
|
},
|
|
height:{
|
|
type:Number
|
|
},
|
|
item:{
|
|
type:Number
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
option:{},
|
|
|
|
}
|
|
},
|
|
mounted(){
|
|
this.loadMap(this.data)
|
|
window.chartClick = this.chartClick;
|
|
},
|
|
methods: {
|
|
chartClick(id){
|
|
this.$emit('projectid',id)
|
|
},
|
|
loadMap(outdata,tooltip) {
|
|
|
|
var normalData = []
|
|
var warningData = []
|
|
var policeData = []
|
|
var newData=[]
|
|
for (let i = 0; i <outdata.length ; i++) {
|
|
if(outdata[i].bjCount > 0){
|
|
policeData.push(outdata[i])
|
|
}else {
|
|
if(outdata[i].yjCount > 0){
|
|
warningData.push(outdata[i])
|
|
}else{
|
|
normalData.push(outdata[i])
|
|
}
|
|
}
|
|
}
|
|
|
|
normalData.map(x=>{
|
|
x.icon = "image://http://fileimg.makalu.cc/WEB_0FAA4510A66B485BBE1B187349882276.png"
|
|
return x
|
|
})
|
|
warningData.map(x=>{
|
|
x.icon = "image://http://fileimg.makalu.cc/WEB_A55D931BB10743E49D4FCBFE0D05E25E.png";
|
|
return x
|
|
})
|
|
policeData.map(x=>{
|
|
x.icon = "image://http://fileimg.makalu.cc/WEB_F2F136E5B14C4B6E91EDEB9919538815.png";
|
|
return x
|
|
})
|
|
|
|
if(normalData.length>0){
|
|
newData.push(normalData)
|
|
}
|
|
if(warningData.length>0){
|
|
newData.push(warningData)
|
|
}
|
|
if(policeData.length>0){
|
|
newData.push(policeData)
|
|
}
|
|
|
|
|
|
|
|
|
|
var series = [
|
|
{
|
|
type: 'map',
|
|
roam: true,
|
|
zoom: 1.15,
|
|
map: 'china', //使用
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
fontSize:14, //省会字体大小
|
|
textStyle: {
|
|
color: '#ffffff',
|
|
}
|
|
},
|
|
emphasis: {
|
|
show: false,
|
|
color: '#ffffff', //指上省会字体颜色
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: {
|
|
type: "radial",
|
|
x: 0.5,
|
|
y: 0.5,
|
|
r: 0.8,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: "#1c2a4c", // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#1f335e", // 100% 处的颜色
|
|
},
|
|
],
|
|
globalCoord: true, // 缺省为 false
|
|
},
|
|
shadowColor: "rgb(58,115,192)",
|
|
borderColor: '#8ac2fb'
|
|
},
|
|
// normal: {
|
|
// areaColor: '#141e37', //背景颜色
|
|
// borderColor: '#8ac2fb', //省划分边线
|
|
// borderWidth: 1, //边线的粗细
|
|
// },
|
|
emphasis: {
|
|
areaColor: '#22578b' , //指上背景限色
|
|
textStyle: {
|
|
color: '#ffffff',
|
|
|
|
}
|
|
}
|
|
},
|
|
},
|
|
]
|
|
for (let i = 0; i < newData.length ; i++) {
|
|
series.push({
|
|
type: 'scatter', //effectScatter 水波纹效果 scatter 无效果
|
|
coordinateSystem: 'geo',
|
|
rippleEffect: {
|
|
brushType: 'stroke'
|
|
},
|
|
showEffectOn: 'render',
|
|
itemStyle: {
|
|
normal: {
|
|
show: false,
|
|
}
|
|
},
|
|
symbolSize: 35,
|
|
symbol: newData[i][0].icon,
|
|
data: newData[i],
|
|
zlevel: 1,
|
|
})
|
|
}
|
|
|
|
var myChart = echarts.init(this.$refs.map);
|
|
var geoCoordMap = {};
|
|
/*获取地图数据*/
|
|
var mapFeatures = echarts.getMap('china').geoJson.features;
|
|
// console.log(mapFeatures)
|
|
mapFeatures.forEach(function(v) {
|
|
// 地区名称
|
|
var name = v.properties.name;
|
|
// 地区经纬度
|
|
geoCoordMap[name] = v.properties.cp;
|
|
});
|
|
this.option = {
|
|
tooltip: {
|
|
show: true,
|
|
trigger: "item",
|
|
enterable: true,
|
|
showContent: true,
|
|
padding:0,
|
|
triggerOn:'click',
|
|
formatter: function(params) {
|
|
var tipHtml = ''
|
|
if(params.data){
|
|
tipHtml = '<div style="width: 300px;background: url(\'images/map_popup_bgd.png\') no-repeat center/100% 100%;font-size: 14px;">\n' +
|
|
' <div style="padding: 7px 3px 10px;">\n' +
|
|
' <div onclick="chartClick('+params.data.id+')" style="height: 33px;width:100%;background: url(\'images/map_popup_title.png\') no-repeat center/100% 100%;padding-left: 5px;line-height: 33px;color: #ffffff;display: flex;justify-content: space-between;cursor: pointer">\n' +
|
|
' <div>'+params.data.project_abbreviation+'</div>\n' +
|
|
' <div style="padding: 5px 10px"><img src="images/check_icon.png" width="10" height="20"></div>\n' +
|
|
' </div>\n' +
|
|
' <div style="padding: 10px;color:#cbdaff;">\n' +
|
|
' <table style="width: 100%">\n' +
|
|
' <tr>\n' +
|
|
' <td style="width: 50%">\n' +
|
|
' <div style="height: 40px;line-height: 40px;"> 设备数量：<span style="color: #fff;font-size: 16px;">'+params.data.total+'</span></div>\n' +
|
|
' </td>\n' +
|
|
' <td style="width: 50%">\n' +
|
|
' <div style="height: 40px;line-height: 40px;"> 监控数量：<span style="color: #fff;font-size: 16px;">'+params.data.jkTotal+'</span></div>\n' +
|
|
' </td>\n' +
|
|
' </tr>\n' +
|
|
' <tr>\n' +
|
|
' <td style="width: 50%">\n' +
|
|
' <div style="height: 40px;line-height: 40px;"> 预警数量：<span style="color: #fff;font-size: 16px;">'+params.data.yjCount+'</span></div>\n' +
|
|
' </td>\n' +
|
|
' <td style="width: 50%">\n' +
|
|
' <div style="height: 40px;line-height: 40px;"> 报警数量：<span style="color: #fff;font-size: 16px;">'+params.data.bjCount+'</span></div>\n' +
|
|
' </td>\n' +
|
|
' </tr>\n' +
|
|
' </table>\n' +
|
|
' </div>\n' +
|
|
' <div style="padding: 0 12px;">\n' +
|
|
' <div style="color: #49b3ff;background: #132c55;padding: 10px;white-space:normal">'+params.data.address+'</div>\n' +
|
|
' </div>\n' +
|
|
' </div>\n' +
|
|
'</div>'
|
|
return tipHtml
|
|
}
|
|
},
|
|
},
|
|
geo: {
|
|
map: 'china',
|
|
show: true,
|
|
roam: true,
|
|
zoom: 1.17,
|
|
label: {
|
|
emphasis: {
|
|
show: false,
|
|
}
|
|
},
|
|
layoutSize: "100%",
|
|
itemStyle: {
|
|
// normal: {
|
|
// areaColor: '#000', //背景颜色
|
|
// borderColor: '#8ac2fb', //省划分边线
|
|
// borderWidth: 10, //边线的粗细
|
|
// },
|
|
// emphasis: {
|
|
// areaColor: '#002d90' , //指上背景限色
|
|
// },
|
|
areaColor: "#86c2f8",
|
|
borderColor: "#86c2f8",
|
|
shadowColor: "#86c2f8",
|
|
shadowBlur: 25,
|
|
borderWidth: 5,
|
|
},
|
|
},
|
|
series: series
|
|
};
|
|
myChart.setOption(this.option);
|
|
|
|
myChart.on('georoam', function(params) {
|
|
var option = myChart.getOption(); //获得option对象
|
|
if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
|
|
option.geo[0].zoom = option.series[0].zoom+0.02; //下层geo的缩放等级跟着上层的geo一起改变
|
|
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
|
|
} else { //捕捉到拖曳时
|
|
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
|
|
}
|
|
myChart.setOption(option); //设置option
|
|
});
|
|
},
|
|
|
|
},
|
|
watch: {
|
|
data: function (n,o) {
|
|
this.loadMap(this.data)
|
|
window.chartClick = this.chartClick;
|
|
}
|
|
},
|
|
})
|