攻击数
1.png
攻击链
2.png
<template>
<div class="home-center-wrapper">
<ul class="check" :class="flag == 2 ? 'check2' : ''">
<li @click="handleChange(1)"><i></i>攻击数</li>
<li @click="handleChange(2)"><i></i>攻击链</li>
</ul>
<div id="map" style="width: 1400px; height: 676px"></div>
</div>
</template>
<script>
import img2 from "./imgs/bg2.jpg";
import img from "./imgs/map-bg2.jpg";
import shandong from "./utils/shandong.json"; // 地图json数据
import geoCoordMap from "./utils/provinceGeoCoordMap.js";
import BJData from "./utils/BJData3.js";
export default {
name: "homeCenter",
data() {
return {
flag: 1,
symbol: "",
array: [],
array2: [],
isShowCityName: false,
BJData,
provinceData: [],
};
},
created() {},
mounted() {
this.getProvinceMap();
},
methods: {
getArrDifference(arr1, arr2) {
return arr1.concat(arr2).filter(function (v, i, arr) {
return arr.indexOf(v) === arr.lastIndexOf(v);
});
},
getProvinceMap() {
this.provinceData = [];
let arr = [];
let temp = [{ sum: "8", destGeoCity: "济南" }];
if (temp && temp.length > 0) {
temp.forEach((item) => {
if (
geoCoordMap[`${item.destGeoCity}市`] &&
geoCoordMap[`${item.destGeoCity}市`].length > 0
) {
arr.push(item.destGeoCity + "市");
let lng = geoCoordMap[`${item.destGeoCity}市`][0];
let lat = geoCoordMap[`${item.destGeoCity}市`][1];
this.provinceData.push({
name: `${item.destGeoCity}市`,
value: [lng, lat, Number(item.sum)],
});
}
});
}
let arr2 = [];
for (let i in geoCoordMap) {
arr2.push(i);
}
let arr3 = this.getArrDifference(arr, arr2);
let arr4 = [];
arr3.forEach((item) => {
let lng = geoCoordMap[item][0];
let lat = geoCoordMap[item][1];
arr4.push({
name: item,
value: [lng, lat, 0],
});
});
this.provinceData = this.provinceData.concat(arr4)
this.provinceData.forEach((item, index) => {
if (arr.length == 0) {
item.symbolSize = [90, 95];
item.symbol = "image://" + require("./imgs/other.png");
} else {
if (index == 0) {
if (item.value[2] == 0) {
item.symbolSize = [90, 95];
item.symbol = "image://" + require("./imgs/other.png");
} else {
item.symbolSize = [150, 150];
item.symbol = "image://" + require("./imgs/red-dot.png");
}
} else if (index == 1) {
if (item.value[2] == 0) {
item.symbolSize = [90, 95];
item.symbol = "image://" + require("./imgs/other.png");
} else {
item.symbolSize = [150, 150];
item.symbol = "image://" + require("./imgs/orange-dot.png");
}
} else if (index == 2) {
if (item.value[2] == 0) {
item.symbolSize = [90, 95];
item.symbol = "image://" + require("./imgs/other.png");
} else {
item.symbolSize = [150, 150];
item.symbol = "image://" + require("./imgs/yellow-dot.png");
}
} else {
if (item.value[2] == 0) {
item.symbolSize = [90, 95];
item.symbol = "image://" + require("./imgs/other.png");
} else {
item.symbolSize = [150, 150];
item.symbol = "image://" + require("./imgs/blue-dot.png");
}
}
}
});
this.handleChange(1);
},
handleChange(val) {
if (val == 1) {
this.isShowCityName = false;
this.flag = 1;
this.array2 = [];
this.array = this.provinceData;
} else {
this.isShowCityName = true;
this.flag = 2;
this.array = [];
this.array2 = BJData;
}
this.draw();
},
draw() {
var _this = this;
let myChart = this.$echarts.init(document.getElementById("map"));
this.$echarts.registerMap("济南", shandong);
let convertData = function (data) {
let res = [];
for (let i = 0; i < data.length; i++) {
let dataItem = data[i];
let fromCoord = geoCoordMap[dataItem[0].name];
let toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
value: dataItem[0].value,
});
}
}
return res;
};
let series = [];
[["济南市", this.array2]].forEach(function (item, i) {
series.push(
{
type: "map",
roam: false,
label: {
show: !1,
},
tooltip: {
show: !1,
},
itemStyle: {
normal: {
borderColor: "rgb(147, 235, 248)",
borderWidth: 1,
areaColor: {
x: 500,
y: 400,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "transparent", // 100% 处的颜色
},
{
offset: 1,
color: "transparent", // 0% 处的颜色
},
],
global: true, // 缺省为 false
},
},
emphasis: {
label: {
show: !1,
color: "#fff",
},
areaColor: "transparent",
// shadowColor: 'rgb(12,25,50)',
borderWidth: 1,
},
},
aspectScale: 0.75, // 长宽比
zoom: 1, // 当前视角的缩放比例
// roam: false,
map: "济南", //使用
},
{
name: item[2],
type: "lines",
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "arrow", //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {
normal: {
// color: function (item, index) {
// return '#FACC22'
// },
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#EC762E", // 0% 处的颜色
},
{
offset: 1,
color: "#FACC22", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
// 线条宽度
width: 1,
opacity: 1,
curveness: 0.3,
},
},
label: {
normal: {
show: true,
position: "middle",
formatter: "{b}",
},
},
data: convertData(item[1]),
},
{
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
//涟漪特效
period: 15, //动画时间，值越小速度越快
brushType: "fill", //波纹绘制方式 stroke, fill
scale: 4, //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: "right", //显示位置
offset: [5, 0], //偏移设置
formatter: "{b}", //圆环显示文字
textStyle: {
color: "#fff",
},
},
},
emphasis: {
show: true,
scale: !0,
label: {
show: true,
backgroundColor: "#000",
padding: 2,
borderRadius: 2,
color: "#fff",
},
},
symbol: "circle",
symbolSize: 5,
// symbolSize: function(val) {
// return 4 + val[2] / 1000; //圆环大小
// },
itemStyle: {
normal: {
show: false,
color: function (item, index) {
// let color = colorList[item.dataIndex] || "#" + ("00000" + ((
// Math.random() * 16777215 + 0.5) >> 0).toString(16))
// .slice(-6)
// return color
return "#FACC22";
},
},
},
// data: item[1].map(function (dataItem) {
// return {
// name: dataItem[0].name,
// value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
// }
// })
},
//被攻击点
{
type: "scatter",
coordinateSystem: "geo",
zlevel: -1,
rippleEffect: {
period: 4,
brushType: "stroke",
scale: 4,
},
label: {
normal: {
show: true,
position: "right",
color: "#9966cc",
formatter: "{b}",
textStyle: {
color: "#fff",
},
},
emphasis: {
show: false,
},
},
symbol: "image://" + require("./imgs/other.png"),
symbolSize: 30,
itemStyle: {
normal: {
color: "#fff",
},
},
data: [
{
name: item[0],
value: geoCoordMap[item[0]].concat([10]),
},
],
}
);
});
this.option = {
tooltip: {
show: true, // 提示浮窗是否显示
trigger: "item", // 设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。
alwaysShowContent: false,
// backgroundColor: '#fff', // 提示浮窗背景颜色
// borderColor: 'rgba(0, 0, 0, 0.16);',
hideDelay: 100,
triggerOn: "mousemove", // 鼠标移动出现浮窗，也可以是click等
enterable: true,
// className: 'custom-tooltip-box',
extraCssText:
"width:264px;height:189px;background-color:transparent;color:#fff;font-size: 14px;border:none",
textStyle: {
color: "#000",
fontSize: "12",
width: 20,
height: 30,
overflow: "break",
},
formatter(params) {
console.log(params, "ouuo");
// return `:${params.data.value6}`
},
showDelay: 100,
},
geo: [
{
map: "济南",
aspectScale: 0.75, // 长宽比
zoom: 1.1, // 当前视角的缩放比例
layoutCenter: ["50%", "50%"], // 地图中心在屏幕中的位置
layoutSize: "130%", // 地图的大小
show: true,
silent: true,
roam: false, // 鼠标缩放和平移漫游
// itemStyle: {
// normal: {
// borderColor: '#67EEEF',
// // opacity: 0,
// borderWidth: 1,
// areaColor: '#50BAF4'
// }
// },
itemStyle: {
normal: {
opacity: 1, // 透明度
borderColor: "#BDEFFF", // 省份界线颜色
borderWidth: 2, // 省份界线的宽度
shadowColor: "#BDEFFF",
areaColor: {
image: img2, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
repeat: "repeat", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
},
},
},
regions: [
// {
// name: '济南市',
// itemStyle: {
// areaColor: '#08e8f3',
// color: '#08e8f3',
// borderColor: '#15f6e9',
// borderWidth: 2,
// opacity: 0.3
// }
// }
],
},
{
map: "济南",
aspectScale: 0.75,
zoom: 1.1,
zlevel: -10,
layoutCenter: ["50%", "54%"],
layoutSize: "130%",
show: true,
silent: true,
roam: false,
itemStyle: {
normal: {
borderColor: "#081437",
borderWidth: 2,
shadowColor: "#081437",
shadowOffsetY: 40,
shadowBlur: 30,
// areaColor: '#123c91'
areaColor: {
image: img, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
repeat: "repeat", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
},
},
},
},
],
series: [
//热区
{
name: "hotZone",
type: "scatter",
coordinateSystem: "geo",
data: this.array,
// symbolSize: function(val) {
// return val[2] / 400;
// },
// showEffectOn: 'render',
rippleEffect: {
period: 4,
brushType: "fill",
scale: 4,
},
symbolSize: function (val) {},
symbol: function (val) {},
label: {
normal: {
show: true,
position: "inside", //显示位置
offset: [0, -33], //偏移设置
formatter: function (params) {
if (params.value[2] == 0) {
return `${params.name}`;
} else {
return `${params.name}${params.value[2]}`;
}
}, //圆环显示文字
textStyle: {
color: "#fff",
fontSize: 14,
fontWeight: "bold",
},
},
},
itemStyle: {
normal: {
color: "#f4e925",
shadowBlur: 10,
shadowColor: "#333",
},
},
},
{
type: "map",
map: "济南", // 自定义扩展图表类型
aspectScale: 0.75,
zoom: 1.1, // 缩放
silent: false, // 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
label: {
// 注释
normal: {
show: _this.isShowCityName, //显示城市名称
textStyle: {
color: "#fff",
fontSize: 14,
},
},
},
itemStyle: {
normal: {
// 地图区域的颜色
opacity: 0,
},
emphasis: {
// 选中的状态
label: {
show: true,
color: "#fff",
},
areaColor: "#000",
borderColor: "#000",
borderWidth: 2,
opacity: 0,
},
},
layoutCenter: ["50%", "49.3%"],
layoutSize: "130%",
data: this.dataArray2,
},
...series,
],
};
//显示地图
myChart.setOption(this.option);
myChart.dispatchAction({
type: "downplay", // 取消高亮指定的数据图形
seriesIndex: 0,
});
myChart.off("click");
//点击地图事件
myChart.on("click", (params) => {
console.log(params, "params", params.data.name);
});
// myChart.dispatchAction({
// type: 'highlight', // 高亮指定的数据图形
// seriesIndex: 0,
// dataIndex: 0
// })
window.addEventListener("resize", function () {
myChart.resize();
});
},
},
components: {},
};
</script>
<style lang="scss" scoped>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.home-center-wrapper {
width: 100%;
height: 100vh;
background: url("./imgs/bg.png") no-repeat;
background-size: 100% 100%;
#map {
position: absolute;
z-index: 2;
}
.check {
position: absolute;
bottom: 4%;
right: 40%;
z-index: 3;
background: url("./imgs/check2.png") no-repeat;
width: 74px;
height: 54px;
background-size: 100% 100%;
font-size: 12px;
color: #fff;
text-align: center;
li {
line-height: 26px;
cursor: pointer;
}
li:first-child {
i {
background: url("./imgs/icon1.png") no-repeat;
width: 11px;
height: 10px;
background-size: 100% 100%;
display: inline-block;
margin-right: 5px;
}
}
li:last-child {
i {
background: url("./imgs/icon2.png") no-repeat;
width: 12px;
height: 12px;
background-size: 100% 100%;
display: inline-block;
margin-right: 5px;
}
}
}
.check2 {
background: url("./imgs/check.png") no-repeat;
width: 74px;
height: 54px;
background-size: 100% 100%;
}
}
</style>
山东省地图json数据
https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json
BJData 发射线
const BJData = [
[
{name: "德州市"},{ name: '枣庄市'}
],
[
{ name: "烟台市"},{name: '德州市'}
],
[
{ name: "莱芜市" }, {name: '日照市'}
],
[
{ name: "青岛市" }, { name: '济南市'}
],
[
{ name: "菏泽市" }, { name: '威海市' }
]]
export default BJData
geoCoordMap
const geoCoordMap = { // 地图地点的经度纬度
'菏泽市': [115.6201, 35.2057],
"临沂市": [118.3118, 35.2936],
"聊城市": [115.9167, 36.4032],
"威海市": [121.9482, 37.1393],
"日照市": [119.2786, 35.5023],
"滨州市": [117.8174, 37.4963],
"德州市": [116.6858, 37.2107],
"济南市": [117.1582, 36.8701],
"青岛市": [120.4651, 36.3373],
"淄博市": [118.0371, 36.6064],
"枣庄市": [117.323, 34.8926],
"东营市": [118.7073, 37.5513],
"烟台市": [120.7397, 37.5128],
"潍坊市": [119.0918, 36.524],
"济宁市": [116.8286, 35.3375],
"泰安市": [117.0264, 36.0516]
}
export default geoCoordMap
