echarts gl geo3D，船的位置调整

ECharts GL 是 ECharts 的 3D 版本，它扩展了 ECharts 基于 WebGL 的可视化能力，特别适用于地理空间数据和复杂3D场景的展示。Geo3D 是 ECharts GL 中用于创建3D地球地图的部分，它可以展示地理位置、城市、地形等地理信息，并且支持船只等3D元素的动态位置调整。

在使用 ECharts GL 的 Geo3D 地图上，你可以通过以下几个步骤调整船只的位置：

1. **初始化图表**: 首先，你需要在 ECharts GL 中初始化一个 Geo3D 实例，并配置好地图数据和基本样式。

const myChart = echarts.init(document.getElementById('container'), 'echarts-gl');
myChart.setOption({
    geo3D: {
        map: 'world',
        // ...其他配置
    },
});

2. **创建船只模型**: 在 `geo3D` 选项中，可以添加一个 `model` 属性来定义船只的 3D 模型，例如使用 `BoxModel` 或 `SphereModel`。

geo3D: {
    ...
    models: [{
        type: 'BoxModel',
        position: [lon, lat, 0], // lon 和 lat 是船只在地球表面的经纬度坐标
        size: [sizeX, sizeY, sizeZ],
        material: {
            color: 'blue', // 船只颜色
        },
    }],
}

3. **动态更新位置**: 如果你想实时或定时改变船只的位置，可以通过 JavaScript 更新 `position` 属性。例如，每过一段时间更新一次：

function moveBoat() {
    const newLonLat = calculateNewBoatPosition(); // 你可能需要自定义计算新的经纬度
    myChart.setOption({
        geo3D: {
            models: [{
                position: newLonLat,
            }],
        },
    });
    // 定时器，例如每隔 5 秒执行一次
    setTimeout(moveBoat, 5000);
}

moveBoat();