应用系统定制开发Vue 使用 Apache Echarts 绘制地图（省市、地区）

目录

大家好呀，时隔半年，应用系统定制开发最近在忙项目，应用系统定制开发没空写文章了，应用系统定制开发最近项目需要，应用系统定制开发研究了一下地图的绘制，应用系统定制开发分享给大家，应用系统定制开发先安利两个网址，应用系统定制开发是制作地图的资源：

一. 配置

应用系统定制开发这个就不再赘述了。

二. 安装 Apache Echarts 

2.1 安装

npm install echarts --save

 2.2 引用

 应用系统定制开发这个不用在main应用系统定制开发中注册使用，应用系统定制开发直接在需要echarts的页面中引入即可。

三. 新建目录

api：用于存放获取（后端、地图JSON数据）数据的文件夹；

json：存放map的数据；

 四. 获取地图的GeoJSON

点击

左侧是地图，右侧是JSON数据路径，点击你想要生成的地图省市、地级（以广西省为例）；

 

点进去是一级，再点进去是二级，直到你想要的省市地区（点击旁边的空白可以返回上一级）；

 然后其右侧有JSON数据的链接地址，可以选择下载下来（放在json文件夹中），也可以使用在线地址！（json API与geoJSON数据地址均可用）

五. 配置api

使用axios获取数据（使用在线链接）：

代码不难，我就不解释了

六. 配置地图信息 

数据都准备好了，我们开始绘制地图：

6.1 引入 Echarts、广西地图数据

import * as echarts from 'echarts';

import getGuangXiMap from './api/getGuangXiMap';

 6.2 准备容器：（使用div、canvas均可）

<div style="width:800px;height:600px" ref="chartsDOM"></div>

解释一下： 1. 需要先指定宽高 ；2. ref标记是为了应和vue获取dom的方式。

6.3 绘制地图

vue在mounted时才能获取到页面DOM，故而地图写在mounted中：

  1.  mounted() {
  2.     // 初始化统计图对象
  3.     var myChart = echarts.init(this.$refs["chartsDOM"]);
  4.     // 显示 loading 动画
  5.     myChart.showLoading();
  6.     // 再得到数据的基础上，进行地图绘制
  7.     getGuangXiMap.then(res => {
  8.       // 得到结果后，关闭动画
  9.       myChart.hideLoading();
  10.       // 注册地图(数据放在axios返回对象的data中哦)
  11.       echarts.registerMap('GX', res.data);
  12.       var option = {
  13.         series: [
  14.           {
  15.             name: '广西地图',
  16.             type: 'map',
  17.             map: 'GX',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
  18.             label: {
  19.               show: true
  20.             }
  21.           }
  22.         ]
  23.       };
  24.       myChart.setOption(option);
  25.     })
  26.   }
  27. }

6.4 即可得到广西的地图啦

 七. Apache Echarts配置项

大家有可能看过apache echarts 的地图配置项，非常多，只是为了实现其他的效果，可以参考 ；后期我会推出【配置式统计图工具】，就是不用大家查阅配置手册啦，通过按钮点击、选择，即可得到你想要的效果，望大家持续关注呀。

7.1 配置数据项

现在大家还是通过查阅配置项手册完善地图信息，下面简单演示一下其他效果：

7.1.1 配置数据

  1. var option = {
  2.         series: [
  3.           {
  4.             name: '广西地图',
  5.             type: 'map',
  6.             map: 'GX',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
  7.             label: {
  8.               show: true
  9.             },
  10.             data: [
  11.               { name: '南宁市', value: 12001 },
  12.               { name: '崇左市', value: 12001 },
  13.               { name: '柳州市', value: 12001 },
  14.               { name: '来宾市', value: 12001 },
  15.               { name: '桂林市', value: 12001 },
  16.               { name: '梧州市', value: 12001 },
  17.               { name: '贺州市', value: 12001 },
  18.               { name: '玉林市', value: 12001 },
  19.               { name: '贵港市', value: 12001 },
  20.               { name: '百色市', value: 12001 },
  21.               { name: '钦州市', value: 12001 },
  22.               { name: '河池市', value: 12001 },
  23.               { name: '北海市', value: 12001 },
  24.               { name: '防城港市', value: 12001 },
  25.             ]
  26.           },
  27.         ]
  28.       };

 7.1.2 配置提示框

  1. var option = {
  2.         tooltip: {},// 配置提示框，有这个配置项即可
  3.         series: [
  4.           {
  5.             name: '广西地图',
  6.             type: 'map',
  7.             map: 'GX',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
  8.             label: {
  9.               show: true
  10.             },
  11.             data: [
  12.               { name: '南宁市', value: 12001 },
  13.               { name: '崇左市', value: 12001 },
  14.               { name: '柳州市', value: 12001 },
  15.               { name: '来宾市', value: 12001 },
  16.               { name: '桂林市', value: 12001 },
  17.               { name: '梧州市', value: 12001 },
  18.               { name: '贺州市', value: 12001 },
  19.               { name: '玉林市', value: 12001 },
  20.               { name: '贵港市', value: 12001 },
  21.               { name: '百色市', value: 12001 },
  22.               { name: '钦州市', value: 12001 },
  23.               { name: '河池市', value: 12001 },
  24.               { name: '北海市', value: 12001 },
  25.               { name: '防城港市', value: 12001 },
  26.             ]
  27.           },
  28.         ]
  29.       };

 

7.1.3 加标题 

  1. var option = {
  2.         title:{
  3.             text:'广西GDP统计图(/万元)'
  4.         },
  5.         tooltip: {},// 配置提示框，有这个配置项即可
  6.         series: [
  7.           {
  8.             name: '广西地图',
  9.             type: 'map',
  10.             map: 'GX',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
  11.             label: {
  12.               show: true
  13.             },
  14.             data: [
  15.               { name: '南宁市', value: 12001 },
  16.               { name: '崇左市', value: 12001 },
  17.               { name: '柳州市', value: 12001 },
  18.               { name: '来宾市', value: 12001 },
  19.               { name: '桂林市', value: 12001 },
  20.               { name: '梧州市', value: 12001 },
  21.               { name: '贺州市', value: 12001 },
  22.               { name: '玉林市', value: 12001 },
  23.               { name: '贵港市', value: 12001 },
  24.               { name: '百色市', value: 12001 },
  25.               { name: '钦州市', value: 12001 },
  26.               { name: '河池市', value: 12001 },
  27.               { name: '北海市', value: 12001 },
  28.               { name: '防城港市', value: 12001 },
  29.             ]
  30.           },
  31.         ]
  32.       };

7.1.4 根据数据配置不同显示颜色

 

详情参考上链接（颜色能否区分，取决于数据的差距程度）；

实现如上。

完整代码如下：

  1.  mounted() {
  2.     // 初始化统计图对象
  3.     var myChart = echarts.init(this.$refs["chartsDOM"]);
  4.     // 显示 loading 动画
  5.     myChart.showLoading();
  6.     // 再得到数据的基础上，进行地图绘制
  7.     getGuangXiMap.then(res => {
  8.       // 得到结果后，关闭动画
  9.       myChart.hideLoading();
  10.       // 注册地图(数据放在axios返回对象的data中哦)
  11.       echarts.registerMap('GX', res.data);
  12.       var option = {
  13.         visualMap: {
  14.           min: 1111,
  15.           max: 333332,
  16.           realtime: false,
  17.           calculable: true,
  18.           inRange: {
  19.             color: ['lightskyblue', 'yellow', 'orangered']
  20.           }
  21.         },
  22.         title: {
  23.           text: '广西GDP统计图(/万元)'
  24.         },
  25.         tooltip: {},
  26.         series: [
  27.           {
  28.             name: '广西地图',
  29.             type: 'map',
  30.             map: 'GX',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
  31.             label: {
  32.               show: true
  33.             },
  34.             data: [
  35.               { name: '南宁市', value: 11111 },
  36.               { name: '崇左市', value: 22221 },
  37.               { name: '柳州市', value: 33333 },
  38.               { name: '来宾市', value: 22231 },
  39.               { name: '桂林市', value: 44441 },
  40.               { name: '梧州市', value: 555525 },
  41.               { name: '贺州市', value: 162475 },
  42.               { name: '玉林市', value: 65454 },
  43.               { name: '贵港市', value: 77771 },
  44.               { name: '百色市', value: 88884 },
  45.               { name: '钦州市', value: 99995 },
  46.               { name: '河池市', value: 10001 },
  47.               { name: '北海市', value: 122222 },
  48.               { name: '防城港市', value: 333332 },
  49.             ]
  50.           },
  51.         ]
  52.       };
  53.       myChart.setOption(option);
  54.     })
  55.   }

八. 绘制中国地图 

步骤同上，演示一下效果：

（修改请求json路径）

  1. mounted() {
  2.     // 初始化统计图对象
  3.     var myChart = echarts.init(this.$refs["chartsDOM"]);
  4.     // 显示 loading 动画
  5.     myChart.showLoading();
  6.     // 再得到数据的基础上，进行地图绘制
  7.     getChinaMap.then(res => {
  8.       // 得到结果后，关闭动画
  9.       myChart.hideLoading();
  10.       // 注册地图(数据放在axios返回对象的data中哦)
  11.       echarts.registerMap('China', res.data);
  12.       var option = {
  13.         series: [
  14.           {
  15.             name: '中国地图',
  16.             type: 'map',
  17.             map: 'China',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
  18.             label: {
  19.               show: true
  20.             },
  21.           },
  22.         ]
  23.       };
  24.       myChart.setOption(option);
  25.     })
  26.   }

 

九. 绘制县级地图

 

就不能再往下绘制了，因为Data V仅支持到县级。如果我就想绘制我们村GDP的情况呢？？哈哈哈  可以使用自定义地图功能。下面简单演示一下：

十. 自定义地图

 

这里有详细的操作教程。

10.1 选择边界生成器

 （绘制上海海洋大学为例）

 

 缩放到合适的尺寸，使得你需要绘制的在视图中心；

使用左侧多边形工具：（千万不要在绘制过程中移动地图！！不然什么都没有了）

 如果绘制不够完整，一定要先双击结束！！然后缩放微调！！！

使用顶点编辑工具，可以新增点，移动点，使得地图的尺寸更加合适（顶点编辑状态下，可以平移地图、缩放操作）：

 

编辑完成后，得到整个区域地图（仅作为示范，不表示实际面积！！）：

 

 地图是由一个区域一个区域组成的，现在只是一块区域，如何拆分呢？

在原地图上，在画一个区域：

 使用差集实现【差集有两种状态，一个是点一下，编程✔，然后依次点击差集得面，就是谁减谁，点了两个面后！再点一下✔，就能实现差集了，两个面就在空间上是一个层次了】：

两个面层叠，很难选择，可以使用下面的属性面板：直接点击即可

 

 差集后，得到如下结果：

完成差集后，会空出来，在画一个，填补该位置：

 这样就有两个图层了

道路使用线：

 

以上就是基础的线面的使用（注意，有的不能识别点！！！）

导出JSON，在vue中使用：

 

10.2 vue中使用自定义地图

保存的自定义地图json文件：

 使用：

  1. <script>
  2. import * as echarts from 'echarts';
  3. import userJSON from './json/1.json'
  4. export default {
  5.   name: 'App',
  6.   mounted() {
  7.     // 初始化统计图对象
  8.     var myChart = echarts.init(this.$refs["chartsDOM"]);
  9.     // 显示 loading 动画
  10.     myChart.showLoading();
  11.     // 关闭动画
  12.     myChart.hideLoading();
  13.     // 注册地图(数据放在axios返回对象的data中哦)
  14.     echarts.registerMap('user', userJSON);
  15.     var option = {
  16.       series: [
  17.         {
  18.           name: '自定义地图',
  19.           type: 'map',
  20.           map: 'user',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
  21.           label: {
  22.             show: true
  23.           },
  24.         }]
  25.     }
  26.     myChart.setOption(option);
  27.  
  28.   }
  29. }
  30. </script>

z 不难理解，不解释啦，不懂的可以提问。

得到下图：

 这样两个面全是一样的了，因此，我们需要在json数据中手动配置些选项：

我们先看看json数据：

两个面、两条线，4个features，在每一个properties中添加name属性：

 

 

 两者不再关联。更多细节需要耐心去刻画，大家加油哈哈哈！

好了，本文就到这里吧，点个赞再走嘛~

 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发