本篇就是Echarts制作地圖終篇啦，前面我們已經制作好自定義區域的地圖，如何結合‘數據’讓地圖根據我們的業務邏輯變得有“活力”，這才是最重要的。Echarts官網中給的demo大多都是靜態的、寫死的地圖數據。本篇文章將說明如何動態加載echarts中的地圖數據。本篇基于前面SpringBoot + JSP的項目進行演示, 只有部分代碼有所增加。

本篇文章的開發工具：

1. Spring Boot 1.5.3.RELEASE

2.Maven 3

3.Java 8

4.Jquery 1.9.1

5.json-simple

1.項目的目錄結構

2.項目依賴 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方法，正常的開發應該分為controller-service-dao層，各種數據也是根據咱們自己的業務進行查詢，本文僅以controller返回數據進行說明。

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中進行數據的組織Random rand = new Random();map.put("漷縣鎮", rand.nextInt(2000));map.put("永樂店鎮", rand.nextInt(2000));map.put("于家務回族鄉", rand.nextInt(2000));map.put("梨園地區", rand.nextInt(2000));map.put("潞城鎮", rand.nextInt(2000));map.put("馬駒橋鎮", rand.nextInt(2000));map.put("宋莊鎮", rand.nextInt(2000));map.put("臺湖鎮", rand.nextInt(2000));map.put("西集鎮", rand.nextInt(2000));map.put("永順地區", rand.nextInt(2000));map.put("張家灣鎮", rand.nextInt(2000));JSONArray data = new JSONArray();for(String name : map.keySet()){JSONObject jo = new JSONObject();jo.put("name", name); //name 應與shp轉geojson時的name字段對應jo.put("value", map.get(name)); //value表示各個鎮的值data.add(jo);}JSONObject res = new JSONObject(); //定義一個json對象res.put("data", data); //data屬性res.put("maxRange", 2000); //maxrange屬性，最大值System.out.println(res);return res.toString();}}4.加載map的data

由于Echarts中的data是js數組，當我們通過ajax獲取數據后，可以通過mapChart.setOption()方法再次重新設置mapChart中的相關屬性，它會覆蓋前面定義的屬性。

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: '北京市通州區各鎮xxx統計圖', ?left: 'center' ?}, ?tooltip: { ?trigger: 'item', ?formatter: '{b}<br/>{c} (個)' ?}, ?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: '通州區各鎮xxx統計圖', ?type: 'map', ?map: '北京', // 自定義擴展圖表類型 ?aspectScale: 1.0, //地圖長寬比. default: 0.75 ?zoom: 1.1, //控制地圖的zoom，動手自己更改下 看看什么效果吧 ?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: '通州區各鎮xxx統計圖',type: 'map',map: '北京', // 自定義擴展圖表類型aspectScale: 1.0, //長寬比 default: 0.75zoom: 1.1,roam: true,itemStyle:{normal:{label:{show:true}},emphasis:{label:{show:true}}},data: jsonObj.data //json對象中的data, data為JSONArray}]});} }}) })</script> ajax方法請求成功后的mapChart.setOption()是重點。我們向前端傳遞的Json對象，擁有data和maxRange 兩個屬性。

5.啟動項目http://localhost:8080/

至此，一個完整的利用Echarts制作地圖展示的示例已經完成了。

源碼下載

如果你覺得本文對你有幫助，是可以贊賞一下的：）

如遇到問題，歡迎通過公眾號留言給作者，以便共同探討。

郵箱：thinkingingis@qq.com

微信公眾號：

總結

以上是生活随笔為你收集整理的Echarts动态加载地图数据(Dynamic load Echarts map data)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。