Spring Boot + Thymeleaf + Echarts 三维地图展示

本篇文章带来Echarts GL自定义三维地图的展示（以北京2018年2月各区房价均价举例），相关地图的制作与动态数据的加载请参考前面的博客：

geoJson格式地图数据的制作

Echarts动态加载地图数据 

本文用到的技术：

1. Spring Boot 1.5.6.REALEASE

2. Spring 4.3.8.REALEASE

3. Echarts & Echarts GL

4. Thymeleaf 2.2.5.REALEASE

5. Tomcat embed 8.5.14

6. Maven 3

7. Java 8

1. 项目目录结构

2. 项目依赖 pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>org.thinkingingis</groupId>
  <artifactId>spring-boot-echarts</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>jar</packaging>

  <name>spring-boot-echarts</name>
  <url>http://maven.apache.org</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <java.version>1.8</java.version>
  </properties>
  
  <parent>
  	<groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.6.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>

  <dependencies>
      	<dependency>
      		<groupId>org.springframework.boot</groupId>
      		<artifactId>spring-boot</artifactId>
      	</dependency>
      	<dependency>
      		<groupId>org.springframework.boot</groupId>
      		<artifactId>spring-boot-autoconfigure</artifactId>
      	</dependency>
      	<dependency>
      		<groupId>org.springframework.boot</groupId>
      		<artifactId>spring-boot-configuration-processor</artifactId>
      	</dependency>
      	<dependency>
      		<groupId>org.springframework.boot</groupId>
      		<artifactId>spring-boot-devtools</artifactId>
      	</dependency>
      	<dependency>
      		<groupId>org.springframework.boot</groupId>
      		<artifactId>spring-boot-loader-tools</artifactId>
      	</dependency>
      	<dependency>
      		<groupId>org.springframework.boot</groupId>
      		<artifactId>spring-boot-maven-plugin</artifactId>
      		<version>1.4.3.RELEASE</version>
      		<type>maven-plugin</type>
      	</dependency>
      	<dependency>
      		<groupId>org.springframework.boot</groupId>
      		<artifactId>spring-boot-starter</artifactId>
      	</dependency>
      	<dependency>
      		<groupId>org.springframework.boot</groupId>
      		<artifactId>spring-boot-starter-logging</artifactId>
      	</dependency>
      	<dependency>
      		<groupId>org.springframework.boot</groupId>
      		<artifactId>spring-boot-starter-web</artifactId>
      	</dependency>
      	<dependency>
      		<groupId>org.springframework.boot</groupId>
      		<artifactId>spring-boot-starter-thymeleaf</artifactId>
      	</dependency>
      	<dependency>
      		<groupId>org.springframework.boot</groupId>
      		<artifactId>spring-boot-starter-tomcat</artifactId>
      	</dependency>
		<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
		<dependency>
		    <groupId>com.alibaba</groupId>
		    <artifactId>fastjson</artifactId>
		    <version>1.2.41</version>
		</dependency>
  </dependencies>
  <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            
            <plugin>  
                <groupId>org.apache.maven.plugins</groupId>  
                <artifactId>maven-compiler-plugin</artifactId>  
                <version>3.5.1</version>  
                <configuration>  
                    <source>1.8</source>  
                    <target>1.8</target>  
                </configuration>  
            </plugin>  
            
        </plugins>
    </build>
</project>

3. Spring Boot

Application.java

package org.tig;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.support.SpringBootServletInitializer;
import org.springframework.context.annotation.Configuration;

@SpringBootApplication
@Configuration
public class Application extends SpringBootServletInitializer{
	
	@Override
	protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
		return application.sources(Application.class);
	}
	
	public static void main(String[] args) {
		SpringApplication.run(Application.class, args);
	}

}

MainController.java

package org.tig.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;


@Controller
public class MainController { 
	
	private String viewBasePath = "/manage";
	
	@GetMapping("/") 
	public String index(ModelMap model){
		return viewBasePath + "/home";	
	}

}

4.Thymeleaf及静态资源

对于 thymeleaf 文件，均放到 src／main／resources／templates／目录下

header.html 里定义了静态文件的引用，特别要注意：对于echarts展示三维地图来说，要多引用一个echarts-gl.min.js文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
	  xmlns:th="http://www.thymeleaf.org" 
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4" >

<head >
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<th:block th:fragment="echarts_gl_js">
		<script type="text/javascript" th:src="@{/assets/echartsjs/echarts.min.js}"></script>
		<script type="text/javascript" th:src="@{/assets/echartsjs/echarts-gl.min.js}"></script>
	</th:block>
	
	<th:block th:fragment="bootstrapAdmin_css_js">
		<link rel="stylesheet" th:href="@{/assets/bootstrap-admin/css/bootstrap.min.css}"></link>
		<link rel="stylesheet" th:href="@{/assets/bootstrap-admin/css/metisMenu.min.css}"></link>
		<link rel="stylesheet" th:href="@{/assets/bootstrap-admin/css/sb-admin-2.css}"></link>
		<link rel="stylesheet" th:href="@{/assets/bootstrap-admin/css/font-awesome.min.css}"></link>
		
		<script type="text/javascript" th:src="@{/assets/bootstrap-admin/js/jquery.min.js}"></script>
		<script type="text/javascript" th:src="@{/assets/bootstrap-admin/js/bootstrap.min.js}"></script>
		<script type="text/javascript" th:src="@{/assets/bootstrap-admin/js/metisMenu.min.js}"></script>
		<script type="text/javascript" th:src="@{/assets/bootstrap-admin/js/sb-admin-2.min.js}"></script>
	</th:block>
	
	<th:block th:fragment="verify_css">
		<link rel="stylesheet" th:href="@{/assets/verify/verify.css}"></link>
	</th:block>
	
</head>

<body>

</body>

</html>

home.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  	<title>Spring-Boot-Echarts-GL</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<th:block  th:include="layout/header :: bootstrapAdmin_css_js"/>
	<th:block  th:include="layout/header :: echarts_gl_js"/>
</head>
<body>
<div id="wrapper">
	<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0"> 
				
		<div class="navbar-header">	
			<span class="navbar-text label" style="font-size:18px;color:#333333;">ThinkingInGIS</span>
		</div>
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu" >
                    <li class="sidebar-search">
                        <div class="input-group custom-search-form">
                            <input type="text" class="form-control" placeholder="Search..." />
                            <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                        </div>
                    </li>
    	            <li>
                    	<a href="#"><i class="fa fa-dashboard fa-fw"></i> 统计面板</a>
                    </li>
                </ul>
            </div>
        </div>
	</nav> 

    <div id="page-wrapper">
	    <div class="row">
	        <div class="col-lg-12">
	            <h1 class="page-header">2018年2月北京各区房价均价</h1>
	        </div>
	    </div>
     
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart-o fa-fw"></i> Echarts 三维地图展示
                    </div>
                    <div class="panel-body">
                         <div id="echartGL" class="row" style="height:500px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="text-center">
	<th:block  th:include="layout/footer :: copy" />
</div>             

<script type="text/javascript">
$(function(){
    var omChart;  
    var omOption;  
    $.get('./geojson/beijing.json', function (BJjson) {  
        echarts.registerMap('北京', BJjson);   
        omChart = echarts.init(document.getElementById('echartGL'));   
        omOption = {  
            tooltip: {  
                trigger: 'item',  
                formatter: '{b}<br/>{c} (元/㎡)'  
            },  
            toolbox: {  
               show: true,  
               orient: 'vertical',  
               left: 'right',  
               top: 'center',  
               feature: {  
                   dataView: {readOnly: false},  
                   restore: {},  
                   saveAsImage: {}  
               }  
            },  
            visualMap: {  
                    min: 20000,  
                    max: 150000,  
                    text:['高','低'],  
                    realtime: false,  
                    calculable: true,  
                    inRange: {  
                        color: ['lightskyblue','yellow', 'orangered'] 
                    }  
            }, 
            series:[  
                {  
                	name: '2018年2月北京各区房价均价',  
                    type: 'map3D',  
                    map: '北京', // 自定义扩展图表类型  
                    aspectScale: 0.75, //地图长宽比. default: 0.75  
                    zoom: 1.0, //控制地图的zoom，动手自己更改下 看看什么效果吧  
                    roam: true,  
                    itemStyle:{  
                        normal:{label:{show:true}},  
                        emphasis:{label:{show:true}}  
                    },
                    data: [
                        {name:'东城区', value: 109093},  
                        {name:'西城区', value: 125138},  
                        {name:'朝阳区', value: 77434},  
                        {name:'丰台区', value: 59768},  
                        {name:'石景山区', value: 53599},  
                        {name:'海淀区', value: 88045},  
                        {name:'门头沟区', value: 42590},  
                        {name:'房山区', value: 31563},  
                        {name:'通州区', value: 39431},  
                        {name:'顺义区', value: 44019},  
                        {name:'昌平区', value: 39248},  
                        {name:'大兴区', value: 43134},  
                        {name:'怀柔区', value: 33937},  
                        {name:'平谷区', value: 24629},  
                        {name:'密云县', value: 25103},  
                        {name:'延庆县', value: 24408}  
                    ]
                }  
            ]  
        }  
        omChart.setOption(omOption);   
  }); 
});
</script>
</body>
</html>

application.properties

server.port = 8080
server.context-path=/spring-boot-echarts
server.tomcat.uri-encoding=UTF-8
spring.http.encoding.charset=UTF-8
spring.http.encoding.enabled=true
spring.http.encoding.force=true
spring.messages.encoding=UTF-8
spring.mvc.favicon.enabled = true
banner.charset=UTF-8

#### mvc ####
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html; charset=utf-8

#### upload ####
spring.http.multipart.max-file-size=2MB
spring.http.multipart.max-request-size=2MB
storage.location = C\://Temp

5. 启动程序

浏览器访问：http://localhost:8080/spring-boot-echarts/

动态效果如下：

源码地址：https://github.com/ThinkingInGIS/spring-boot-echarts.git

如果觉得本文对你有帮助，是可以赞赏作者的哦

更多干货 欢迎关注微信公众号: ThinkingInGIS