1.预期效果

参考官方例子：官方例子

旧版本官网案例不能打开，请点击案例最新地址

注意事项(如果需要展示以中国为中心的世界地图，需要重新引入word脚本)：

1.需要重新引入word.js 文件

word文件获取途径一：点击官方例子 ---> 点击脚本按钮 ---> 点击第二个脚本下载

如图：

word文件获取途径二：地图脚本

实现代码：

/* eslint-disable */
<template><div class="container"><div id="earth_map_3D"></div></div>
</template>
<script>
import echarts from 'echarts'
import 'echarts-gl'
export const geoCoord = {某海关: [116.2, 39.55],阿富汗: [69.11, 34.28],阿尔巴尼亚: [19.49, 41.18],阿尔及利亚: [3.08, 36.42],美属萨摩亚: [189.57, -14.16],"安道尔": [1.32, 42.31],安哥拉: [13.15, -8.5],安提瓜和巴布达: [298.52, 17.2],阿根廷: [300, -36.3],亚美尼亚: [44.31, 40.1],阿鲁巴: [289.98, 12.32],澳大利亚: [149.08, -35.15],奥地利: [16.22, 48.12],阿塞拜疆: [49.56, 40.29],巴哈马: [282.8, 25.05],巴林: [50.3, 26.1],孟加拉: [90.26, 23.43],巴巴多斯: [300.7, 13.05],白俄罗斯: [27.3, 53.52],比利时: [4.21, 50.51],伯利兹: [271.7, 17.18],贝宁: [2.42, 6.23],不丹: [89.45, 27.31],玻利维亚: [291.9, -16.2],波斯尼亚和黑塞哥维那: [18.26, 43.52],博茨瓦纳: [25.57, -24.45],巴西: [312.45, -15.47],英属维尔京群岛: [295.63, 18.27],文莱: [115, 4.52],保加利亚: [23.2, 42.45],布基纳法索: [-1.3, 12.15],布隆迪: [29.18, -3.16],柬埔寨: [104.55, 11.33],喀麦隆: [11.35, 3.5],加拿大: [246.276507, 61.129539],佛得角: [-23.34, 15.02],开曼群岛: [278.76, 19.2],中非共和国: [18.35, 4.23],乍得: [14.59, 12.1],智利: [289.6, -33.24],中国: [116.2, 39.55],哥伦比亚: [286, 4.34],科摩罗: [43.16, -11.4],刚果: [15.12, -4.09],哥斯达黎加: [275.98, 9.55],科特迪瓦: [-5.17, 6.49],克罗地亚: [15.58, 45.5],古巴: [277.78, 23.08],塞浦路斯: [33.25, 35.1],捷克共和国: [14.22, 50.05],朝鲜: [125.3, 39.09],"刚果(扎伊尔)": [15.15, -4.2],丹麦: [12.34, 55.41],吉布提: [42.2, 11.08],多米尼加: [298.76, 15.2],多米尼加共和国: [290.41, 18.3],东帝汶: [125.34, -8.29],厄瓜多尔: [281.65, -0.15],埃及: [31.14, 30.01],萨尔瓦多: [270.9, 13.4],赤道几内亚: [8.5, 3.45],厄立特里亚: [38.55, 15.19],爱沙尼亚: [24.48, 59.22],埃塞俄比亚: [38.42, 9.02],"福克兰群岛(马尔维纳斯群岛)": [300.49, -51.4],法罗群岛: [-6.56, 62.05],斐济: [178.3, -18.06],芬兰: [25.03, 60.15],法国: [2.2, 48.5],法属圭亚那: [307.82, 5.05],法属波利尼西亚: [210.66, -17.32],加蓬: [9.26, 0.25],冈比亚: [-16.4, 13.28],格鲁吉亚: [44.5, 41.43],德国: [13.25, 52.3],加纳: [-0.06, 5.35],希腊: [23.46, 37.58],格陵兰: [308.65, 64.1],瓜德罗普岛: [298.56, 16],危地马拉: [269.78, 14.4],根西岛: [-2.33, 49.26],几内亚: [-13.49, 9.29],几内亚比绍: [-15.45, 11.45],圭亚那: [301.88, 6.5],海地: [287.8, 18.4],赫德岛和麦当劳群岛: [74, -53],洪都拉斯: [272.86, 14.05],匈牙利: [19.05, 47.29],冰岛: [-21.57, 64.1],印度: [77.13, 28.37],印度尼西亚: [106.49, -6.09],伊朗: [51.3, 35.44],伊拉克: [44.3, 33.2],爱尔兰: [-6.15, 53.21],以色列: [35.12, 31.47],意大利: [12.29, 41.54],牙买加: [283.5, 18],约旦: [35.52, 31.57],哈萨克斯坦: [71.3, 51.1],肯尼亚: [36.48, -1.17],基里巴斯: [173, 1.3],科威特: [48, 29.3],吉尔吉斯斯坦: [74.46, 42.54],老挝: [102.36, 17.58],拉脱维亚: [24.08, 56.53],黎巴嫩: [35.31, 33.53],莱索托: [27.3, -29.18],利比里亚: [-10.47, 6.18],阿拉伯利比亚民众国: [13.07, 32.49],列支敦士登: [9.31, 47.08],立陶宛: [25.19, 54.38],卢森堡: [6.09, 49.37],马达加斯加: [47.31, -18.55],马拉维: [33.48, -14],马来西亚: [101.41, 3.09],马尔代夫: [73.28, 4],马里: [-7.55, 12.34],马耳他: [14.31, 35.54],马提尼克岛: [298.98, 14.36],毛里塔尼亚: [57.3, -20.1],马约特岛: [45.14, -12.48],墨西哥: [260.9, 19.2],"密克罗尼西亚(联邦) ": [158.09, 6.55],摩尔多瓦共和国: [28.5, 47.02],莫桑比克: [32.32, -25.58],缅甸: [96.2, 16.45],纳米比亚: [17.04, -22.35],尼泊尔: [85.2, 27.45],荷兰: [4.54, 52.23],荷属安的列斯: [291, 12.05],新喀里多尼亚: [166.3, -22.17],新西兰: [174.46, -41.19],尼加拉瓜: [273.8, 12.06],尼日尔: [2.06, 13.27],尼日利亚: [7.32, 9.05],诺福克岛: [168.43, -45.2],北马里亚纳群岛: [145.45, 15.12],挪威: [10.45, 59.55],阿曼: [58.36, 23.37],巴基斯坦: [73.1, 33.4],帕劳: [134.28, 7.2],巴拿马: [280.75, 9],巴布亚新几内亚: [147.08, -9.24],巴拉圭: [302.7, -25.1],秘鲁: [283, -12],菲律宾: [121.03, 14.4],波兰: [21, 52.13],葡萄牙: [-9.1, 38.42],波多黎各: [293.93, 18.28],卡塔尔: [51.35, 25.15],韩国: [126.58, 37.31],罗马尼亚: [26.1, 44.27],俄罗斯: [37.35, 55.45],卢旺达: [30.04, -1.59],圣基茨和尼维斯: [297.57, 17.17],圣卢西亚: [299.42, 14.02],圣皮埃尔和密克隆: [303.88, 46.46],圣文森特和格林纳丁斯: [298.9, 13.1],萨摩亚: [188.5, -13.5],圣马力诺: [12.3, 43.55],圣多美和普林西比: [6.39, 0.1],沙特阿拉伯: [46.42, 24.41],塞内加尔: [-17.29, 14.34],塞拉利昂: [-13.17, 8.3],斯洛伐克: [17.07, 48.1],斯洛文尼亚: [14.33, 46.04],所罗门群岛: [159.57, -9.27],索马里: [45.25, 2.02],比勒陀利亚: [28.12, -25.44],西班牙: [-3.45, 40.25],苏丹: [32.35, 15.31],苏里南: [304.9, 5.5],斯威士兰: [31.06, -26.18],瑞典: [18.03, 59.2],瑞士: [7.28, 46.57],阿拉伯叙利亚共和国: [36.18, 33.3],塔吉克斯坦: [68.48, 38.33],泰国: [100.35, 13.45],马其顿: [21.26, 42.01],多哥: [1.2, 6.09],汤加: [186, -21.1],突尼斯: [10.11, 36.5],土耳其: [32.54, 39.57],土库曼斯坦: [57.5, 38],图瓦卢: [179.13, -8.31],乌干达: [32.3, 0.2],乌克兰: [30.28, 50.3],阿联酋: [54.22, 24.28],英国: [-0.05, 51.36],坦桑尼亚: [35.45, -6.08],美国: [260.994344, 37.574408],美属维尔京群岛: [295.44, 18.21],乌拉圭: [303.89, -34.5],乌兹别克斯坦: [69.1, 41.2],瓦努阿图: [168.18, -17.45],委内瑞拉: [293.45, 10.3],越南: [105.55, 21.05],南斯拉夫: [20.37, 44.5],赞比亚: [28.16, -15.28],津巴布韦: [31.02, -17.43],中国香港: [114.109497, 22.421185],新加坡: [103.798828, 1.428075],日本: [139.746094, 35.960223],中国台湾: [121.442871, 25.105497],斯里兰卡: [80.700073, 7.89603],中非: [20.895996, 6.184246],中国澳门: [113.506622, 22.159427],南非: [26.125488, -29.094577],毛里求斯: [57.528534, -20.280232],特立尼达和多巴哥: [298.740234, 10.682201],"刚果（布）": [23.752441, -1.823423],摩洛哥: [-7.090988, 31.791221],也门: [47.285156, 15.707663],马绍尔群岛: [171.184158, 7.133938],"刚果（金）": [23.752441, -1.823423],捷克: [14.545898, 50.099441],叙利亚: [37.023926, 35.038992],荷属圣马丁岛: [296.94942, 18.07088],蒙古: [107.050781, 47.960502],塞舌尔: [55.489197, -4.679086],巴勒斯坦: [35.230408, 31.963814],塞尔维亚共和国: [20.983887, 44.048116],黑山共和国: [19.297485, 42.674359],摩尔多瓦: [28.421631, 47.428087]
}
export default {name: `earthMap3D_`,mounted () {require(`./word`)this.initCharts()},methods: {initCharts () {const data = this.getLinkData()echarts.init(document.getElementById(`earth_map_3D`)).dispose()const myChart = echarts.init(document.getElementById(`earth_map_3D`))window.onresize = function () {myChart.resize()}myChart.setOption({backgroundColor: `rgba(0,0,0,0)`,geo3D: {show: false,map: `world`,viewControl: {autoRotate: false,distance: 70, //地图大小   值越大-地图越小，值越小-地图越大alpha: 90, //垂直翻转角度beta: 0,autoRotateDirection: `cw`,damping: 0.8}},// visualMap: [//   {//     show: true,//     seriesIndex: 0,//     dimension: 0,//     right: 10,//     bottom: 0,//     zlevel: 10,//     calculable: true,//     min: 0,//     max: 100,//     inRange: {//       color: [`#73dbf9`, `#4aadf2`, `#3e99ee`, `#4a70d2`, `#4c4cd5`, `#0d1474`]//     },//     textStyle: {//       color: `#fff`,//       fontSize: 12//     }//   }// ],tooltip: {show: true,trigger: `item`,formatter: function (params) {const data = params.valuelet str = `<b style="font-size:18px;">入境</b><br />国家: <b style="font-size:16px;color:#f4b766;">` + params.nameif (data && data.length === 3) {str = str +`</b><br /> 批次: ` + data[0] +` (批次)<br /> 货值: ` + data[1] +` (万美元)` + `<br />业务量排名: <b style="font-size:14px;color:red;">` + data[2] + `</b> 名`}return str},textStyle: {colol: `#FFFFFF`},axisPointer: {type: `shadow`}},series: [{type: `map3D`,map: `world`,height: `auto`,zlevel: 2,boxWidth: `auto`,boxHeight: `auto`,boxDepth: `auto`,regionHeight: 3,environment: `auto`,top: `0`,instancing: false, //instancing会将 GeoJSON 中所有的 geometry 合并成一个，在 GeoJSON 拥有特别多（上千）的 geometry 时可以有效提升绘制效率。viewControl: {autoRotate: false,distance: 70, //地图大小   值越大-地图越小，值越小-地图越大alpha: 90, //垂直翻转角度beta: 0},itemStyle: {normal: {areaColor: `rgba(100, 149, 237, 1)`,borderColor: `#10119b`,borderWidth: 1},emphasis: {areaColor: `#10359b`}},emphasis: { //当鼠标放上去  地区区域是否显示名称label: {show: true,textStyle: {color: `red`,fontSize: 20,backgroundColor: `rgba(0,23,11,0)`}},itemStyle: {areaColor: `#e3c854`,opacity: 1}},light: { //光照阴影main: {color: `#fff`, //光照颜色intensity: 1, //光照强度shadowQuality: `high`, //阴影亮度shadow: false, //是否显示阴影alpha: 55,beta: 10},ambient: {intensity: 0.22}},data: data.all},{type: `lines3D`,name: `出入境`,polyline: true,coordinateSystem: `geo3D`,zlevel: 5,silent: false, //开启鼠标触发事件,然并卵effect: {show: true,period: 2,trailWidth: 2,trailLength: 0.5,trailOpacity: 0.8,trailColor: `#fff`},lineStyle: {normal: {color: function (params) {return `${params.data.toName === `某海关` ? `rgba(255, 192, 203, 0.1)` : `rgba(0, 255, 255, 0.1)`}`},width: 1,opacity: 1}},data: data.link},{type: `scatter3D`,blendMode: `lighter`,coordinateSystem: `geo3D`,showEffectOn: `render`,zlevel: 5,symbol: `circle`,symbolSize: 10,opacity: 1,hoverAnimation: true,itemStyle: {normal: {color: `#ffa022`,opacity: 0.8}},data: data.point}]})myChart.on(`click`, (params) => {this.$emit(`onEarthCallback`, `logisticsMap`)})},getLinkData () {const all = []const linkData = []const linkInData = []const pointData = []for (const key in geoCoord) {if (linkData.length < 10) {linkData.push({fromName: `某海关`,toName: key,coords: [[116.2, 39.55], geoCoord[key]],value: !((Math.floor(Math.random() * 1)))})} else if (linkInData.length < 5) {linkInData.push({fromName: key,toName: `某海关`,coords: [geoCoord[key], [116.2, 39.55]],value: !((Math.floor(Math.random() * 1)))})}if (pointData.length < 15) {pointData.push({name: key,value: geoCoord[key]})}all.push({name: key,value: [Math.floor(Math.random() * 90) - 10,Math.floor(Math.random() * 90) - 10,Math.floor(Math.random() * 90) - 10]})}return {link: [...linkData, ...linkInData],point: pointData,all: all}}}
}
</script>
<style lang="scss" scoped>
.container{height: 100%;background: url("~@/assets/imgs/map3D.jpg") no-repeat;background-size: 100% 100%;#earth_map_3D{height: 90%;width: 100%;}
}
</style>

vue + echarts 实现以中国为中心的世界3D地图相关推荐

Echarts世界地图以中国为中心
世界地图常用的展示方式有两种,分别以太平洋和大西洋为中心,一个中国在右侧,一个中国在左侧偏中间, 目前使用Echarts绘制世界地图,出来的都是西半球地图,中国在右边, 想要实现世界地图以中国为中心, ...
【vue】vue + ECharts 实现中国地图
1.效果图: 2.实现步骤引入ECharts ECharts 官网地址:https://echarts.apache.org/zh/index.html npm install echarts -- ...
vue+echarts中国地图+省市级地图（全程教学，你也可以）
echarts+vue中国地图,点击进入省级地图 VUE+Echarts+省市地图钻取(简洁版,超详细) 以上两篇来自站内,是本文的主要参考来源. 首先上才艺首先需要引入 echarts 包 npm ...
vue+ echarts实现地图（中国地图）
** vue+ echarts实现地图(中国地图) ** <div class="myChartMap" id="myChartMap" >< ...
Echarts 空运图和海运图以中国为中心的地图中英文地图切换
前言: 图1是第一版本,又做出了整改,整改也会放在下面,对地图对航线对海运线等做出的一些调整. 简单的概述一下,并把中英文地图的坐标点,以及以中国为中心的json放在后 ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
Vue+Echarts实现中国地图+各省业务数据分布情况组件
Vue组件首先需要引入echarts包和中国地图数据, import echarts from 'echarts' import '../../../node_modules/echarts/map/ ...
vue使用echarts来绘制中国地图下钻省市区县级地图
文章目录前言一.echarts 二.使用步骤 1.vue安装.引入echarts 2.使用echarts 总结前言公司需要一个中国地图点击可进入省市区县级,但是在我使用echarts绘制中国地 ...
Vue+Echarts监控大屏实例五：呼叫中心监控模板实例
一.实例概述 1.1 实例说明本实例实现话务呼叫中心可视化大屏监控界面前端,包括综合监控.状态监控.通话监控.质量监控等.本实例实现对于监控界面的相关开发资料,提供实例源码.开发过程视频及实现过 ...
前端jq/vue echarts中国地图的实现
一.jquery项目实现echarts中国地图 1.引入相关资源文件 jquery.echarts 等 <script src="https://cdn.bootcdn.net/aja ...

vue + echarts 实现以中国为中心的世界3D地图

1.预期效果

vue + echarts 实现以中国为中心的世界3D地图相关推荐

最新文章

热门文章