echarts 地图点位过密

### ECharts 地图点位过密问题的解决方案

#### 使用热力图替代散点图
当数据点过于密集时，可以考虑使用热力图来代替传统的散点图。热力图可以通过颜色深浅表示不同区域内的数据密度或数值大小，从而有效缓解视觉上的拥挤感。

option = {
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo'
    }]
};

这种方法不仅美观大方，还能让用户更直观地理解各个区域内数据分布的特点[^1]。

#### 数据聚合与抽样
对于大量离散型地理位置标记，在前端渲染之前先做一次服务器端的数据预处理工作——即按照一定规则（比如经纬度范围划分网格）对原始坐标集合实施聚类操作；或者随机抽取部分样本代表整个群体特征进行显示。这样既减少了客户端计算压力又改善了用户体验效果。

// 假设data为原始地理坐标数组
function aggregateData(data, gridSize){
    let aggregatedPoints = {};
    
    data.forEach(point => {
        const key = `${Math.floor(point[0]/gridSize)},${Math.floor(point[1]/gridSize)}`;
        
        if(!aggregatedPoints[key]){
            aggregatedPoints[key] = {count: 0, lngLat:[point]};
        }else{
            aggregatedPoints[key].lngLat.push(point);
        }
        aggregatedPoints[key].count++;
    });

    return Object.values(aggregatedPoints).map(item=>({
        name:`Cluster(${item.lngLat.length})`,
        value:item.lngLat.reduce((sum,[lng,lat])=>{
            sum[0]+=lng;
            sum[1]+=lat;
            return sum;
        },[0,0]).map(v=>v/item.lngLat.length),
        count:item.count
    }));
}

此函数接收两个参数：一个是待处理的位置列表`data`，另一个是指定用于分组依据的空间分辨率`gridSize`。它返回一个新的对象数组，其中每个元素都包含了平均位置以及该簇内所含有的实际记录数量的信息[^2]。

#### 调整标签布局策略
针对特定重要地点设置自定义样式的同时调整其余次要节点的文字方向、字体大小等属性以达到更好的区分度；还可以利用Echarts提供的labelLayout回调机制动态改变文字偏移量，防止相互遮挡现象的发生。

series : [
    {
        ...
        label:{
           show:true,
           formatter:function(params){
               // 自定义格式化器逻辑...
           },
           position:'right',// 或者其他方位
           offset:[5,-5],   // 文字相对于图形中心坐标的相对位移
           distance:8       // 标签距离主体的距离，默认单位px
        },
        emphasis:{          // 高亮状态下应用不同的配置项
            label:{
                fontSize:16,
                fontWeight:'bold'
            }
        },
        labelLayout:function(params){
            var dx=0,dy=0;

            switch (params.seriesIndex % 4){ 
                case 0:dx=-7;break;case 1:dy=-7;break;
                case 2:dx=7 ;break;default: dy=7 ;
            }

            return {dx:dx , dy:dy };
        }
     }
 ]

这段代码展示了如何通过修改系列下的`label`选项来自定义文本外观，并借助于`labelLayout`钩子进一步微调其具体摆放方式，确保即使是在高密度场景下也能保持良好的可读性和清晰度[^3]。