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的依赖

		
		
		    com.googlecode.json-simple
		    json-simple
		

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 model){
        model.put("message", this.message);
        return "welcome";
    }
    
    @RequestMapping(value = "getMapData.do", produces="text/html; charset=UTF-8")
    public @ResponseBody String getMapDataForEcharts(){
        Map map = new HashMap();
        
        //在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代码如下：

ajax方法请求成功后的mapChart.setOption()是重点。我们向前端传递的Json对象，拥有data和maxRange 两个属性。

5.启动项目http://localhost:8080/

至此，一个完整的利用Echarts制作地图展示的示例已经完成了。

源码下载

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

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

邮箱：[email protected]

微信公众号：