javascript
复制代码
<template>
<div>
<div id="box" @click="showAll"></div>
</div>
</template>
<script>
import geoJson from "./mapJson.js";
import { nameMap, startPoint, changKu, chuan, gongChang } from "./data.js";
import { points, line } from "./lines.js";
export default {
data() {
return {
worldChart: null,
// map贴图配置
worldChartOption: {
backgroundColor: "rgba(3,28,72,1)",
// backgroundColor: "transparent",
geo: {
type: "map",
map: "world",
nameMap: nameMap,
left: 0,
top: 0,
right: 0,
bottom: 0,
boundingCoords: [
[-180, 90],
[180, -90],
],
zoom: 0,
roam: true,
itemStyle: {
areaColor: "#174f87", //地图区域的颜色
color: "#fff", //图形的颜色
borderColor: "#2578cb",
opacity: 0.9,
},
emphasis: {
//高亮状态下的多边形和标签样式
itemStyle: {
areaColor: "#31deff",
color: "#174f87",
borderColor: "#318ED2",
borderWidth: 2,
shadowColor: "#15629A",
shadowBlur: 1,
shadowOffsetX: 3,
shadowOffsetY: 5,
},
},
label: {
fontSize: 28,
},
},
series: [],
},
globleChart: null,
// 地球配置
globleChartOption: {
globe: {
show: true,
globeRadius: 120,
globeOuterRadius: 150,
// baseTexture: require("./assets/earth.jpg"),
// environment: require("@/assets/img/bg.png"),
environment: require("./assets/starfield.jpg"),
shading: "lambert",
zlevel: 10,
light: {
ambient: {
// 设置环境光
intensity: 1,
},
main: {
// 设置主光源
intensity: 1.6,
shadow: false, // 开启阴影
},
},
atmosphere: {
show: true,
offset: 6,
color: "rgba(61,149,248,0.6)",
glowPower: 5,
innerGlowPower: 8,
},
viewControl: {
distance: 240,
autoRotate: true,
// 开启球体自旋转
// 设置地球的自转速度: 单位为 度/秒，默认值为10，也就是36秒转一圈！
autoRotateSpeed: 5,
// 在鼠标停止操纵后，球体恢复自转的事件
autoRotateAfterStill: 5,
},
},
series: [],
},
};
},
mounted() {
this.initData();
},
methods: {
// 绘制图表
initData() {
//初始化canvas节点
let cav = document.createElement("canvas");
this.$echarts.registerMap("world", geoJson);
this.worldChart = this.$echarts.init(cav, null, {
width: 4096,
height: 2048,
});
this.worldChart.setOption(this.worldChartOption);
this.globleChart = this.$echarts.init(document.getElementById("box"));
// // 指定图标的配置项和数据
this.globleChartOption.globe.baseTexture = this.worldChart;
this.globleChart.setOption(this.globleChartOption, true);
// 初始化点和路线
this.addLines(line);
this.addPoint(points);
this.worldChart.on("click", (params) => {
console.log(params);
});
this.globleChart.on("click", (params) => {
console.log(params);
});
},
// 添加路线
addLines(list) {
// 路线
// 获取飞线两端点
let flyLineList = [];
list.forEach((li) => {
for (let index = 0; index < li.coords.length - 1; index++) {
flyLineList.push({
coords: [li.coords[index], li.coords[index + 1]],
// 数据值
value: "",
});
}
});
const luxian = {
type: "lines",
// type: "lines3D",
id: "line",
coordinateSystem: "geo",
// coordinateSystem: "globe",
blendMode: "lighter",
polyline: true,
zlevel: 10,
effect: {
show: true,
period: 4, //速度
trailLength: 0.2, //尾部阴影
},
lineStyle: {
//航线的视图效果
color: "#CCA343",
width: 4,
curveness: 0.5,
opacity: 0.4,
},
// convertData
data: list,
// data: flyLineList,
};
// 路线上的点
let startPoint = []; // 取第一个点作为仓库
let endPoint = []; // 取最后一个作为起工厂
let chuanPoint = []; // 取中间点作为轮船
list.forEach((el) => {
el.coords.forEach((em, i) => {
if (i === 0) {
const haveSamePoint = startPoint.find(
(item) => item && item.name == el.name.split("-")[0]
);
if (!haveSamePoint) {
startPoint.push({
name: el.name.split("-")[0],
value: em,
symbolSize: 30,
symbol: changKu,
});
}
} else if (i === el.coords.length - 1) {
const haveSamePointEnd = endPoint.find(
(item) => item && item.name == el.name.split("-")[1]
);
if (!haveSamePointEnd) {
endPoint.push({
name: el.name.split("-")[1],
value: em,
symbolSize: 30,
symbol: gongChang,
});
}
} else {
chuanPoint.push({
name: "",
value: em,
symbolSize: 60,
symbol: chuan,
});
}
});
});
const linePoint = {
// type: "scatter3D",
// type: "effectScatter",
type: "scatter",
id: "onlinePoint",
coordinateSystem: "geo",
zlevel: 16,
rippleEffect: {
brushType: "stroke",
},
label: {
fontSize: 16,
show: true,
position: "right",
formatter: "{b}",
},
itemStyle: {
normal: {
color: "#f5f802",
},
},
data: [...startPoint, ...endPoint, ...chuanPoint],
};
console.log([...startPoint, ...endPoint, ...chuanPoint], 787);
// this.updataGlobleSerise("line", luxian);
this.updataSerise("line", luxian);
this.updataSerise("onlinePoint", linePoint);
setTimeout(() => {
this.updataChart();
}, 10);
},
// 添加标点
addPoint(list) {
const areaPion = {
type: "effectScatter",
// type: "scatter3D",
// type: 'scatter',
id: "areaPoint",
coordinateSystem: "geo", //globe
zlevel: 11,
symbol: startPoint,
rippleEffect: {
brushType: "stroke",
},
label: {
fontSize: 18,
show: true,
position: "right",
formatter: "{b}",
},
itemStyle: {
normal: {
color: "#f5f802",
},
},
data: list,
};
this.updataSerise("areaPoint", areaPion);
// this.updataGlobleSerise("areaPoint", areaPion);
setTimeout(() => {
this.updataChart();
this.changeView();
}, 10);
},
updataGlobleSerise(id, item) {
let ind = this.globleChartOption.series.findIndex((el) => el.id === id);
if (ind > -1) {
this.globleChartOption.series[ind] = item;
} else {
this.globleChartOption.series.push(item);
}
},
updataSerise(id, item) {
let ind = this.worldChartOption.series.findIndex((el) => el.id === id);
if (ind > -1) {
this.worldChartOption.series[ind] = item;
} else {
this.worldChartOption.series.push(item);
}
},
// 更新
updataChart() {
this.worldChart.setOption(this.worldChartOption);
this.globleChart.setOption(this.globleChartOption, true);
},
showAll() {
this.$emit("no-act");
},
// 切换视角依据国家名称
changeViewByCountry(country) {
const targ = points.find((el) => el.name == country);
if (targ) {
this.changeView(targ.value);
}
},
// 切换视角
changeView(point) {
// 定位到北京
let coord = point || [116.46, 39.92];
this.globleChartOption.globe.viewControl.targetCoord = coord;
this.globleChart.setOption(this.globleChartOption);
},
resize() {
this.worldChart.resize();
this.globleChart.resize();
},
},
watch: {},
created() {},
};
</script>
<style scoped>
#box {
width: 100vw;
height: 100vh;
}
.tootipbox {
position: fixed;
left: 50%;
top: 500%;
z-index: 9999;
background-image: url("../../../../assets/img/screen6/label_bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 200px;
height: 125px;
background-position: center center;
padding: 10px 20px;
font-size: 10px;
}
</style>
