1.场景
在echarts的map中展示数据，项目中有个实验室地图模块，展示重庆所有区县的所拥有的实验室机构，当鼠标点击区县时，会弹出信息框，展示该区县所有的实验室机构以及联系电话列表展示，点击实验室机构名称可跳转到机构详情页面
2.所使用技术
echarts的map组件、java的StringBuff拼接地图实验室的json格式数据、加载重庆市区县地图数据的json文件、freemarker做页面展示
3.代码
freemarker页面
<#import "/WEB-INF/template/website/base_website.ftl" as base> <@base.html title="实验室地图"; templateId> <#if templateId=="head">
<!--引入echarts--> <script type="text/javascript" src="${Context}/js/website/echarts.min.js"></script> <style type="text/css"> .hover-div{ width: 350px; padding: 10px; background-color: #FFFFFF;} .hover-div .title{ overflow: hidden; font-size: 12px; color: #1DA7A9;} .hover-div .l{ float: left;} .hover-div .r{ float: right;} .hover-div ul{ padding: 10px 0;} .hover-div li{ overflow: hidden; font-size: 12px; color: #666666; line-height: 25px;} .hover-div .tip{ font-size: 12px; color: #999999;} </style> </#if> <#if templateId=="body"> <!--guide--> <div class="guide"> <div class="view-center"> <span>当前位置：</span> <a href="##">检验检测机构信息</a> <a>></a> <a>实验室地图</a> </div> </div> <div class="main"> <div class="view-center bg-FFF pl-60px pr-60px"> <div class="lab-module"> <div class="tab-button"> <a class="active" href="laboratoryMap.action">实验室地图</a> <a href="laboratorList.action">实验室名单</a> </div> <div class="map-box">
<!--地图容器--> <div id="map" style="height: 100%;"></div> </div> </div> </div> </div> <div style=" height: 260px;"></div> <div id="mapMain" style="position: fixed;z-index: 99999;top: 50%;left: 50%;border: 1px solid #c7c7c7;margin-top: -100px;margin-left: -150px;"></div> </#if> <script type="text/javascript"> $(function(){ $("body").click(function(){ $("#mapMain").html(""); }); });
//点击实验室名称跳转详情页面方法 function mapfun(id){ event.stopPropagation(); window.location.href="${Context}/website/member/memberDisplay.action?userId="+id; }
//拼接点击地图区县时弹出的信息框方法 function loadList(data,oEvent){ var html = "<div class='hover-div'>" html += " <div class='title'>"; html += " <span class='l'>实验室名称</span>"; html += " <span class='r'>联系电话</span>"; html += " </div>"; html += " <ul>"; for(var i = 0; i < data.length; i++){ html += " <li><span class='l' onclick= 'mapfun(""+data[i].id+"")'>"+data[i].name+"</span><span class='r'>"+data[i].tel+"</span></li>"; } html += " </ul>"; html += " <div class='tip'>该区县共 "+data.length+" 家</div>"; html += "</div>"; $("#mapMain").html(html); oEvent.event.cancelBubble = true; oEvent.event.stopPropagation(); return html; } //初始化地图容器 var myChart = echarts.init(document.getElementById('map'));
//读取地图原始数据 $.get('${Context}/js/website/chongqing.json', function (geoJson) { echarts.registerMap('chongqing', geoJson); myChart.on('click', function (params,ev) { var oEvent = params.event; var data = []; var name = params.name;
//${dataSource} 是从后台穿过来的json字符串数据 data = ${dataSource}[name]; return loadList(data,oEvent); });
//匹配json文件中的数据，缺一不可 myChart.setOption(option = { title: { }, series: [ { name: '重庆', type: 'map', mapType: 'chongqing', // 自定义扩展图表类型 itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name:'万州区',value:'cq'}, {name:'涪陵区',value:'cq'}, {name:'渝中区',value:'cq'}, {name:'大渡口区',value:'cq'}, {name:'江北区',value:'cq'}, {name:'沙坪坝区',value:'cq'}, {name:'九龙坡区',value:'cq'}, {name:'南岸区',value:'cq'}, {name:'北碚区',value:'cq'}, {name:'綦江区',value:'cq'}, {name:'大足区',value:'cq'}, {name:'渝北区',value:'cq'}, {name:'巴南区',value:'cq'}, {name:'黔江区',value:'cq'}, {name:'长寿区',value:'cq'}, {name:'江津区',value:'cq'}, {name:'合川区',value:'cq'}, {name:'永川区',value:'cq'}, {name:'南川区',value:'cq'}, {name:'璧山区',value:'cq'}, {name:'铜梁区',value:'cq'}, {name:'潼南区',value:'cq'}, {name:'荣昌区',value:'cq'}, {name:'梁平县',value:'cq'}, {name:'城口县',value:'cq'}, {name:'丰都县',value:'cq'}, {name:'秀山土家族苗族自治县',value:'cq'}, {name:'垫江县',value:'cq'}, {name:'武隆县',value:'cq'}, {name:'忠县',value:'cq'}, {name:'石柱土家族自治县',value:'cq'}, {name:'开县',value:'cq'}, {name:'云阳县',value:'cq'}, {name:'奉节县',value:'cq'}, {name:'彭水苗族土家族自治县',value:'cq'}, {name:'酉阳土家族苗族自治县',value:'cq'}, {name:'巫山县',value:'cq'}, {name:'巫溪县',value:'cq'} ] } ] }); }); </script> </@>
json数据文件
后台提供实验室地图数据
/** * 实验室地图页面 * @return * @throws Exception */ public String laboratoryMap() throws Exception{ HibernateBean bean = HibernateBeanFactory.createBean(); String sql = "select * from client_user where isEnable=1 and membershipAuthority = 1"; Map<String, Object> map = new HashMap<String, Object>(); String qx = "SELECT NAME FROM china WHERE parent_code = '500200' OR parent_code = '500100'"; qxList = bean.findBySql(qx, map); StringBuffer sb = new StringBuffer("{"); for (int i = 0; i < qxList.size(); i++) { sql +=" and county = :county"; map.put("county", qxList.get(i)[0].toString()); cuserList = bean.findBySql(sql, ClientUser.class, map); sb.append('"'+qxList.get(i)[0].toString()+'"' +":["); if(cuserList.size()==0){ if(i==qxList.size()-1){ sb.append("]"); }else{ sb.append("],"); } }else{ for (int j = 0; j < cuserList.size(); j++) { if(i==qxList.size()-1){ sb.append("{"id":"+'"'+cuserList.get(j).getUserId()+'"'+","name":"+'"'+cuserList.get(j).getUnitName()+'"'+","tel":"+'"'+cuserList.get(j).getCellPhone()+'"'+"}]"); } if(j == cuserList.size()-1){ sb.append("{"id":"+'"'+cuserList.get(j).getUserId()+'"'+","name":"+'"'+cuserList.get(j).getUnitName()+'"'+","tel":"+'"'+cuserList.get(j).getCellPhone()+'"'+"}],"); }else{ sb.append("{"id":"+'"'+cuserList.get(j).getUserId()+'"'+","name":"+'"'+cuserList.get(j).getUnitName()+'"'+","tel":"+'"'+cuserList.get(j).getCellPhone()+'"'+"},"); } } } } sb.append("}"); dataSource = sb.toString(); return "success"; }
得到的数据格式如下：
{"万州区":[{"id":"402881f0622e776701622e779ef70000","name":"南京科技","tel":"15923522574"}],"涪陵区":[],"渝中区":[],"大渡口区":[],"江北区":[],"沙坪坝区":[],"九龙坡区":[],"南岸区":[],"北碚区":[],"綦江区":[],"大足区":[],"渝北区":[],"巴南区":[],"黔江区":[],"长寿区":[],"江津区":[],"合川区":[],"永川区":[],"南川区":[],"璧山区":[],"铜梁区":[],"潼南区":[],"荣昌区":[],"梁平县":[],"城口县":[],"丰都县":[],"垫江县":[],"武隆县":[],"忠县":[],"开县":[],"云阳县":[],"奉节县":[],"巫山县":[],"巫溪县":[],"石柱土家族自治县":[],"秀山土家族苗族自治县":[],"酉阳土家族苗族自治县":[],"彭水苗族土家族自治县":[]}
4、补充
如果地图展示区县名称和数据库不一致，修改json文件中的数据，保持和数据一致，当你打开浏览器查看地图时，发现地图上的区县名称没变，那么请先清除页面缓存，方可行