Echarts动态加载地图数据(Dynamic load Echarts map data)
2017-07-08 16:40
591 查看
本篇就是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的依赖
增加了getMapDataForEcharts方法,正常的开发应该分为controller-service-dao层,各种数据也是根据咱们自己的业务进行查询,本文仅以controller返回数据进行说明。
WelcomeController.java
由于Echarts中的data是js数组,当我们通过ajax获取数据后,可以通过mapChart.setOption()方法再次重新设置mapChart中的相关属性,它会覆盖前面定义的属性。
javascript代码如下:
5.启动项目http://localhost:8080/
至此,一个完整的利用Echarts制作地图展示的示例已经完成了。
源码下载
如果你觉得本文对你有帮助,是可以赞赏一下的:)
如遇到问题,欢迎通过公众号留言给作者,以便共同探讨。
邮箱:thinkingingis@qq.com
微信公众号:
+ 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制作地图展示的示例已经完成了。
源码下载
如果你觉得本文对你有帮助,是可以赞赏一下的:)
如遇到问题,欢迎通过公众号留言给作者,以便共同探讨。
邮箱:thinkingingis@qq.com
微信公众号:
相关文章推荐
- echarts地图动态加载数据,字号调整及innerHTML标题
- echarts地图 json数据 和 后套动态数据加载
- echarts地图 json数据 和 后套动态数据加载
- 11G Concept 第六章翻译 Data Dictionary and Dynamic Performance Views(数据字典和动态性能试图)
- 利用JQuery的load函数动态加载页面 以及jQuery动态加载页面和请求所返回的数据
- jquery-mobile中data-role='collapsible'动态加载数据后,折叠组样式丢失
- 总结Asp.net中Page加载PostData的具体过程 进而解决"获取动态创建的控件的PostData数据"问题
- 场景数据的动态更新setDataVariance(osg::Object::DYNAMIC) (转)
- 总结Asp.net中Page加载PostData的具体过程 进而解决"获取动态创建的控件的PostData数据"问题
- APK动态加载框架 https://github.com/singwhatiwanna/dynamic-load-apk
- 精进不休 .NET 4.0 (3) - asp.net 4.0 新特性之动态数据(Dynamic Data)增强, AJAX增强; IDE之Visual Studio 2010增强
- 笔记 C# 实现后台 动态加载 页面标题 Dynamic Load Page Title
- easyui中 combogrid控件的loadData方法加载本地数据
- 精进不休 .NET 4.0 (3) - asp.net 4.0 新特性之动态数据(Dynamic Data)增强, AJAX增强; IDE之Visual Studio 2010增强
- C#+JQuery+.Ashx+百度Echarts 实现全国省市地图和饼状图动态数据图形报表的统计
- (ros/navigation)how to build a map using logged data 怎样用记录的数据创建地图
- autocad 动态加载ARCGISONLINE地图数据
- Asp.net动态数据(Dynamic Data) 笔记一
- 总结Asp.net中Page加载PostData的具体过程 进而解决"获取动态创建的控件的PostData数据"问题
- echarts加载动态数据---实时统计