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>
 

	<div id="map-wrap" style="height: 500px;">

  	</div>

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>
 

啟動專案後，如下圖所示：

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知識。[email protected])