自定义地图中，散点数据定期更新，防止地图缩放/平移造成的整体滞后和平移

Question

我正在使用ecahrt对室内巡航车进行实时位置监控。我在后台生成汽车行驶路线图的geojson数据格式。当页面加载时，地图被加载并绘制地图。然后使用定时任务获取车辆的位置信息，并更新车辆在地图上的位置信息。

现在就出现这样的问题。地图缩放/平移后，由于获取的是车辆的坐标信息，并没有响应地图缩放/平移，所以地图缩放/平移操作后，整个效果会造成卡顿，或者地图自动平移.

function initChart() {
var chartDom = document.getElementById('geoMap')! as HTMLDivElement; var myChart = echarts.init(chartDom);
axios.get('./static/5f.json').then((res) => {
    echarts.registerMap('5f', res.data);
    myChart.setOption({
        geo: {
            center: [174906, 180284],
            zoom: 1.2,
            map: '5f',
            roam: true,
            silent: true,
            smooth: true,
            itemStyle: {
                areaColor: 'transparent',
                color: 'transparent',
                borderWidth: 1
            },

        },
        series: [
            {
                name: 'V53',
                type: 'scatter',
                coordinateSystem: 'geo',
                geoIndex: 0,
                roam: true,
                animation: true,
                animationDurationUpdate: 0,
                dimensions: ['x', 'y', 'name'],
                data: [{ value: [130337, 283487], name: 'V53' }],
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{b}'
                },
                symbolSize: [8, 20],
                symbolRotate: 90,
                symbol: 'circle',
                zlevel: 100
            },
        ],
        roam: true // 允许前端漫游
    } as EChartsOption)


    timer.value = window.setInterval(() => {
       
        myChart.setOption({
            series: {
                name: 'V53',
                data: [{ value: [130337, 283487], name: 'V53' }],
            }
        }); 
    }, 1000);

})
}

这个问题有什么好的解决办法吗？

Answer 1

延迟通常是由动画引起的，因此您可以尝试禁用这些：

animation: false

。

对于

dataZoom

，有

filterMode

属性，它允许在数据更改时禁用窗口的更改。地理漫游可能有类似的东西。

作为最后一个选择，您可以尝试使用

georaom

事件。