Echarts 实现map地图多个“label”弹框，

话不多说，看设计图就知道，需要实现地图打点，并且实时弹出警情信息弹框，看echarts API都知道地图打点很容易实现，问题是实现多个弹框，本来准备使用label加载动态dom标签实现，看API发现label的formatter并不支持html标签，当然，自带的rich也可以实现上图样式，但是关键label没法点击，于是就想使用toolip实现，然后发现toolip只能实现一个弹框，而且位置也没法准确定位到maker上。
经过上边的思考，我突发奇想，把地理坐标转换成屏幕坐标，再动态创建标签定位过去怎么样，事实证明，是可行，于是开始我们的搬砖之路。
多余的话就不说了，这里的重点主要是实现echarts地理坐标转换成屏幕坐标，这里的屏幕的坐标是从地图的父元素开始计算的。
经纬度坐标与屏幕坐标转换：

	convertMain(Lng,lat){
							let getModel = this.myChart.getModel().getSeries()[1];
							let seriesModel = this.myChart.getModel().getSeriesByIndex(0)
							let coordSys = seriesModel.coordinateSystem;
							let point = coordSys.dataToPoint([Lng, lat]);
							return point;
						},

顺便奉上个echarts屏幕自适应的函数：

FontSize(res) {
				let docEl = document.documentElement,
					clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
				if (!clientWidth) return;
				let fontSize = 100 * (clientWidth / 1920);
				return res * fontSize;
			
			},

使用方法：

this.option.series[0].label.normal.fontSize = this.FontSize(0.1);

这里传值需要除以100；字号是10就写

this.FontSize(0.1);

亲自测试这里的图表（适应所有图表，谁用谁知道）屏幕自适应兼容到800*600问题不大。
另外上述的设计弹框直接自己html写好就可以，然后通过获取的屏幕坐标相对父元素进行定位即可。

事实证明，位置对应还是相当准的。当然，如果各位道友有更好的方法，也可以一起分享一下。
发现这个博客问的人比较多，上述只是简单说明了下经纬度转换，可能有些朋友不知道弹框和地图怎么实现的，我把基本的代码也贴下吧，
弹框代码是直接用HTML写的，看下代码：

<div class="warningMap_model warningMap_model_user" v-for="(item,index) in warningList_logistics"
		 v-bind:style="{left:convertMain(item.value[0], item.value[1])[0]+'px',top:convertMain(item.value[0], item.value[1])[1]+'px'}">
		
			<div class="warningMap_model_button">
				<button @click="warningMapModelButton(1,item,item.display_type,item.delivery_person)">详情</button>
				<!-- <button @click="warningMapModelButton(2,item,item.display_type)">接警</button> -->
			</div>
		</div>

上边代码就是自己随便写个弹框，样式自己定义就可以，有用的不多，有用就是这句

v-bind:style="{left:convertMain(item.value[0], item.value[1])[0]+'px',top:convertMain(item.value[0], item.value[1])[1]+'px'}"

其中item.value[0]和item.value[1]就是传的经纬度，后面还有0就是获取的距离左边的距离，后面那个top里面的也是一样的就不多说了，convertMain这个函数最上边已经贴出来了。
然后那个地图我是用的2D的地图加了一个阴影，以防有想要的我也贴个代码吧，
echarts的options代码：

option: {
					geo: {
						map: "530000",
						// 调整3D移动模块
						show: true,
						aspectScale: 1.1,
						zoom: 1.15,
						scaleLimit: {
							min: 0.5,
							max: 2,
						},
						itemStyle: {
							normal: {
								borderColor: 'rgba(5,176,220,0.6)',
								borderWidth: 1,
								areaColor: 'rgb(2,30,104)',
								shadowColor: "rgba(16,195,254, 0.4)",
								shadowOffsetX: 1,
								shadowOffsetY: 4,
								shadowBlur: 1
				
							},
				
						}
						// 调整3D移动模块
					},
					series: [{
						type: "map",
						map: "530000",
						// 调整3D移动模块
						aspectScale: 1.1,
						zoom: 1.15,
						roam: false,
						scaleLimit: {
							min: 0.5,
							max: 2,
						},
						itemStyle: {
							normal: {
								borderColor: 'rgba(5,176,220,0.2)',
								borderWidth: 0.1,
								areaColor: 'rgb(2,30,104,0.92)',
								shadowColor: "rgba(16,195,254,0.6)",
								shadowOffsetX: 0,
								shadowOffsetY: 1,
								shadowBlur: 0
				
							},
							emphasis: {
								areaColor: "#308fcc",
								borderWidth: 0
							}
						},
						// 调整3D移动模块
						label: {
							rotate: 90,
							normal: {
								show: true,
								color: 'rgba(5, 176, 220, 1)',
								fontSize: 10, //此处字体需做兼容适配
				
								align: 'left',
								verticalAlign: 'middle',
								position: 'insideBottom',
								distance: 15,
							},
							emphasis: {
								show: true,
								color: '#ececec'
							}
						},
						showLegendSymbol: false
					}, {
						name: '警情点',
						type: 'effectScatter',
						
						data: [],
						coordinateSystem: 'geo',
						symbol: 'image://' + require('../../../assets/img/fk_map_d.png'),
						symbolSize: 15,
						zlevel: 1,
						rippleEffect: {
							period: 16,
							scale: 5.0,
							brushType: 'fill',
						},
						effectType: 'ripple',
						showEffectOn: 'render',
						rippleEffect: {
							brushType: 'stroke'
						},
						animation: true,
						
					}]
				},

然后就是绘制图表了

warningMapMain(code) {
				let that = this;
				this.myChart = this.$echarts.init(document.getElementById('warningMap'));
				this.province = require('../../../assets/province/' + code + '.json');
				this.$echarts.registerMap(code, this.province);
				this.option.geo.map = code;
				this.option.series[0].map = code;
				this.option.series[0].label.normal.fontSize = this.FontSize(0.1);
				this.option.series[1].code = code;
				this.option.series[1].symbolSize = this.FontSize(0.15);
				this.myChart.setOption(this.option, true);
				this.myChart.on('click', (res) => {
					if(res.seriesType=="effectScatter"){
						this.MapScatterListMain(res);
					}else{
						this.MapListMain(res);
					}
					

				})
			},

上边代码有用的东西不多，主要说下那个warningMapMain(code)的code，这个code就是传个地市的行政代码，假如我的是云南省就是传530000，不过这里有个前提，可以看到我写了这一句：

this.province = require('../../../assets/province/' + code + '.json');

这句很明显是引用静态数据的，所以搞上边的前提你需要下载你需要的那个省的所有的json，下载json的地方我也贴个链接ECHARTS地图JSON下载
然后截个图看下我的JSON格式

随便点开个看下格式：

好了，上述就是完成一个ECHARTS地图的基本操作了。

可能实现上边的朋友开始考虑下钻，下钻就是点击传不同的code就可以，我这里有个好玩的东西，可以分享下，不贴代码。

上述就是用d3实现的一个罗盘，罗盘上是一个省的所有地市，触摸可显示是哪个地市，点击以后可以关联地图，并且在罗盘上展示地市下面的区县。是个简单美观好用的东西，仅供参考，此罗盘不免费提供思路，有偿实现。上边ECHARTS代码不懂可以找我探讨。喜欢的朋友点个赞，给个评论哟，感谢！