利用Echarts制作地图（一）

最新推荐文章于 2024-08-05 05:00:00 发布

ThinkingInGIS

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量6.3w

点赞数 16

本文链接：https://blog.csdn.net/gisboygogogo/article/details/73713417

版权

spring boot 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

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)

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