echarts 地球仪根据坐标定位

ECharts是一个强大的JavaScript数据可视化库，它提供了丰富的图表选项，包括地图。如果你想在ECharts中创建地球仪，并根据特定的经纬度坐标显示点，你可以使用它的`echarts-gl`扩展模块，它支持三维地图效果。

首先，你需要引入`echarts-gl`插件，并在配置项中设置如下：

import * as ECharts from 'echarts';
import 'echarts-gl';

// 初始化地图实例
const myChart = echarts.init(document.getElementById('container'));

// 使用gl模式
myChart.setOption({
    visualMap: {
        type: 'piecewiseFunction',
        pieces: [
            {min: -180, max: -45, color: '#fde0dd'},
            {min: -45, max: 45, color: '#fa9897'},
            {min: 45, max: 180, color: '#e06666'}
        ]
    },
    geo: {
        type: 'sphere',
        // 设置投影样式
        projection: {
            type: 'mercator'
        },
        // 根据经纬度坐标添加点
        regions: [{
            name: 'Earth',
            tooltip: {
                show: false,
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: 'transparent', // 地图颜色透明
                    silhouette: {
                        color: 'white' // 地球轮廓色
                    }
                },
                emphasis: {
                    areaColor: 'rgba(255, 255, 255, 0.2)' // 突出区域半透明
                }
            },
            data: [{name: 'point', coordinates: [经度, 纬度]}] // 替换为实际经纬度值
        }]
    }
});

在这个例子中，`coordinates`属性应替换为你想要定位的具体经纬度值，比如`[120.123, 30.456]`。这样，地球仪会根据这些坐标位置上显示标记。