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文件中的數據，保持和數據一致，當你打開瀏覽器查看地圖時，發現地圖上的區縣名稱沒變，那么請先清除頁面緩存，方可行