echarts实现3D地球模式--3D线和标记mark

echarts实现3D地球模式–3D线和标记mark

效果

代码

<div id="container">

</div>

<script type="text/javascript" src="js/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts/echarts.min.js"></script>
<script type="text/javascript" src="js/echarts/echarts-gl.min.js"></script>
<script type="text/javascript" src="js/echarts/world.js"></script>

var nameMap = {
    'Singapore Rep.':'新加坡', 'Dominican Rep.':'多米尼加', 'Palestine':'巴勒斯坦', 'Bahamas':'巴哈马', 'Timor-Leste':'东帝汶',
    'Afghanistan':'阿富汗', 'Guinea-Bissau':'几内亚比绍', "Côte d'Ivoire":'科特迪瓦', 'Siachen Glacier':'锡亚琴冰川',
    "Br. Indian Ocean Ter.":'英属印度洋领土', 'Angola':'安哥拉', 'Albania':'阿尔巴尼亚', 'United Arab Emirates':'阿联酋', 'Argentina':'阿根廷',
    'Armenia':'亚美尼亚', 'French Southern and Antarctic Lands':'法属南半球和南极领地', 'Australia':'澳大利亚', 'Austria':'奥地利',
    'Azerbaijan':'阿塞拜疆', 'Burundi':'布隆迪', 'Belgium':'比利时', 'Benin':'贝宁', 'Burkina Faso':'布基纳法索', 'Bangladesh':'孟加拉国',
    'Bulgaria':'保加利亚', 'The Bahamas':'巴哈马', 'Bosnia and Herz.':'波斯尼亚和黑塞哥维那', 'Belarus':'白俄罗斯', 'Belize':'伯利兹',
    'Bermuda':'百慕大', 'Bolivia':'玻利维亚', 'Brazil':'巴西', 'Brunei':'文莱', 'Bhutan':'不丹', 'Botswana':'博茨瓦纳',
    'Central African Rep.':'中非', 'Canada':'加拿大', 'Switzerland':'瑞士', 'Chile':'智利', 'China':'中国', 'Ivory Coast':'象牙海岸',
    'Cameroon':'喀麦隆', 'Dem. Rep. Congo':'刚果民主共和国', 'Congo':'刚果', 'Colombia':'哥伦比亚', 'Costa Rica':'哥斯达黎加', 'Cuba':'古巴',
    'N. Cyprus':'北塞浦路斯', 'Cyprus':'塞浦路斯', 'Czech Rep.':'捷克', 'Germany':'德国', 'Djibouti':'吉布提', 'Denmark':'丹麦',
    'Algeria':'阿尔及利亚', 'Ecuador':'厄瓜多尔', 'Egypt':'埃及', 'Eritrea':'厄立特里亚', 'Spain':'西班牙', 'Estonia':'爱沙尼亚',
    'Ethiopia':'埃塞俄比亚', 'Finland':'芬兰', 'Fiji':'斐济', 'Falkland Islands':'福克兰群岛', 'France':'法国', 'Gabon':'加蓬',
    'United Kingdom':'英国', 'Georgia':'格鲁吉亚', 'Ghana':'加纳', 'Guinea':'几内亚', 'Gambia':'冈比亚', 'Guinea Bissau':'几内亚比绍',
    'Eq. Guinea':'赤道几内亚', 'Greece':'希腊', 'Greenland':'格陵兰', 'Guatemala':'危地马拉', 'French Guiana':'法属圭亚那', 'Guyana':'圭亚那',
    'Honduras':'洪都拉斯', 'Croatia':'克罗地亚', 'Haiti':'海地', 'Hungary':'匈牙利', 'Indonesia':'印度尼西亚', 'India':'印度',
    'Ireland':'爱尔兰', 'Iran':'伊朗', 'Iraq':'伊拉克', 'Iceland':'冰岛', 'Israel':'以色列', 'Italy':'意大利', 'Jamaica':'牙买加',
    'Jordan':'约旦', 'Japan':'日本', 'Kazakhstan':'哈萨克斯坦', 'Kenya':'肯尼亚', 'Kyrgyzstan':'吉尔吉斯斯坦', 'Cambodia':'柬埔寨',
    'Korea':'韩国', 'Kosovo':'科索沃', 'Kuwait':'科威特', 'Lao PDR':'老挝', 'Lebanon':'黎巴嫩', 'Liberia':'利比里亚', 'Libya':'利比亚',
    'Sri Lanka':'斯里兰卡', 'Lesotho':'莱索托', 'Lithuania':'立陶宛', 'Luxembourg':'卢森堡', 'Latvia':'拉脱维亚', 'Morocco':'摩洛哥',
    'Moldova':'摩尔多瓦', 'Madagascar':'马达加斯加', 'Mexico':'墨西哥', 'Macedonia':'马其顿', 'Mali':'马里', 'Myanmar':'缅甸',
    'Montenegro':'黑山', 'Mongolia':'蒙古', 'Mozambique':'莫桑比克', 'Mauritania':'毛里塔尼亚', 'Malawi':'马拉维', 'Malaysia':'马来西亚',
    'Namibia':'纳米比亚', 'New Caledonia':'新喀里多尼亚', 'Niger':'尼日尔', 'Nigeria':'尼日利亚', 'Nicaragua':'尼加拉瓜', 'Netherlands':'荷兰',
    'Norway':'挪威', 'Nepal':'尼泊尔', 'New Zealand':'新西兰', 'Oman':'阿曼', 'Pakistan':'巴基斯坦', 'Panama':'巴拿马', 'Peru':'秘鲁',
    'Philippines':'菲律宾', 'Papua New Guinea':'巴布亚新几内亚', 'Poland':'波兰', 'Puerto Rico':'波多黎各', 'Dem. Rep. Korea':'朝鲜',
    'Portugal':'葡萄牙', 'Paraguay':'巴拉圭', 'Qatar':'卡塔尔', 'Romania':'罗马尼亚', 'Russia':'俄罗斯', 'Rwanda':'卢旺达', 'W. Sahara':'西撒哈拉',
    'Saudi Arabia':'沙特阿拉伯', 'Sudan':'苏丹', 'S. Sudan':'南苏丹', 'Senegal':'塞内加尔', 'Solomon Is.':'所罗门群岛', 'Sierra Leone':'塞拉利昂',
    'El Salvador':'萨尔瓦多', 'Somaliland':'索马里兰', 'Somalia':'索马里', 'Serbia':'塞尔维亚', 'Suriname':'苏里南', 'Slovakia':'斯洛伐克',
    'Slovenia':'斯洛文尼亚', 'Sweden':'瑞典', 'Swaziland':'斯威士兰', 'Syria':'叙利亚', 'Chad':'乍得', 'Togo':'多哥', 'Thailand':'泰国',
    'Tajikistan':'塔吉克斯坦', 'Turkmenistan':'土库曼斯坦', 'East Timor':'东帝汶', 'Trinidad and Tobago':'特里尼达和多巴哥', 'Tunisia':'突尼斯',
    'Turkey':'土耳其', 'Tanzania':'坦桑尼亚', 'Uganda':'乌干达', 'Ukraine':'乌克兰', 'Uruguay':'乌拉圭', 'United States':'美国',
    'Uzbekistan':'乌兹别克斯坦', 'Venezuela':'委内瑞拉', 'Vietnam':'越南', 'Vanuatu':'瓦努阿图', 'West Bank':'西岸', 'Yemen':'也门',
    'South Africa':'南非', 'Zambia':'赞比亚', 'Zimbabwe':'津巴布韦',
    'Asia':'亚洲', 'Africa':'非洲', 'Europe':'欧洲', 'North America':'北美洲', 'South America':'南美洲', 'Oceania':'大洋洲'
};

function earth3D() {
        var canvas = document.createElement('canvas');
        var myChart = echarts.init(canvas, null, {
            width: 4096,
            height: 2048
        });

        /*
         图中相关城市经纬度,根据你的需求添加数据
         关于国家的经纬度，可以用首都的经纬度或者其他城市的经纬度
         */
        var geoCoordMap = {
            '南宁': [108.479, 23.1152],
            '广州': [113.5107, 23.2196],
            '重庆': [107.7539, 30.1904],
            '芬兰': [24.909912, 60.169095],
            '美国': [-100.696295, 33.679979],
            '日本': [139.710164, 35.706962],
            '韩国': [126.979208, 37.53875],
            '瑞士': [7.445147, 46.956241],
            '东南亚': [117.53244, 5.300343],
            '澳大利亚': [135.193845, -25.304039],
            '德国': [13.402393, 52.518569],
            '英国': [-0.126608, 51.208425],
            '加拿大': [-102.646409, 59.994255]
        };

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoordMap[dataItem[1].name];
                var toCoord = geoCoordMap[dataItem[0].name];
                if (fromCoord && toCoord) {
                    res.push([fromCoord, toCoord])
                }
            }
            console.log(res)
            return res;
        }

        var option = {
            backgroundColor: 'rgba(0,0,0,0)',//canvas的背景颜色
            globe: {
                /*baseTexture: 'images/earth3d/world.topo.bathy.200401.jpg',
                heightTexture: 'images/earth3d/bathymetry_bw_composite_4k.jpg',*/
                baseTexture: myChart,
                heightTexture: 'images/earth3d/bathymetry_bw_composite_4k.jpg',
                shading: 'lambert',
                light: {
                    ambient: {
                        intensity: 1
                    },
                    main: {
                        intensity: 1
                    }
                },
                top: 'middle',
                left: 'center',
                displacementScale: 0,
                environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0, color: '#00aaff' // 天空颜色
                }, {
                    offset: 0.7, color: '#998866' // 地面颜色
                }, {
                    offset: 1, color: '#998866' // 地面颜色
                }], false),
                viewControl: {
                    distance: 240,
                    autoRotate: true
                }
            },
            series: [
                {
                    type: 'lines3D',
                    effect: {
                        show: true,
                        period: 3,//速度
                        trailLength: 0.1//尾部阴影
                    },
                    lineStyle: {//航线的视图效果
                        color: '#9ae5fc',
                        width: 1,
                        opacity: 0.6
                    },
                    // convertData
                    data: [[[-102.646409, 59.994255], [108.479, 23.1152]], [[-100.696295, 33.679979], [108.479, 23.1152]]]
                }
            ]
        };
        myChart.setOption({
            backgroundColor: 'rgba(3,28,72,1)',
            geo: {
                type: 'map',
                map: 'world',
                nameMap: nameMap,
                left: 0,
                top: 0,
                right: 0,
                bottom: 0,
                boundingCoords: [[-180, 90], [180, -90]],
                zoom: 0,
                roam: false,
                itemStyle: {
                    borderColor: '#000d2d',
                    normal: {
                        areaColor: '#2455ad',
                        borderColor: '#000c2d'
                    },
                    emphasis: {
                        areaColor: '#357cf8'
                    }
                },
                label: {
                    fontSize: 24
                },
                regions: [{
                    name: '中国',
                    selected: true,
                    itemStyle: {
                        normal: {
                            borderColor: '#b2a471'
                        },
                    },
                }]
            },
            series: [
                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 3,
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    label: {
                        fontSize: 24,
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    },
                    itemStyle: {
                        normal: {
                            color: '#f5f802'
                        }
                    },
                    data: [
                        {name: '瑞士', value: [-102.646409, 59.994255], symbolSize: 20},
                        {name: '加拿大', value: [-100.696295, 33.679979], symbolSize: 20},
                        ]
                }, {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 3,
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'left',
                            fontSize: 18,
                            formatter: '{b}'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#ff0000'
                        }
                    },
                    data: [
                        {name: '南宁', value: [108.479, 23.1152], symbolSize: 20},
                    ]
                }
            ]
        });

        echarts.init(document.getElementById("container")).setOption(option, true);

		// 地图点击事件
		myChart.on('click', function (params) {
            let componentType = params.componentType;   // geo是地图图层
            let province = params.name;
            console.log(params);
            if (componentType == "geo") {
                console.log(province);
            }
        });

    }

几张用到的图片（也可以去echarts查看图片 https://www.echartsjs.com/examples/zh/editor.html?c=lines3d-airline-on-globe&gl=1）