Echarts显示自定义标注点/地图map引导线

男娘i 2022-11-06 00:58 1791阅读 0赞

#### Echarts显示自定义标注点/地图map引导线 ####

先贴效果。这里实现了  
1.地图上县区名的显示，鼠标移入显示相应的项目数（如下图东源县）  
[2.地图上增加自定义地图（这里增加了没有的高新区&市辖区&江东新区）][2.]  
3.较小的地区，改用lableline延长线显示地名+项目数，优化显示结果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phcWVuZW5lbg_size_16_color_FFFFFF_t_70]

1.地图上自定义标注点配置在series数组中，`{type: 'scatter'}`，数据基本格式为：

[ {name: 'xx县', value: [纬度,经度]}]

2.地图上延长线标注点配置在series数组中，`{type: 'lines'}`，数据基本格式为：

[ {name: 'xx县', coords: [[起点纬度,起点经度],[终点纬度,终点经度]],value}]

// 地图上标注点数据
    var mapItemCountArray1=[
        {name: '龙川县', value: [115.323481,24.39608,312]},
        //...
    ];
    
    //地图上显示延长线地区标注数据
    var mapItemCountArray2=[
        {name: '高新区', coords:[[114.665941, 23.624965],[114.35941, 23.50720]],value: 23 },
        {name: '', coords:[[114.65941, 23.704965],[114.35941, 23.50720]],value: 23 },
        {name: '市辖区', coords:  [[114.706347, 23.800092],[114.300347, 23.680002]],value: 233},
    ];
    
    var heyuanMap= echarts.init(document.getElementById('map_box'))
     echarts.registerMap('heyuan', data); //data来源于地区json文件
      heyuanMap.setOption({
       	legend:{},//地图地名显示配置
    	geo: {
              map: 'heyuan',	
              show: true,
    		//配置地图上地区对应的项目数，初始不显示，移入显示
     		   label:{
                        normal:{show: false},
                        emphasis: {
                            show: true,
                            backgroundColor:{
                                image: '../images/img_warning.jpg'
                            },
                            formatter: function (params) {
                                return mapItemCountArray1.map(item=>{
                                    return item.name==params.name?item.value[2]+'个':''
                                }).join("")
                            },
                        },
                    },
        },
        series: [
                    {
                        type: 'map',//渲染地图
                        coordinateSystem: 'geo',
                        zoom: 1.2,
                    },
                    //地图上地名显示。type: 'scatter',
                    {
                        name: '',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: mapItemCountArray1,
                        //......
                     }
                     //地图上的延长线标注点。type:'lines',
                    {
                        type:'lines',
                         data:mapItemCountArray2,
                         //......
                    },
    	]
      })

[2.]: https://blog.csdn.net/Zaqenenen/article/details/111051942
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phcWVuZW5lbg_size_16_color_FFFFFF_t_70]: /images/20221023/3736a2a1f09149e9a7380dd0106075aa.png