当前位置：首页 > news >正文

charts3D地球--添加航线

news 2025/8/5 14:03:33

要在地球视角下画出海运路线图

方案

添加 globl 地球
创建geo地理坐标系
创建canvas对象用于承载地图世界地图this.worldChart

//初始化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);

设置globl 的baseTexture为this.worldChart
添加lines3D飞线效果

上组件源码

<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,},// convertDatadata: 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", //globezlevel: 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>