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

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

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

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,
                     //......
                },
	]
  })