Echarts动态加载地图数据(Dynamic load Echarts map data)

本篇就是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 data
                    var 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.75
                                     zoom: 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制作地图展示的示例已经完成了。

源码下载

如果你觉得本文对你有帮助，是可以赞赏一下的：）

如遇到问题，欢迎通过公众号留言给作者，以便共同探讨。

邮箱：[e-mail]

微信公众号：