Echarts动态加载地图数据(Dynamic load Echarts map data)
本篇就是Echarts制作地圖終篇啦，前面我們已經(jīng)制作好自定義區(qū)域的地圖，如何結(jié)合‘?dāng)?shù)據(jù)’讓地圖根據(jù)我們的業(yè)務(wù)邏輯變得有“活力”，這才是最重要的。Echarts官網(wǎng)中給的demo大多都是靜態(tài)的、寫死的地圖數(shù)據(jù)。本篇文章將說明如何動(dòng)態(tài)加載echarts中的地圖數(shù)據(jù)。本篇基于前面SpringBoot + JSP的項(xiàng)目進(jìn)行演示, 只有部分代碼有所增加。
本篇文章的開發(fā)工具：
1. Spring Boot 1.5.3.RELEASE
2.Maven 3
3.Java 8
4.Jquery 1.9.1
5.json-simple
1.項(xiàng)目的目錄結(jié)構(gòu)
2.項(xiàng)目依賴 pom.xml
與之前的依賴沒有變化，只是增加了json-simple的依賴
<!-- https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple --><dependency><groupId>com.googlecode.json-simple</groupId><artifactId>json-simple</artifactId></dependency>3.Controller類增加了getMapDataForEcharts方法，正常的開發(fā)應(yīng)該分為controller-service-dao層，各種數(shù)據(jù)也是根據(jù)咱們自己的業(yè)務(wù)進(jìn)行查詢，本文僅以controller返回?cái)?shù)據(jù)進(jìn)行說明。
WelcomeController.java
package org.thinkingingis;import java.util.HashMap; import java.util.Map; import java.util.Random;import org.json.simple.JSONArray; import org.json.simple.JSONObject; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody;@Controller public class WelcomeController {@Value("${welcome.message:test}")private String message = "Hello ThinkingInGIS";@RequestMapping("/")public String welcome(Map<String, Object> model){model.put("message", this.message);return "welcome";}@RequestMapping(value = "getMapData.do", produces="text/html; charset=UTF-8")public @ResponseBody String getMapDataForEcharts(){Map<String, Integer> map = new HashMap<String, Integer>();//在controller中進(jìn)行數(shù)據(jù)的組織Random rand = new Random();map.put("漷縣鎮(zhèn)", rand.nextInt(2000));map.put("永樂店鎮(zhèn)", rand.nextInt(2000));map.put("于家務(wù)回族鄉(xiāng)", rand.nextInt(2000));map.put("梨園地區(qū)", rand.nextInt(2000));map.put("潞城鎮(zhèn)", rand.nextInt(2000));map.put("馬駒橋鎮(zhèn)", rand.nextInt(2000));map.put("宋莊鎮(zhèn)", rand.nextInt(2000));map.put("臺(tái)湖鎮(zhèn)", rand.nextInt(2000));map.put("西集鎮(zhèn)", rand.nextInt(2000));map.put("永順地區(qū)", rand.nextInt(2000));map.put("張家灣鎮(zhèn)", rand.nextInt(2000));JSONArray data = new JSONArray();for(String name : map.keySet()){JSONObject jo = new JSONObject();jo.put("name", name); //name 應(yīng)與shp轉(zhuǎn)geojson時(shí)的name字段對(duì)應(yīng)jo.put("value", map.get(name)); //value表示各個(gè)鎮(zhèn)的值data.add(jo);}JSONObject res = new JSONObject(); //定義一個(gè)json對(duì)象res.put("data", data); //data屬性res.put("maxRange", 2000); //maxrange屬性，最大值System.out.println(res);return res.toString();}}4.加載map的data由于Echarts中的data是js數(shù)組，當(dāng)我們通過ajax獲取數(shù)據(jù)后，可以通過mapChart.setOption()方法再次重新設(shè)置mapChart中的相關(guān)屬性，它會(huì)覆蓋前面定義的屬性。
javascript代碼如下：
<script type="text/javascript">$(function(){var mapChart; ?var option; ?$.get('./Beijing_TZQ_TOWN.json', function (beijingJson) { ?echarts.registerMap('北京', beijingJson);? ?mapChart = echarts.init(document.getElementById('map-wrap'));? ?option = { ?title:{ ?text: '北京市通州區(qū)各鎮(zhèn)xxx統(tǒng)計(jì)圖', ?left: 'center' ?}, ?tooltip: { ?trigger: 'item', ?formatter: '{b}<br/>{c} (個(gè))' ?}, ?toolbox: { ?show: true, ?orient: 'vertical', ?left: 'right', ?top: 'center', ?feature: { ?dataView: {readOnly: false}, ?restore: {}, ?saveAsImage: {} ?} ?}, ?visualMap: { ?min: 0, ?max: 0, ?text:['高','低'], ?realtime: false, ?calculable: true, ?inRange: { ?color: ['lightskyblue','yellow', 'orangered'] ?} ?}, ?series:[ ?{ ?name: '通州區(qū)各鎮(zhèn)xxx統(tǒng)計(jì)圖', ?type: 'map', ?map: '北京', // 自定義擴(kuò)展圖表類型 ?aspectScale: 1.0, //地圖長寬比. default: 0.75 ?zoom: 1.1, //控制地圖的zoom，動(dòng)手自己更改下 看看什么效果吧 ?roam: true, ?itemStyle:{ ?normal:{label:{show:true}}, ?emphasis:{label:{show:true}} ?},data: []} ?] ?} ?mapChart.setOption(option);???? ?});$.ajax({method: 'POST',data: {},url: 'http://localhost:8080/getMapData.do',success: function(result){console.info(result);if(result){//get max and series datavar jsonObj = $.parseJSON(result);mapChart.setOption({visualMap: {min: 0,max: jsonObj.maxRange,text:['高','低'],realtime: false,calculable: true,inRange: {color: ['lightskyblue','yellow', 'orangered']}},series:[{name: '通州區(qū)各鎮(zhèn)xxx統(tǒng)計(jì)圖',type: 'map',map: '北京', // 自定義擴(kuò)展圖表類型aspectScale: 1.0, //長寬比 default: 0.75zoom: 1.1,roam: true,itemStyle:{normal:{label:{show:true}},emphasis:{label:{show:true}}},data: jsonObj.data //json對(duì)象中的data, data為JSONArray}]});} }}) })</script> ajax方法請(qǐng)求成功后的mapChart.setOption()是重點(diǎn)。我們向前端傳遞的Json對(duì)象，擁有data和maxRange 兩個(gè)屬性。5.啟動(dòng)項(xiàng)目http://localhost:8080/
至此，一個(gè)完整的利用Echarts制作地圖展示的示例已經(jīng)完成了。
源碼下載
如果你覺得本文對(duì)你有幫助，是可以贊賞一下的：）
如遇到問題，歡迎通過公眾號(hào)留言給作者，以便共同探討。
郵箱：thinkingingis@qq.com
微信公眾號(hào)：
總結(jié)
以上是生活随笔為你收集整理的Echarts动态加载地图数据(Dynamic load Echarts map data)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用shp制作geoJson格式地图数据(
- 下一篇： 导入jar包到Maven本地仓库(mav