您的位置：首页 > 其它

利用Echarts制作地图（一）

2017-06-25 13:38 656 查看
Echarts作为一个前端可视化工具，支持地图图表的展示。从本篇开始，将用三篇文章说明如何利用echats制作自定义区域的单图例、多图例及动态加载地图所需数据。 Echarts支持 js 格式 与 geoJson格式的地图。并且其官网提供了全国及省市自治区的地图文件可供下载
。本篇利用前面spring boot + jsp的项目进行演示。

0.项目最终目录结构如下：



1. 引入jquery.js和echarts.js文件到页面

<script type="text/javascript" src = "/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src = "/echarts.min.js"></script>
2.在页面上创建一个地图容器
<div id="map-wrap" style="height: 500px;">

</div>
3.引入地图文件，echarts.js支持js格式和geojson格式的地图文件，但国际上geoJson格式更为标准，如果百度提供的js格式地图足够你使用，则可以使用这两者其中的任何一个，如果百度提供的数据没有你需要的，则只能想办法自己制作数据。本篇文章后面所用数据以北京通州区下所属各镇为例，是作者自己制作。下文将介绍如何制作自定义区域的geojson数据。

3.1通过beijing.js方式加载数据，引入beijing.js文件

<script type="text/javascript" src= "/beijing.js"></script>
代码及注释如下：

<script type="text/javascript">
$(function(){

//使用echarts.init()方法初始化一个Echarts实例，在init方法中传入echarts map的容器 dom对象
var mapChart = echarts.init(document.getElementById('map-wrap'));
// mapChart的配置
var option = {
title:{
text: '北京各区示意图',
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: 2000,
text:['高','低'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue','yellow', 'orangered']
}
},
series:[
{
name: '北京各区',
type: 'map',//type必须声明为 map 说明该图标为echarts 中map类型
map: '北京', //这里需要特别注意。如果是中国地图，map值为china，如果为各省市则为中文。这里用北京
aspectScale: 0.75, //长宽比. default: 0.75
zoom: 1.2,
//roam: true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data: [
{name:'东城区', value: 1800},
{name:'西城区', value: 1700},
{name:'朝阳区', value: 1600},
{name:'丰台区', value: 1400},
{name:'石景山区', value: 1200},
{name:'海淀区', value: 1000},
{name:'门头沟区', value: 800},
{name:'房山区', value: 600},
{name:'通州区', value: 400},
{name:'顺义区', value: 200},
{name:'昌平区', value: 100},
{name:'大兴区', value: 300},
{name:'怀柔区', value: 500},
{name:'平谷区', value: 700},
{name:'密云县', value: 900},
{name:'延庆县', value: 1100}

]
}
]
};
//设置图表的配置项
        mapChart.setOption(option);

})
</script>
注意：在series中的map值为北京

启动项目后，如下图所示：



3.2 引用JSON格式地图数据：

 这里我们利用jQuery 的 $.get()方法异步加载Beijing_TZQ_TOWN.json数据（该数据由自己制作）。前面已经引用了jquery.js文件

代码及注释如下：

<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: '北京市通州区各镇分布图',
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: 2000,
text:['高','低'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue','yellow', 'orangered']
}
},
series:[
{
name: '通州区各镇安装机井统计图',
type: 'map',
map: '北京', // 自定义扩展图表类型
aspectScale: 1.0, //地图长宽比. default: 0.75
zoom: 1.1, //控制地图的zoom，动手自己更改下 看看什么效果吧
roam: true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
}
}
]
}
mapChart.setOption(option);

});

})
</script>
启动项目：



完整代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src = "/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src = "/echarts.min.js"></script>
<script type="text/javascript" src= "/beijing.js"></script>
</head>

<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: '北京市通州区各镇分布图',
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: 2000,
text:['高','低'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue','yellow', 'orangered']
}
},
series:[
{
name: '通州区各镇安装机井统计图',
type: 'map',
map: '北京', // 自定义扩展图表类型
aspectScale: 1.0, //长宽比. default: 0.75
zoom: 1.1,
roam: true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
}
}
]
}
mapChart.setOption(option);
});
})
</script>

<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Spring Boot</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1 style="color: #4EE2EC">Spring Boot + JSP + Echarts 制作地图示例</h1>
<h2 style="color: #ED594E">Message: ${message}</h2>
</div>
<div id="map-wrap" style="height: 500px;">

</div>
<div>
<h3>欢迎关注微信公众号：ThinkingInGIS</h3>
<img alt="微信公众号" src="/qrcode_for_thinkingingis.png">
</div>
</div>
<script type="text/javascript" src="webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>


看到这，很多人会问，该怎样制作一个自定义区域的geojson地图数据呢？

请看下回分解......

至此，利用spring boot + echarts 就实现了地图的制作。

(如遇到问题，请留言给作者，以便共同探讨gis知识。thinkingingis@qq.com)

也可以通过如下公众号留言

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航