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 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)相关推荐

ceisum 加载geojson,使用 Cesium 动态加载 GeoJSON 数据
前言需求是这样的,我需要在地图中显示 08 年到现在的地震情况,地震都是发生在具体的时间点的,那么问题就来了,如何实现地震情况按照时间动态渲染而不是一次全部加载出来. 一. 方案分析这里面牵扯到两 ...
ECharts动态加载数据绘制折线图
Echarts动态加载数据绘制折线图 ECharts 引入ECharts 步骤连接数据接口,动态加载图表动态加载数据,整体代码折线图绘制总结绘制多个图表的方法 ECharts 纯Javasc ...
jquery table ajax,JQuery Ajax动态加载Table数据的实例讲解
我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. table第一次加载数据的function定义如下: function loadData() ...
ArcEngine实现动态加载地图
动态加载地图说一下主要思想:通过判断相关点是否在视图范围,并且达到某一地图比例尺时加载相应范围的地图(需要有相应基础才能看懂本文章). 1.首先得到关键点的图层 m_Map= axMapContro ...
GEE学习笔记八十七：python版GEE动态加载地图方法（更新版）
为了防控疫情,继续宅在家里--. 国内某些在国外受过高等教育的人竟然认为公开承认上图红色注释会引起某些麻烦. 在Google Earth Engine的python版API更新后,之前使用folium ...
autoware加载地图数据与使用rosbag包建图（三）
autoware加载地图数据(三) 介绍如何为autoware加载地图数据启动autoware $ cd ~/autoware.ai $ source install/setup.bash $ ro ...
vue动态跟新layui的select_vue+layui实现select动态加载后台数据的例子
vue+layui实现select动态加载后台数据的例子发布时间:2020-09-18 22:51:36 来源:脚本之家阅读:85 作者:qq_26814945 刚开始由于layui form渲染 ...
Java实现动态加载页面_[Java教程]动态加载页面数据的小工具 javascript + jQuery （持续更新）...
[Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新) 0 2014-05-07 18:00:06 使用该控件,可以根据url,参数,加载html记录模板(包含 ...
html select ajax,AJAX 动态加载后台数据绑定select的方法
直接上代码是可以用的,后台代码我就不贴了,我相信后台代码大家都会,直接返回json数据,我是前端比较差的,所以喜欢把每次不会的全部记起来 html代码 //下拉框数据动态加载 js代码 $.ajax ...

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

Echarts动态加载地图数据(Dynamic load Echarts map data)相关推荐

最新文章

热门文章