利用Echarts制作地图（一）

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

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

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

2.在页面上创建一个地图容器

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

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

代码及注释如下：

注意：在series中的map值为北京

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

3.2 引用JSON格式地图数据：

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

代码及注释如下：

启动项目：

完整代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


	
	
	
	





	

		

			

				Spring Boot
			
			

				

					
Home
					
About
				
			
		
	
	

		

			
Spring Boot + JSP + Echarts 制作地图示例
			
Message: ${message}
		
		


  		
  		

			
欢迎关注微信公众号：ThinkingInGIS
			
		
	
	

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

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

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

(如遇到问题，请留言给作者，以便共同探讨gis知识。[email protected])

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