echart地图实现自定义贴图标注

最新推荐文章于 2024-09-11 06:12:41 发布

扶我起来，我还能肝

最新推荐文章于 2024-09-11 06:12:41 发布

阅读量1.7k

点赞数 1

文章标签：前端定位

本文链接：https://blog.csdn.net/weixin_44344966/article/details/106355825

版权

echart地图实现自定义贴图标注

大二有幸参与了公司项目开发，和小伙伴做一个监控学校疫情的系统，在地图上展示学校打卡点，打卡等信息。功能完成后，上级又给加了一个新需求，要求追踪某个学生去过的地点并用自定义图案标注出来，emmmm在翻了好久的api后总算找到了方法，(本来就是后端人员，但是没办法都得自己干，第一次接触这种，官方api我一开始看蒙了hh。)这里码一下，

贴下核心代码：

series: [
									{
										 type: 'custom',//配置显示方式为用户自定义
										 name: '疫情扫码打卡点',
					                    coordinateSystem: 'bmap',//使用百度地图作为地图
					                    itemStyle: {
					                        normal: {
					                            color: '#46bee9'
					                        }
					                    },
										symbolSize:	30 ,
										renderItem: function (params, api) {//具体实现自定义图标的方法
											
											let numbers = myData[params.dataIndex].value[2];
											let imgPath ="";
											let textStr;
											if(trance){
												textStr = "                                  "+myData[params.dataIndex].name;
											}else textStr = "                                  "+myData[params.dataIndex].name+" : "+myData[params.dataIndex].value[2]+" 人";
//											/if(myData[params.dataIndex].value[2] == -1){
//												textStr = "                                  "+myData[params.dataIndex].name;
//											}else textStr = "                                  "+myData[params.dataIndex].name+" : "+myData[params.dataIndex].value[2]+" 人";
											if(numbers >0 ){
												imgPath ="img/location-user.png";
												return {
						                            type: 'image' ,
						                            style: {
						                            	textFill:'#df8321',
						                            	image: imgPath,
						                            	x:api.coord([myData[params.dataIndex].value[0],myData[params.dataIndex].value[1]])[0],//必须要转换坐标，否则会相对于整个画布定位
						                                y:api.coord([myData[params.dataIndex].value[0],myData[params.dataIndex].value[1]])[1],
						                                width:30,
														height:30,
														name:myData[params.dataIndex].name,
														text:textStr	//图标边上的提示文字
						                            }
					                        	}
											}else return null;
											
					                    },
					                    markPoint: {
					                    	label:{ //标签样式设置
					                               normal:{
					                                   show:true,
					                                   formatter:function(params){ //标签内容
					                                	   cosole.log("ASDDDD");
					                                       return  '疫情健康打卡点：<br/>'+params.data.name+'<br/> 扫码人数 ：'+params.data.value[2]+'(人)';
					                                   }
					                               }
					                        }
					                    }
					                    ,
					                    data:myData
									}
									
								]

在这里插入图片描述如上实现了贴图，当然还支持其他方式，具体官方api都写的很清楚了。