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

  4.0.0

  org.thinkingingis
  spring-boot-echarts
  0.0.1-SNAPSHOT
  jar

  spring-boot-echarts
  http://maven.apache.org

  
    UTF-8
    1.8
  
  
  
  	org.springframework.boot
    spring-boot-starter-parent
    1.5.6.RELEASE
     
  

  
      	
      		org.springframework.boot
      		spring-boot
      	
      	
      		org.springframework.boot
      		spring-boot-autoconfigure
      	
      	
      		org.springframework.boot
      		spring-boot-configuration-processor
      	
      	
      		org.springframework.boot
      		spring-boot-devtools
      	
      	
      		org.springframework.boot
      		spring-boot-loader-tools
      	
      	
      		org.springframework.boot
      		spring-boot-maven-plugin
      		1.4.3.RELEASE
      		maven-plugin
      	
      	
      		org.springframework.boot
      		spring-boot-starter
      	
      	
      		org.springframework.boot
      		spring-boot-starter-logging
      	
      	
      		org.springframework.boot
      		spring-boot-starter-web
      	
      	
      		org.springframework.boot
      		spring-boot-starter-thymeleaf
      	
      	
      		org.springframework.boot
      		spring-boot-starter-tomcat
      	
		
		
		    com.alibaba
		    fastjson
		    1.2.41
		
  
  
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
            
              
                org.apache.maven.plugins  
                maven-compiler-plugin  
                3.5.1  
                  
                    1.8  
                    1.8  
                  
              
            
        
    

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文件

home.html

  	
	
	
	



	
 
				
		
	
			ThinkingInGIS
		
        

            

                

                    

                        

                            
                            
                            
                                
                            
                        
                        
                    
    	            

                    	 统计面板
                    
                
            
        
	
 

    

	    

	        

	            
2018年2月北京各区房价均价
	        
	    
     
        

            

                

                    

                         Echarts 三维地图展示
                    
                    

                         

                    
                
            
        
    



	
             

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