利用Echarts制作地图（一）

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)

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

利用Echarts制作地图（一）

浏览过的版块