利用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.75zoom: 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.75zoom: 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.75zoom: 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制作地图（一）相关推荐

使用vue echarts 制作地图map
第一步:下载相关地区的json文件,并将下载的文件放到项目文件夹下(下载地址:地图选择器) 该篇以显示四川省地区为例第二步:在vue中引入echarts 1.通过 npm 获取 echarts,np ...
使用echarts制作地图+散点图的实例
一.效果功能 1.可以拖拽和缩放 2.可以点击进入省地图.双击回到中国地图 3.有图例,可以通过图例来筛选散点 4.散点有涟漪效果,且开放label,可以读取name 5.可以自适应分辨率注意事项 ...
python 利用echarts画地图(热力图)(世界地图，省市地图，区县地图)
首先安装对应的python模块 $ pip install pyecharts==0.5.10 $ pip install echarts-countries-pypkg $ pip install ...
Echarts制作态势图、热点图、轨迹图，使用百度底图，地图下钻
记录最近使用echarts制作地图的过程及部分代码: 其中在网络上借鉴了不少优秀的源码,在此感谢他们的开源精神. 先看效果: (一)态势图.热点图.轨迹图及全屏功能全屏效果: (二)改普通地图为百度 ...
详解python 利用 pyecharts 画地图(热力图)(世界地图，省市地图，区县地图)、动态流向图
转载: 详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图) Pyecharts绘制全球流向图 pyecharts中文教程官网目录安装对应的python模块世界 ...
地图统计_博客城市访问量统计并且通过Echarts+百度地图展示
本篇讲解一下如何在Vue 中使用 Echarts + 百度地图统计博客访问量并且通过QQWry 解析 ip 地址利用Echarts 展示出来效果图如下: 1.纯真Ip地址库 QQWry 这 ...
利用 Echarts 简单制作省份或区域地图步骤
用 Echarts 无论是制作省份地图还是区县域地图,他们的步骤都是基本一样的. 下面本人就利用 Echarts 简单绘制省份地图的步骤与经验与各位分享一下. 1.准备工作 1.1 下载js静态文 ...
数据可视化：利用Python和Echarts制作“用户消费行为分析”可视化大屏
数据可视化:利用Python和Echarts制作"用户消费行为分析"可视化大屏前言实验目的: 准备工作: 一.创建项目: 二.建立数据库连接获取数据: 三.页面布局: 四.下载 ...
echarts map地图数据Json制作教程
首先来一个echarts map地图使用的教程(对应地图的数据包我的下载里有 echarts地图离线数据包有需要的可以自行下载或在博客下留言我会单独发你) <!DOCTYPE html> ...

利用Echarts制作地图（一）

利用Echarts制作地图（一）相关推荐

最新文章

热门文章