├── .gitignore
├── .idea
    ├── misc.xml
    ├── modules.xml
    └── vcs.xml
├── .onedev-buildspec.yml
├── README.md
├── babel.config.js
├── detail.md
├── dist
    └── favicon.ico
├── echarts-map-demo.iml
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── map.png
├── src
    ├── App.vue
    ├── Github.vue
    ├── MapRange.vue
    ├── MoneyDialog.vue
    ├── StreetDialog.vue
    ├── images
    │   ├── ad.jpg
    │   ├── adimg.js
    │   ├── alipay.png
    │   ├── aojiao.gif
    │   ├── bg_bigdata.png
    │   ├── data_background.png
    │   ├── love.jpg
    │   ├── pay.jpg
    │   └── wxpay.jpg
    ├── main.js
    ├── mapDataDialog.vue
    └── saveAs.js
├── vue.config.js
├── yarn.lock
└── 全国省市区geoJson数据包.zip


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="JavaScriptSettings">
4 |     <option name="languageLevel" value="ES6" />
5 |   </component>
6 |   <component name="ProjectRootManager">
7 |     <output url="file://$PROJECT_DIR$/out" />
8 |   </component>
9 | </project>


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/echarts-map-demo.iml" filepath="$PROJECT_DIR$/echarts-map-demo.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="" vcs="Git" />
5 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
6 |   </component>
7 | </project>


--------------------------------------------------------------------------------
/.onedev-buildspec.yml:
--------------------------------------------------------------------------------
 1 | version: 18
 2 | jobs:
 3 | - name: CI/CD
 4 |   jobExecutor: internal
 5 |   steps:
 6 |   - !CheckoutStep
 7 |     name: checkout
 8 |     cloneCredential: !DefaultCredential {}
 9 |     withLfs: false
10 |     withSubmodules: false
11 |     condition: ALL_PREVIOUS_STEPS_WERE_SUCCESSFUL
12 |   - !CommandStep
13 |     name: build
14 |     runInContainer: false
15 |     interpreter: !DefaultInterpreter
16 |       commands:
17 |       - yarn
18 |       - yarn build
19 |       - ''
20 |       - cd ./dist
21 |       - tar -zcvf dist.tar.gz *
22 |       - mv dist.tar.gz /usr/share/nginx/hxkj/dist/demo/echartsMap
23 |       - cd /usr/share/nginx/hxkj/dist/demo/echartsMap/
24 |       - tar -zxvf dist.tar.gz
25 |       - rm -f dist.tar.gz
26 |     useTTY: false
27 |     condition: ALL_PREVIOUS_STEPS_WERE_SUCCESSFUL
28 |   triggers:
29 |   - !BranchUpdateTrigger
30 |     branches: master
31 |   retryCondition: never
32 |   maxRetries: 3
33 |   retryDelay: 30
34 |   cpuRequirement: 250
35 |   memoryRequirement: 256
36 |   timeout: 3600
37 | - name: Push to GitHub
38 |   jobExecutor: internal
39 |   steps:
40 |   - !CheckoutStep
41 |     name: checkout
42 |     cloneCredential: !DefaultCredential {}
43 |     withLfs: false
44 |     withSubmodules: false
45 |     condition: ALL_PREVIOUS_STEPS_WERE_SUCCESSFUL
46 |   - !CommandStep
47 |     name: push
48 |     runInContainer: false
49 |     interpreter: !DefaultInterpreter
50 |       commands:
51 |       - git config user.name "TangSY"
52 |       - git config user.email "337828932@@qq.com"
53 |       - git remote set-url origin git@@github.com:TangSY/echarts-map-demo.git
54 |       - git remote -v
55 |       - git push
56 |     useTTY: false
57 |     condition: ALL_PREVIOUS_STEPS_WERE_SUCCESSFUL
58 |   triggers:
59 |   - !BranchUpdateTrigger {}
60 |   - !TagCreateTrigger {}
61 |   retryCondition: never
62 |   maxRetries: 30
63 |   retryDelay: 30
64 |   cpuRequirement: 250
65 |   memoryRequirement: 256
66 |   timeout: 3600
67 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![license](https://img.shields.io/badge/license-MIT-blue.svg)
 2 | [![author](https://img.shields.io/badge/author-HashTang-orange.svg)](https://www.hxkj.vip)
 3 | 
 4 | # echarts map
 5 | 
 6 | 通过地图 API 获取实时最新的 geojson 数据，摆脱 geojson 文件数据过期的烦恼。
 7 | 省市区县下钻。实现真正的下钻至县级，而不是只到市级。
 8 | 亦可下载最新 geojson 数据。
 9 | 
10 | 项目介绍：[https://www.jianshu.com/p/c293c94d9ab7](https://www.jianshu.com/p/c293c94d9ab7)
11 | 
12 | 体验地址：[https://geojson.hxkj.vip](https://geojson.hxkj.vip)
13 | 
14 | #### 上述体验地址中可获取省市区县乡镇四级边界数据；以及四级联动或五级（村级）行政名称与编码对应关系
15 | 
16 | 码云地址：[https://gitee.com/HashTang/echarts-map-demo](https://gitee.com/HashTang/echarts-map-demo)
17 | 
18 | 页面效果图：
19 | 
20 | ![map](https://geojson.hxkj.vip/map.png)
21 | 
22 | ### 赞助
23 | 
24 | [赞助二维码](https://raw.githubusercontent.com/TangSY/echarts-map-demo/master/src/images/pay.jpg)
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }


--------------------------------------------------------------------------------
/detail.md:
--------------------------------------------------------------------------------
  1 | #####首先，来看下效果图
  2 | ![map.gif](https://upload-images.jianshu.io/upload_images/7412714-3edd0e7bc2c810fa.gif?imageMogr2/auto-orient/strip)
  3 | 
  4 | 在线体验地址：[https://hxkj.vip/demo/echartsMap/](https://hxkj.vip/demo/echartsMap/)，并提供实时 geoJson 数据文件下载
  5 | echarts 官方社区链接地址（可在线编辑）：[https://gallery.echartsjs.com/editor.html?c=xmCAi_XNuJ](https://gallery.echartsjs.com/editor.html?c=xmCAi_XNuJ)
  6 | 
  7 | > 前段时间给公司弄了一套基于 echarts map 的地图数据展示的平台，开发过程中发现百度官方已经不提供地图下载了，于是只能期望能在网上搜到哪位大佬帮忙收集的 json 文件。找是找到了，然鹅发现大部分都年代久远了，很多地区其实已经重新划分行政区划了。
  8 | > 所以，只能想想其他办法了，回想起平常使用高德地图搜索某个地名的时候，好像会有个边界区域给我们绘制出来，然后我就觉得它既然能画出来，应该会有办法从某些渠道获取，或者高德地图会提供相应的 API。于是乎，去到了高德开放平台仔细的查看了一下他提供的 api，哈哈，果然有！有了接口，接下来就是撸码了。
  9 | 
 10 | ####第一步，通过高德 api 获取边界数据
 11 | 通过查阅 API 文档可以知道，获取边界数据的接口为行政区查询服务（`AMap.DistrictSearch`）。使用该服务之前记得去申请一个 key，用于调用高德接口，申请地址直通车：[https://lbs.amap.com/dev/key/app](https://lbs.amap.com/dev/key/app)。
 12 | #####1、在页面添加 JS API 的入口脚本标签，并将其中「您申请的 key 值」替换为您刚刚申请的 key；
 13 | 
 14 | ```
 15 | <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=「您申请的key值」&plugin=AMap.DistrictSearch"></script>
 16 | ```
 17 | 
 18 | #####2、通过以下方式获取数据，以获取中国地图为例；
 19 | 
 20 | ```
 21 | this.opts = {
 22 |     subdistrict: 1,   //返回下一级行政区
 23 |     showbiz: false  //最后一级返回街道信息
 24 | };
 25 | this.district = new AMap.DistrictSearch(this.opts);//注意：需要使用插件同步下发功能才能这样直接使用
 26 | this.district.search('中国', (status, result) => {
 27 |     if (status == 'complete') {
 28 |         this.getData(result.districtList[0], '', 100000);
 29 |     }
 30 | });
 31 | getData(data, level, adcode) {//处理获取出来的边界数据
 32 |     var subList = data.districtList;
 33 |     if (subList) {
 34 |         var curlevel = subList[0].level;
 35 |         if (curlevel === 'street') {//为了配合echarts地图区县名称显示正常，这边街道级别数据需要特殊处理
 36 |             let mapJsonList = this.geoJsonData.features;
 37 |             let mapJson = {};
 38 |             for (let i in mapJsonList) {
 39 |                 if (mapJsonList[i].properties.name == this.cityName) {
 40 |                     mapJson.features = [].concat(mapJsonList[i]);
 41 |                 }
 42 |             }
 43 |             this.mapData = [];
 44 |             //这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
 45 |             this.mapData.push({name: this.cityName, value: Math.random() * 100, level: curlevel});
 46 |             this.loadMap(this.cityName, mapJson);
 47 |             this.geoJsonData = mapJson;
 48 |             return;
 49 |         }
 50 | 
 51 |         //街道级以上的数据处理方式
 52 |         this.mapData = [];
 53 |         for (var i = 0, l = subList.length; i < l; i++) {
 54 |             var name = subList[i].name;
 55 |             var cityCode = subList[i].adcode;
 56 |             //这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
 57 |             this.mapData.push({
 58 |                 name: name,
 59 |                 value: Math.random() * 100,
 60 |                 cityCode: cityCode,
 61 |                 level: curlevel
 62 |             });
 63 |         }
 64 |         this.loadMapData(adcode);
 65 |     }
 66 | },
 67 | ```
 68 | 
 69 | #####3、接下来，利用 `AMapUI.loadUI`可以构造一个创建一个 `DistrictExplorer` 实例，然后利用 `DistrictExplorer` 的实例，可以根据当前需要加载城市的 `areaCode`获取到该城市的 `geo` 数据
 70 | 
 71 | ```
 72 | loadMapData(areaCode) {
 73 |     AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
 74 | 
 75 |         //创建一个实例
 76 |         var districtExplorer = window.districtExplorer = new DistrictExplorer({
 77 |             eventSupport: true, //打开事件支持
 78 |             map: this.map
 79 |         });
 80 | 
 81 |         districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
 82 | 
 83 |             if (error) {
 84 |                 console.error(error);
 85 |                 return;
 86 |             }
 87 |             let mapJson = {};
 88 |             //特别注意这里哦，如果查看过正常的geojson文件，都会发现，文件都是以features 字段开头的，所以这里要记得加上
 89 |             mapJson.features = areaNode.getSubFeatures();
 90 |             this.loadMap(this.cityName, mapJson);
 91 |         });
 92 |     });
 93 | },
 94 | ```
 95 | 
 96 | ####第二步，用 echarts 把边界数据渲染出来
 97 | 我这边使用的 echarts 版本为当前的最新版`4.2.0`，相关文档查阅地址传送门：[https://echarts.baidu.com/option.html#series-map](https://echarts.baidu.com/option.html#series-map)。千万别看错文档了，他好几个版本放在一起，关键是每个版本某些属性会不一样，所以要特别注意文档的版本与引入的 echarts 版本保持一致。
 98 | #####1、在页面引入 JS 文件，我这边引入的`bootstrap cdn`提供的文件
 99 | 
100 | ```
101 | <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
102 | ```
103 | 
104 | #####2、注册 echarts 并使用刚刚通过高德 API 获取的数据渲染成 map
105 | 
106 | ```
107 | //html
108 | <div id="map"></div>
109 | 
110 | //注册并赋值给echartsMap
111 | this.echartsMap = this.$echarts.init(document.getElementById('map'));
112 | 
113 | //通过loadMap函数加载地图
114 | loadMap(mapName, data) {
115 |     if (data) {
116 |         this.$echarts.registerMap(mapName, data);//把geoJson数据注入echarts
117 |       //配置echarts的option
118 |         var option = {
119 |             visualMap: {
120 |                 type: 'piecewise',
121 |                 pieces: [
122 |                     {max: 30, label: '安全', color: '#2c9a42'},
123 |                     {min: 30, max: 60, label: '警告', color: '#d08a00'},
124 |                     {min: 60, label: '危险', color: '#c23c33'},
125 |                 ],
126 |                 color: '#fff',
127 |                 textStyle: {
128 |                     color: '#fff',
129 |                 },
130 |                 visibility: 'off'
131 |             },
132 |             series: [{
133 |                 name: '数据名称',
134 |                 type: 'map',
135 |                 roam: false,
136 |                 mapType: mapName,
137 |                 selectedMode: 'single',
138 |                 showLegendSymbol: false,
139 |                 visibility: 'off',
140 |                 itemStyle: {
141 |                     normal: {
142 |                         color: '#ccc',
143 |                         areaColor: '#fff',
144 |                         borderColor: '#fff',
145 |                         borderWidth: 0.5,
146 |                         label: {
147 |                             show: true,
148 |                             textStyle: {
149 |                                 color: "rgb(249, 249, 249)"
150 |                             }
151 |                         }
152 |                     },
153 |                     emphasis: {
154 |                         areaColor: false,
155 |                         borderColor: '#fff',
156 |                         areaStyle: {
157 |                             color: '#fff'
158 |                         },
159 |                         label: {
160 |                             show: true,
161 |                             textStyle: {
162 |                                 color: "rgb(249, 249, 249)"
163 |                             }
164 |                         }
165 |                     }
166 |                 },
167 |                 data: this.mapData,//这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
168 |             }]
169 |         };
170 |         this.echartsMap.setOption(option);
171 |     }
172 | },
173 | ```
174 | 
175 | 做完这一步，如果不出问题，中国地图已经安静的躺在你的屏幕上了！ ####第三步，实现省市区县下探功能
176 | #####1、添加点击事件
177 | 
178 | ```
179 | this.echartsMap.on('click', this.echartsMapClick);
180 | 
181 | echartsMapClick(params) {//地图点击事件
182 |     if (params.data.level == 'street') return;//此处的params.data为this.mapData里的数据
183 |     this.cityCode = params.data.cityCode;
184 |     //行政区查询
185 |     //按照adcode进行查询可以保证数据返回的唯一性
186 |     this.district.search(this.cityCode, (status, result) => {
187 |         if (status === 'complete') {
188 |             this.getData(result.districtList[0], params.data.level, this.cityCode);//这个getData函数在前面已经定义过了
189 |         }
190 |     });
191 | },
192 | ```
193 | 
194 | ####此项目这边是基于`VUE`开发的，看完之后有什么不懂的，可以留言说明.
195 | 
196 | 项目 GitHub 地址：https://github.com/TangSY/echarts-map-demo
197 | 
198 | > 转载请注明出处：https://www.jianshu.com/p/c293c94d9ab7
199 | > 作者：TSY
200 | > 个人空间：https://www.hxkj.vip
201 | 


--------------------------------------------------------------------------------
/dist/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TangSY/echarts-map-demo/0f39333fb199105a78e786c79a3d7119c8373b4c/dist/favicon.ico


--------------------------------------------------------------------------------
/echarts-map-demo.iml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <module type="WEB_MODULE" version="4">
3 |   <component name="NewModuleRootManager" inherit-compiler-output="true">
4 |     <exclude-output />
5 |     <content url="file://$MODULE_DIR$" />
6 |     <orderEntry type="inheritedJdk" />
7 |     <orderEntry type="sourceFolder" forTests="false" />
8 |   </component>
9 | </module>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "multiple-list-demo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "echarts": "^5.5.1",
12 |     "jszip": "^3.8.0",
13 |     "vue": "^2.5.17",
14 |     "vue-ba": "^1.2.5"
15 |   },
16 |   "devDependencies": {
17 |     "@babel/preset-es2015": "^7.0.0-beta.51",
18 |     "@vue/cli-plugin-babel": "^3.5.1",
19 |     "@vue/cli-plugin-eslint": "^3.0.0-beta.15",
20 |     "@vue/cli-service": "^3.0.0-beta.15",
21 |     "babel-plugin-component": "^1.1.1",
22 |     "stylus": "^0.54.5",
23 |     "stylus-loader": "^3.0.2",
24 |     "vue-template-compiler": "^2.5.16"
25 |   },
26 |   "eslintConfig": {
27 |     "root": false,
28 |     "env": {
29 |       "node": false
30 |     },
31 |     "extends": [
32 |       "plugin:vue/essential",
33 |       "eslint:recommended"
34 |     ],
35 |     "rules": {},
36 |     "parserOptions": {
37 |       "parser": "babel-eslint"
38 |     }
39 |   },
40 |   "postcss": {
41 |     "plugins": {
42 |       "autoprefixer": {}
43 |     }
44 |   },
45 |   "browserslist": [
46 |     "> 1%",
47 |     "last 2 versions",
48 |     "not ie <= 8"
49 |   ]
50 | }
51 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TangSY/echarts-map-demo/0f39333fb199105a78e786c79a3d7119c8373b4c/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 |     <title>echarts-map最新实时geoJson文件下载_hxkj.vip_HashTang</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong
13 |         >We're sorry but multiple-list-demo doesn't work properly without
14 |         JavaScript enabled. Please enable it to continue.</strong
15 |       >
16 |     </noscript>
17 |     <div id="app"></div>
18 |     <script type="text/javascript">
19 |       window._AMapSecurityConfig = {
20 |         serviceHost: "https://amap.hxkj.vip/_AMapService",
21 |       };
22 |     </script>
23 |     <!-- built files will be auto injected -->
24 |     <script
25 |       type="text/javascript"
26 |       src="//webapi.amap.com/maps?v=1.4.15&key=045b0b71ee6567f502fc2b3ee7d0441d"
27 |     ></script>
28 |     <script
29 |       type="text/javascript"
30 |       src="https://webapi.amap.com/maps?v=1.4.15&key=045b0b71ee6567f502fc2b3ee7d0441d&plugin=AMap.DistrictSearch"
31 |     ></script>
32 |     <!-- UI组件库 1.0 -->
33 |     <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/public/map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TangSY/echarts-map-demo/0f39333fb199105a78e786c79a3d7119c8373b4c/public/map.png


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | /**
  2 | * @Description:    下载geoJson文件
  3 | * @Author:         TSY
  4 | * @CreateDate:     2018/9/5 9:04
  5 | * @email:          t@tsy6.com
  6 | */
  7 | <template>
  8 |   <div class="body">
  9 |     <div class="map">
 10 |       <map-range
 11 |         :download-tips="downloadTips"
 12 |         @change="search"
 13 |         @click="downloadJson"
 14 |       ></map-range>
 15 |     </div>
 16 |     <div class="echarts">
 17 |       <div id="map"></div>
 18 |     </div>
 19 |     <div class="tips" v-show="isShowTips">
 20 |       正在下载，请耐心等待。。。(可打开控制台查看进度详情)
 21 |     </div>
 22 |     <!--哎呀呀，这就是打赏弹窗，为方便你们删除，就单独抽出一个组件来吧-->
 23 |     <money-dialog ref="dialog" @confirm="dialogConfirm"></money-dialog>
 24 |     <!--github入口-->
 25 |     <github></github>
 26 |     <!-- GG位 -->
 27 |     <div class="gg" v-if="isShowAD">
 28 |       <div class="gg-close" @click="isShowAD = false"></div>
 29 |       <img @click="openAd" :src="AD_IMG" alt="" />
 30 |     </div>
 31 |     <!--乡镇数据弹窗-->
 32 |     <street-dialog ref="streetDialog" @confirm="contact"></street-dialog>
 33 |     <!--乡镇级联数据下载弹窗-->
 34 |     <map-data-dialog ref="mapDataDialog" @confirm="contact"></map-data-dialog>
 35 |   </div>
 36 | </template>
 37 | 
 38 | <script>
 39 | import JSZip from "jszip";
 40 | import saveAs from "./saveAs";
 41 | import MapRange from "./MapRange";
 42 | import MoneyDialog from "./MoneyDialog";
 43 | import StreetDialog from "./StreetDialog";
 44 | import mapDataDialog from "./mapDataDialog";
 45 | import Github from "./Github";
 46 | import { AD_IMG } from "./images/adimg";
 47 | 
 48 | export default {
 49 |   name: "demo",
 50 |   components: {
 51 |     Github,
 52 |     MoneyDialog,
 53 |     StreetDialog,
 54 |     mapDataDialog,
 55 |     MapRange,
 56 |   },
 57 |   data() {
 58 |     return {
 59 |       AD_IMG,
 60 |       isShowAD: true,
 61 |       nameType: "",
 62 |       cityName: "中国",
 63 |       areaCode: 10000,
 64 |       geoJsonData: "",
 65 |       echartsMap: null,
 66 |       map: null,
 67 |       uimap: null,
 68 |       district: null,
 69 |       polygons: [],
 70 |       cityCode: 100000,
 71 |       citySelect: null,
 72 |       districtSelect: null,
 73 |       opts: {},
 74 |       areaData: {},
 75 |       mapData: [],
 76 |       zip: {}, //打包zip
 77 |       codeList: [],
 78 |       loadedNode: {}, // 记录已加载项
 79 |       waitToLoadList: [],
 80 |       loadingThreads: new Array(8).fill(null), // 8个并发
 81 | 
 82 |       isCodeListLoadComplete: false, //codeList是否全部获取完毕
 83 |       downloadTips: "下载geoJson数据", //下载进度提示
 84 |       isShowTips: false, //是否显示下载提示
 85 |     };
 86 |   },
 87 |   mounted() {
 88 |     //实例化zip对象
 89 |     this.zip = new JSZip();
 90 | 
 91 |     this.citySelect = document.getElementById("city");
 92 |     this.districtSelect = document.getElementById("district");
 93 |     this.echartsMap = this.$echarts.init(document.getElementById("map"));
 94 |     this.echartsMap.on("click", this.echartsMapClick);
 95 | 
 96 |     this.map = new AMap.Map("container", {
 97 |       resizeEnable: true,
 98 |       center: [116.30946, 39.937629],
 99 |       zoom: 3,
100 |     });
101 |     this.opts = {
102 |       subdistrict: 1, //返回下一级行政区
103 |       showbiz: false, //最后一级返回街道信息
104 |     };
105 |     this.district = new AMap.DistrictSearch(this.opts); //注意：需要使用插件同步下发功能才能这样直接使用
106 |     this.district.search("中国", (status, result) => {
107 |       if (status == "complete") {
108 |         this.getData(result.districtList[0], "", 100000);
109 |       }
110 |     });
111 |   },
112 |   watch: {
113 |     isCodeListLoadComplete(val) {
114 |       if (val) {
115 |         this.loadAllGeoJson();
116 |       }
117 |     },
118 |   },
119 |   methods: {
120 |     downloadMapCode() {
121 |       // 下载mapCode数据
122 |       let mapCode = [],
123 |         cityMapCode = [],
124 |         provinceMapCode = [],
125 |         provinceList = [],
126 |         cityList = [],
127 |         districtList = [];
128 | 
129 |       provinceList = this.codeList.filter((item) => {
130 |         return item.level === "province";
131 |       });
132 |       cityList = this.codeList.filter((item) => {
133 |         return item.level === "city";
134 |       });
135 |       districtList = this.codeList.filter((item) => {
136 |         return item.level === "district";
137 |       });
138 | 
139 |       districtList.forEach((item) => {
140 |         mapCode.push({
141 |           name: item.name,
142 |           cityCode: item.code,
143 |           fatherCode: `${item.code.substring(0, 4)}00`,
144 |           children: [],
145 |         });
146 |       });
147 | 
148 |       // 筛选出直辖市下面的区县
149 |       let direct = mapCode.filter((item) => {
150 |         return item.fatherCode.includes("0000");
151 |       });
152 | 
153 |       for (let i in cityList) {
154 |         let children = [];
155 |         for (let j in mapCode) {
156 |           if (mapCode[j].fatherCode == cityList[i].code) {
157 |             children.push(mapCode[j]);
158 |           }
159 |         }
160 |         cityMapCode.push({
161 |           name: cityList[i].name,
162 |           cityCode: cityList[i].code,
163 |           fatherCode: `${cityList[i].code.substring(0, 2)}0000`,
164 |           children: children,
165 |         });
166 |       }
167 |       cityMapCode = cityMapCode.concat(direct);
168 | 
169 |       for (let i in provinceList) {
170 |         let children = [];
171 |         for (let j in cityMapCode) {
172 |           if (cityMapCode[j].fatherCode == provinceList[i].code) {
173 |             children.push(cityMapCode[j]);
174 |           }
175 |         }
176 |         provinceMapCode.push({
177 |           name: provinceList[i].name,
178 |           cityCode: provinceList[i].code,
179 |           fatherCode: "100000",
180 |           children: children,
181 |         });
182 |       }
183 | 
184 |       if (provinceMapCode.length === 0) return;
185 |       this.zip.file(`mapCode.json`, JSON.stringify(provinceMapCode));
186 |       this.downloadTips = "文件打包压缩中...";
187 |       this.zip.generateAsync({ type: "blob" }).then((content) => {
188 |         saveAs(content, "mapCode.zip");
189 |       });
190 |     },
191 |     // 下载全国地名和编码（不包含边界数据）
192 |     downloadNameAndCode() {
193 |       let opts = {
194 |         subdistrict: 3, //返回下一级行政区
195 |         showbiz: false, //最后一级返回街道信息
196 |       };
197 |       let district = new AMap.DistrictSearch(opts); //注意：需要使用插件同步下发功能才能这样直接使用
198 |       district.search("中国", function (status, result) {
199 |         if (status === "complete") {
200 |           getData(result.districtList[0]);
201 |         }
202 |       });
203 |       let _this = this;
204 |       function getData(data) {
205 |         let districtList = data.districtList;
206 | 
207 |         let blob = new Blob([JSON.stringify(districtList)], {
208 |           type: "text/plain;charset=utf-8",
209 |         });
210 |         let filename = "全国省市区县街道和编码（不包含边界数据）";
211 |         _this.$ba &&
212 |           this.$ba.trackEvent(
213 |             "echartsMap",
214 |             "全国省市区县街道和编码（不包含边界数据）下载",
215 |             filename
216 |           );
217 |         saveAs(blob, `${filename}.json`); //filename
218 |       }
219 |     },
220 |     echartsMapClick(params) {
221 |       //地图点击事件
222 |       this.$ba &&
223 |         this.$ba.trackEvent(
224 |           "echartsMap",
225 |           "点击地图",
226 |           `${params.data.name}-${params.data.cityCode}`
227 |         );
228 |       if (params.data.level == "street") return;
229 |       //清除地图上所有覆盖物
230 |       for (var i = 0, l = this.polygons.length; i < l; i++) {
231 |         this.polygons[i].setMap(null);
232 |       }
233 |       this.cityName = params.data.name;
234 |       this.cityCode = params.data.cityCode;
235 |       this.district.setLevel(params.data.level); //行政区级别
236 |       this.district.setExtensions("all");
237 |       //行政区查询
238 |       //按照adcode进行查询可以保证数据返回的唯一性
239 |       this.district.search(this.cityCode, (status, result) => {
240 |         if (status === "complete") {
241 |           this.getData(
242 |             result.districtList[0],
243 |             params.data.level,
244 |             this.cityCode
245 |           );
246 |         }
247 |       });
248 |     },
249 |     loadMapData(areaCode) {
250 |       AMapUI.loadUI(["geo/DistrictExplorer"], (DistrictExplorer) => {
251 |         //创建一个实例
252 |         var districtExplorer = (window.districtExplorer = new DistrictExplorer({
253 |           eventSupport: true, //打开事件支持
254 |           map: this.map,
255 |         }));
256 | 
257 |         districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
258 |           if (error) {
259 |             console.error(error);
260 |             return;
261 |           }
262 |           let mapJson = {};
263 |           mapJson.type = "FeatureCollection";
264 |           mapJson.features = areaNode.getSubFeatures();
265 |           this.loadMap(this.cityName, mapJson);
266 |           this.geoJsonData = mapJson;
267 |         });
268 |       });
269 |     },
270 |     showTips() {
271 |       this.isShowTips = true;
272 |       setTimeout(() => {
273 |         this.isShowTips = false;
274 |       }, 3000);
275 |     },
276 |     downloadJson(nameType) {
277 |       //geo文件下载
278 |       this.nameType = nameType;
279 |       if (nameType === "area") {
280 |         this.$ba &&
281 |           this.$ba.trackEvent("echartsMap", "文件下载", "下载级联数据");
282 |         this.$refs.dialog.show();
283 |         return;
284 |       }
285 |       if (nameType === "all") {
286 |         this.$ba &&
287 |           this.$ba.trackEvent("echartsMap", "文件下载", "打包下载全部");
288 |         this.$refs.dialog.show();
289 |         return;
290 |       }
291 |       if (nameType === "street") {
292 |         this.$ba &&
293 |           this.$ba.trackEvent("echartsMap", "文件下载", "下载乡镇数据");
294 |         this.$refs.streetDialog.show();
295 |         return;
296 |       }
297 |       var blob = new Blob([JSON.stringify(this.geoJsonData)], {
298 |         type: "text/plain;charset=utf-8",
299 |       });
300 |       let filename = this.cityName;
301 |       if (nameType === "code") {
302 |         filename = this.cityCode;
303 |       }
304 |       this.$ba && this.$ba.trackEvent("echartsMap", "文件下载", filename);
305 |       saveAs(blob, `${filename}.geoJson`); //filename
306 |     },
307 |     dialogConfirm() {
308 |       if (this.nameType === "area") {
309 |         this.$refs.mapDataDialog.show();
310 |       } else {
311 |         this.downloadAllJson();
312 |       }
313 |     },
314 |     downloadAllJson() {
315 |       //一次打包下载所有的数据
316 |       this.showTips();
317 |       if (this.downloadTips != "下载geoJson数据") {
318 |         return;
319 |       }
320 |       this.codeList = [];
321 | 
322 |       this.downloadTips = "获取数据中...";
323 | 
324 |       //                this.district.setLevel('country'); //行政区级别
325 |       this.district.setExtensions("all");
326 |       console.log("开始递归循环获取地区code..");
327 |       this.loopSearch("中国");
328 |     },
329 |     loopSearch(code) {
330 |       if (this.loadedNode[code]) return console.warn("已加载过", code);
331 |       this.waitToLoadList.push(code);
332 |       this.loopSearchOnce();
333 |     },
334 |     loadingComplete() {
335 |       this.isCodeListLoadComplete = true;
336 |     },
337 |     loopSearchOnce() {
338 |       const pools = this.loadingThreads;
339 |       const idle_thread = pools.findIndex((i) => !i);
340 |       if (idle_thread === -1) return;
341 |       const code = this.waitToLoadList.shift();
342 |       if (!code) {
343 |         const active_thread = pools.find((i) => i);
344 |         if (!active_thread) return this.loadingComplete();
345 |         return;
346 |       }
347 |       this.loadedNode[code] = true;
348 |       pools[idle_thread] = new Promise((res, rej) => {
349 |         this.district.search(code, (status, result) => {
350 |           if (status !== "complete") {
351 |             return rej(status);
352 |           }
353 |           console.log(
354 |             `线程${idle_thread + 1}/${pools.length}:${code}--获取成功`
355 |           );
356 |           const item = result.districtList[0];
357 |           const children = item.districtList;
358 | 
359 |           children &&
360 |             children.map((i) => {
361 |               const { name, adcode, level } = i;
362 |               this.codeList.push({ name, adcode, level, code: adcode });
363 |               if ("city|district|street".indexOf(i.level) === -1)
364 |                 this.loopSearch(i.adcode);
365 |             });
366 |           return res(code);
367 |         });
368 |       })
369 |         .catch(() => {
370 |           this.loadedNode[code] = false; // 重置为需要获取
371 |           this.loopSearch(code);
372 |         })
373 |         .finally(() => {
374 |           pools[idle_thread] = null; // 设置线程可用
375 |           this.loopSearchOnce();
376 |         });
377 |     },
378 |     loadAllGeoJson() {
379 |       //通过codeList加载全部geoJson数据
380 |       console.log("开始加载geoJson数据");
381 |       AMapUI.loadUI(["geo/DistrictExplorer"], (DistrictExplorer) => {
382 |         //创建一个实例
383 |         var districtExplorer = (window.districtExplorer = new DistrictExplorer({
384 |           eventSupport: true, //打开事件支持
385 |           map: this.map,
386 |         }));
387 |         let mapJson = {};
388 |         const list = this.codeList;
389 |         const tasks = list.map(
390 |           (i) =>
391 |             new Promise((res, rej) => {
392 |               districtExplorer.loadAreaNode(i.code, (error, areaNode) => {
393 |                 if (error) {
394 |                   console.log(
395 |                     `${i.name}--${i.code}，geo 数据获取失败，高德地图的锅^_^`
396 |                   );
397 |                   return res();
398 |                 }
399 |                 mapJson.type = "FeatureCollection";
400 |                 mapJson.features =
401 |                   (areaNode && areaNode.getSubFeatures()) || "";
402 |                 console.log(
403 |                   `${i.level}--${i.name}--${i.code}，geo 数据获取成功，马上为你打包`
404 |                 );
405 |                 if (i.level === "province") {
406 |                   this.zip.file(
407 |                     `100000/${i.code}.geoJson`,
408 |                     JSON.stringify(mapJson)
409 |                   );
410 |                 } else {
411 |                   this.zip.file(
412 |                     `100000/${i.code.substring(0, 2)}0000/${i.code}.geoJson`,
413 |                     JSON.stringify(mapJson)
414 |                   );
415 |                 }
416 |                 return res();
417 |               });
418 |             })
419 |         );
420 |         console.log("总文件个数：", tasks.length);
421 |         let count = 1;
422 |         tasks.forEach(async (task) => {
423 |           await task;
424 |           count++;
425 |           if (count === tasks.length) {
426 |             console.log("ziped");
427 |             let readme = `\r\n项目源码github地址：https://github.com/TangSY/echarts-map-demo （欢迎star）\r\n个人空间：https://www.hxkj.vip （欢迎闲逛）\r\nEmail：t@tsy6.com  （遇到问题可以反馈）`;
428 |             this.zip.file(`readMe(sourceCode).txt`, readme);
429 |             this.downloadTips = "文件打包压缩中...";
430 |             this.zip.generateAsync({ type: "blob" }).then((content) => {
431 |               saveAs(content, "geoJson数据包.zip");
432 |               this.downloadTips = "下载geoJson数据";
433 |               this.isCodeListLoadComplete = false;
434 |               this.$ba &&
435 |                 this.$ba.trackEvent("echartsMap", "文件下载", "打包下载成功");
436 |             });
437 |           }
438 |         });
439 |       });
440 |     },
441 |     loadMap(mapName, data) {
442 |       if (data) {
443 |         this.$echarts.registerMap(mapName, data);
444 |         var option = {
445 |           visualMap: {
446 |             type: "piecewise",
447 |             pieces: [
448 |               { max: 30, label: "安全", color: "#2c9a42" },
449 |               { min: 30, max: 60, label: "警告", color: "#d08a00" },
450 |               { min: 60, label: "危险", color: "#c23c33" },
451 |             ],
452 |             color: "#fff",
453 |             textStyle: {
454 |               color: "#fff",
455 |             },
456 |             visibility: "off",
457 |           },
458 |           series: [
459 |             {
460 |               name: "数据名称",
461 |               type: "map",
462 |               roam: false,
463 |               mapType: mapName,
464 |               selectedMode: "single",
465 |               showLegendSymbol: false,
466 |               visibility: "off",
467 |               itemStyle: {
468 |                 normal: {
469 |                   color: "#ccc",
470 |                   areaColor: "#fff",
471 |                   borderColor: "#fff",
472 |                   borderWidth: 0.5,
473 |                   label: {
474 |                     show: true,
475 |                     textStyle: {
476 |                       color: "rgb(249, 249, 249)",
477 |                     },
478 |                   },
479 |                 },
480 |                 emphasis: {
481 |                   areaColor: false,
482 |                   borderColor: "#fff",
483 |                   areaStyle: {
484 |                     color: "#fff",
485 |                   },
486 |                   label: {
487 |                     show: true,
488 |                     textStyle: {
489 |                       color: "rgb(249, 249, 249)",
490 |                     },
491 |                   },
492 |                 },
493 |               },
494 |               data: this.mapData,
495 |             },
496 |           ],
497 |         };
498 |         this.echartsMap.setOption(option);
499 |       }
500 |     },
501 |     getData(data, level, adcode) {
502 |       var bounds = data.boundaries;
503 |       if (bounds) {
504 |         for (var i = 0, l = bounds.length; i < l; i++) {
505 |           var polygon = new AMap.Polygon({
506 |             map: this.map,
507 |             strokeWeight: 1,
508 |             strokeColor: "#0091ea",
509 |             fillColor: "#80d8ff",
510 |             fillOpacity: 0.2,
511 |             path: bounds[i],
512 |           });
513 |           this.polygons.push(polygon);
514 |         }
515 |         this.map.setFitView(); //地图自适应
516 |       }
517 | 
518 |       //清空下一级别的下拉列表
519 |       if (level === "province") {
520 |         this.citySelect.innerHTML = "";
521 |         this.districtSelect.innerHTML = "";
522 |       } else if (level === "city") {
523 |         this.districtSelect.innerHTML = "";
524 |       }
525 | 
526 |       var subList = data.districtList;
527 |       if (subList) {
528 |         var contentSub = new Option("--请选择--");
529 |         var curlevel = subList[0].level;
530 |         if (curlevel === "street") {
531 |           let mapJsonList = this.geoJsonData.features;
532 |           let mapJson = {};
533 |           for (let i in mapJsonList) {
534 |             if (mapJsonList[i].properties.name == this.cityName) {
535 |               mapJson.type = "FeatureCollection";
536 |               mapJson.features = [].concat(mapJsonList[i]);
537 |             }
538 |           }
539 |           this.mapData = [];
540 |           this.mapData.push({
541 |             name: this.cityName,
542 |             value: Math.random() * 100,
543 |             level: curlevel,
544 |           });
545 |           this.loadMap(this.cityName, mapJson);
546 |           return;
547 |         }
548 | 
549 |         var curList = document.querySelector("#" + curlevel);
550 |         curList.add(contentSub);
551 |         this.mapData = [];
552 |         for (var i = 0, l = subList.length; i < l; i++) {
553 |           var name = subList[i].name;
554 |           var cityCode = subList[i].adcode;
555 |           this.mapData.push({
556 |             name: name,
557 |             value: Math.random() * 100,
558 |             cityCode: cityCode,
559 |             level: curlevel,
560 |           });
561 |           var levelSub = subList[i].level;
562 |           contentSub = new Option(name);
563 |           contentSub.setAttribute("value", levelSub);
564 |           contentSub.center = subList[i].center;
565 |           contentSub.adcode = subList[i].adcode;
566 |           curList.add(contentSub);
567 |         }
568 |         this.loadMapData(adcode);
569 |         this.areaData[curlevel] = curList;
570 |       }
571 |     },
572 |     search(area) {
573 |       let obj = this.areaData[area];
574 |       //清除地图上所有覆盖物
575 |       for (var i = 0, l = this.polygons.length; i < l; i++) {
576 |         this.polygons[i].setMap(null);
577 |       }
578 |       var option = obj[obj.options.selectedIndex];
579 |       var keyword = option.text; //关键字
580 |       var adcode = option.adcode;
581 |       this.cityName = keyword;
582 |       this.cityCode = adcode;
583 |       this.$ba &&
584 |         this.$ba.trackEvent(
585 |           "echartsMap",
586 |           "筛选地图",
587 |           `${this.cityName}-${this.cityCode}`
588 |         );
589 |       this.district.setLevel(option.value); //行政区级别
590 |       this.district.setExtensions("all");
591 |       //行政区查询
592 |       //按照adcode进行查询可以保证数据返回的唯一性
593 |       this.district.search(adcode, (status, result) => {
594 |         if (status === "complete") {
595 |           this.getData(result.districtList[0], obj.id, adcode);
596 |         }
597 |       });
598 |     },
599 |     // 联系下载乡镇数据
600 |     contact() {
601 |       this.$ba && this.$ba.trackEvent("echartsMap", "文件下载", "联系下载");
602 |       if (/(iPhone|iPad|iPod|iOS|android)/i.test(navigator.userAgent)) {
603 |         window.open(
604 |           "mqqwpa://im/chat?chat_type=wpa&uin=2890228902&version=1&src_type=web&web_src=http:://wpa.b.qq.com"
605 |         );
606 |       } else {
607 |         window.open(
608 |           "http://wpa.qq.com/msgrd?v=3&uin=2890228902&site=在线客服&menu=yes"
609 |         );
610 |       }
611 |     },
612 |     openAd() {
613 |       location.href = "https://map.hxkj.vip";
614 |     },
615 |   },
616 | };
617 | </script>
618 | 
619 | <style lang="stylus" scoped>
620 | * {
621 |   font-size: 14px;
622 | }
623 | 
624 | .body {
625 |   display: flex;
626 |   width: 100%;
627 |   overflow: hidden;
628 | }
629 | 
630 | .map, .echarts {
631 |   width: 0;
632 |   flex: 1;
633 |   overflow: hidden;
634 | }
635 | 
636 | .echarts {
637 |   background: url('./images/bg_bigdata.png') no-repeat;
638 |   background-size: 100% 100%;
639 | }
640 | 
641 | #map {
642 |   width: 100%;
643 |   height: 100vh;
644 |   overflow: hidden;
645 | }
646 | 
647 | .tips {
648 |   position: fixed;
649 |   bottom: 30%;
650 |   left: 40%;
651 |   padding: 10px 15px;
652 |   border-radius: 5px;
653 |   color: #fff;
654 |   background: rgba(0, 0, 0, 0.8);
655 |   z-index: 999;
656 | }
657 | 
658 | .gg {
659 |   position: fixed;
660 |   bottom: 0;
661 |   left: 0;
662 |   z-index: 999;
663 |   cursor: pointer;
664 |   width: 320px;
665 | 
666 |   img {
667 |     width: 320px;
668 |   }
669 | }
670 | 
671 | .gg-close {
672 |   position: absolute;
673 |   top: 0;
674 |   left: 0;
675 |   width: 20px;
676 |   height: 20px;
677 | }
678 | 
679 | @keyframes adShakeAnmation {
680 |   0% {
681 |     bottom: 1px;
682 |     left: 0px;
683 |   }
684 | 
685 |   30% {
686 |     bottom: 1;
687 |     left: 10px;
688 |   }
689 | 
690 |   70% {
691 |     bottom: 0px;
692 |     left: 1px;
693 |   }
694 | 
695 |   100% {
696 |     bottom: 0;
697 |     left: 0;
698 |   }
699 | }
700 | </style>
701 | 


--------------------------------------------------------------------------------
/src/Github.vue:
--------------------------------------------------------------------------------
 1 | /**
 2 | * @Description:    右上角github入口
 3 | * @Author:         TSY 
 4 | * @Email:          t@tsy6.com
 5 | * @CreateDate:     2019/5/9 23:18
 6 | */
 7 | <template>
 8 |     <a href="https://github.com/TangSY/echarts-map-demo" class="github-corner" aria-label="View source on GitHub"
 9 |        target="_blank">
10 |         <svg width="80" height="80" viewBox="0 0 250 250"
11 |              style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
12 |             <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
13 |             <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
14 |                   fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
15 |             <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
16 |                   fill="currentColor" class="octo-body"></path>
17 |         </svg>
18 |     </a>
19 | </template>
20 | 
21 | <script>
22 |     export default {
23 |         name: "Github",
24 |         data() {
25 |             return {}
26 |         },
27 |         mounted() {
28 | 
29 |         },
30 |         computed: {},
31 |         methods: {}
32 |     }
33 | </script>
34 | 
35 | <style lang="stylus" scoped>
36 | 
37 |     .github-corner:hover .octo-arm {
38 |         animation: octocat-wave 560ms ease-in-out
39 |     }
40 | 
41 |     @keyframes octocat-wave {
42 |         0%, 100% {
43 |             transform: rotate(0)
44 |         }
45 |         20%, 60% {
46 |             transform: rotate(-25deg)
47 |         }
48 |         40%, 80% {
49 |             transform: rotate(10deg)
50 |         }
51 |     }
52 | 
53 |     @media (max-width: 500px) {
54 |         .github-corner:hover .octo-arm {
55 |             animation: none
56 |         }
57 | 
58 |         .github-corner .octo-arm {
59 |             animation: octocat-wave 560ms ease-in-out
60 |         }
61 |     }
62 | </style>


--------------------------------------------------------------------------------
/src/MapRange.vue:
--------------------------------------------------------------------------------
  1 | /**
  2 | * @Description:
  3 | * @Author:         TSY
  4 | * @CreateDate:     2018/12/13 14:06
  5 | */
  6 | <template>
  7 |   <div class="body">
  8 |     <div id="container"></div>
  9 | 
 10 |     <div class="input-card">
 11 |       <h4>下属行政区查询</h4>
 12 |       <div class="input-item">
 13 |         <div class="input-item-prepend"><span class="input-item-text">省市区</span></div>
 14 |         <select id='province'
 15 |                 style="width:100px"
 16 |                 @change='search("province")'></select>
 17 |       </div>
 18 |       <div class="input-item">
 19 |         <div class="input-item-prepend"><span class="input-item-text">地级市</span></div>
 20 |         <select id='city'
 21 |                 style="width:100px"
 22 |                 @change='search("city")'></select>
 23 |       </div>
 24 |       <div class="input-item">
 25 |         <div class="input-item-prepend"><span class="input-item-text">区县</span></div>
 26 |         <select id='district'
 27 |                 style="width:100px"
 28 |                 @change='search("district")'></select>
 29 |       </div>
 30 |       <p>请选择文件下载方式</p>
 31 |       <div class="radio">
 32 |         <input type="radio"
 33 |                value="name"
 34 |                v-model="nameType">单文件【按地域名称命名】
 35 |       </div>
 36 |       <div class="radio">
 37 |         <input type="radio"
 38 |                value="code"
 39 |                v-model="nameType">单文件【按地域行政编码命名】
 40 |       </div>
 41 |       <div class="radio">
 42 |         <input type="radio"
 43 |                value="all"
 44 |                v-model="nameType">一次性打包下载所有文件
 45 |       </div>
 46 |       <!-- <div class="radio">
 47 |         <input type="radio"
 48 |                value="street"
 49 |                v-model="nameType">打包下载所有乡镇数据
 50 |       </div> -->
 51 |       <div class="radio">
 52 |         <input type="radio"
 53 |                value="area"
 54 |                v-model="nameType">全国省市区县乡村名称和编码
 55 |       </div>
 56 |       <div class="input-item download"
 57 |            @click="download">{{ downloadTips }}</div>
 58 |     </div>
 59 |   </div>
 60 | </template>
 61 | 
 62 | <script>
 63 | export default {
 64 |   name: "streetDialog",
 65 |   props: {
 66 |     downloadTips: {
 67 |       type: String,
 68 |       default: '下载geoJson数据'
 69 |     }
 70 |   },
 71 |   data() {
 72 |     return {
 73 |       nameType: 'code'
 74 |     }
 75 |   },
 76 |   mounted() {
 77 | 
 78 |   },
 79 |   computed: {},
 80 |   methods: {
 81 |     search(area) {
 82 |       this.$emit('change', area);
 83 |     },
 84 |     download() {
 85 |       this.$emit('click', this.nameType)
 86 |     }
 87 |   }
 88 | }
 89 | </script>
 90 | 
 91 | <style lang="stylus" scoped>
 92 | @import 'https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css'
 93 | html, body, #container
 94 |   width 100%
 95 |   height 100vh
 96 | #container
 97 |   width 100%
 98 | .body
 99 |   height 100vh
100 | .input-card
101 |   position fixed
102 |   top 10px
103 |   left 10px
104 |   height 350px
105 | .radio
106 |   margin 3px 0
107 | .download
108 |   display flex
109 |   justify-content center
110 |   align-items center
111 |   border 1px solid #ced4da
112 |   border-radius 0.25rem
113 |   background-color #e9ecef
114 |   color #495057
115 |   text-align center
116 |   cursor pointer
117 | .download:active
118 |   background-color #e9ecef99
119 | </style>


--------------------------------------------------------------------------------
/src/MoneyDialog.vue:
--------------------------------------------------------------------------------
  1 | /**
  2 | * @Description:    哎呀呀，这就是打赏弹窗，为方便你们删除，就单独抽出一个文件来吧
  3 | * @Author:         TSY 
  4 | * @Email:          t@tsy6.com
  5 | * @CreateDate:     2019/5/9 23:02
  6 | */
  7 | <template>
  8 |   <div class="dialog"
  9 |        v-show="isShowDialog">
 10 |     <div class="dialog-content">
 11 |       <div class="dialog-title">赏根辣条？</div>
 12 |       <div class="dialog-close"
 13 |            @click="closeDialog">&times;</div>
 14 |       <div class="dialog-img">
 15 |         <img src="./images/alipay.png"
 16 |              alt="">
 17 |         <img src="./images/wxpay.jpg"
 18 |              alt="">
 19 |       </div>
 20 |       <div class="dialog-bottom">
 21 |         <div class="dialog-btn dialog-cancel"
 22 |              @click="confirmDownload('no')">我就不！傲娇地下载</div>
 23 |         <div class="dialog-btn dialog-confirm"
 24 |              @click="confirmDownload('yes')">已打赏！壕气地下载</div>
 25 |       </div>
 26 |     </div>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | export default {
 32 |   name: "Dialog",
 33 |   data() {
 34 |     return {
 35 |       isShowDialog: false,//是否显示打赏弹窗
 36 |     }
 37 |   },
 38 |   mounted() {
 39 | 
 40 |   },
 41 |   computed: {},
 42 |   methods: {
 43 |     closeDialog() {
 44 |       this.isShowDialog = false;
 45 |     },
 46 |     confirmDownload(type) {
 47 |       if (type === 'no') {
 48 |         this.$ba && this.$ba.trackEvent('echartsMap', '打赏弹窗', '点击不打赏');
 49 |       } else {
 50 |         this.$ba && this.$ba.trackEvent('echartsMap', '打赏弹窗', '点击已打赏');
 51 |       }
 52 |       this.$emit('confirm')
 53 |       this.isShowDialog = false;
 54 |     },
 55 |     show() {
 56 |       this.isShowDialog = true;
 57 |     }
 58 |   }
 59 | }
 60 | </script>
 61 | 
 62 | <style lang="stylus" scoped>
 63 | .dialog {
 64 |   position: fixed;
 65 |   top: 0px;
 66 |   left: 0px;
 67 |   width: 100%;
 68 |   height: 100%;
 69 |   display: flex;
 70 |   align-items: center;
 71 |   justify-content: center;
 72 |   background: rgba(0, 0, 0, 0.3);
 73 |   z-index: 999;
 74 | }
 75 | .dialog-content {
 76 |   position: relative;
 77 |   width: 600px;
 78 |   display: flex;
 79 |   align-items: center;
 80 |   flex-direction: column;
 81 |   background: #17c1fb;
 82 |   padding: 30px;
 83 |   border-radius: 10px;
 84 |   color: #fff;
 85 | }
 86 | .dialog-title {
 87 |   font-size: 24px;
 88 |   margin-bottom: 15px;
 89 | }
 90 | .dialog-close {
 91 |   font-size: 26px;
 92 |   position: absolute;
 93 |   right: 20px;
 94 |   top: 0px;
 95 |   cursor: pointer;
 96 | }
 97 | .dialog-img {
 98 |   width: 100%;
 99 |   display: flex;
100 |   align-items: center;
101 |   justify-content: space-around;
102 | }
103 | .dialog-img img {
104 |   width: 250px;
105 |   height: 350px;
106 | }
107 | .dialog-bottom {
108 |   width: 100%;
109 |   margin-top: 40px;
110 |   display: flex;
111 |   align-items: center;
112 |   justify-content: space-around;
113 | }
114 | .dialog-btn {
115 |   position: relative;
116 |   padding: 10px 20px;
117 |   background: #1c71fb;
118 |   margin-bottom: 15px;
119 |   border-radius: 5px;
120 |   cursor: pointer;
121 | }
122 | .dialog-cancel {
123 |   &:hover {
124 |     &:before {
125 |       position: absolute;
126 |       left: -170px;
127 |       bottom: -90px;
128 |       content: url('./images/aojiao.gif');
129 |     }
130 |   }
131 | }
132 | .dialog-confirm {
133 |   &:hover {
134 |     &:before {
135 |       position: absolute;
136 |       right: -190px;
137 |       bottom: -90px;
138 |       content: url('./images/love.jpg');
139 |     }
140 |   }
141 | }
142 | </style>


--------------------------------------------------------------------------------
/src/StreetDialog.vue:
--------------------------------------------------------------------------------
  1 | /**
  2 | * @Description:    全国乡镇数据获取
  3 | * @Author:         TSY 
  4 | * @Email:          t@tsy6.com
  5 | * @CreateDate:     2020/07/07 01:02
  6 | */
  7 | <template>
  8 |   <div class="dialog"
  9 |        v-show="isShowDialog">
 10 |     <div class="dialog-content">
 11 |       <div class="dialog-title">全国乡镇数据获取</div>
 12 |       <div class="dialog-close"
 13 |            @click="closeDialog">&times;</div>
 14 |       <div class="dialog-concat">
 15 |         <p>邮箱：2890228902@qq.com</p>
 16 |         <p>QQ：2890228902</p>
 17 |       </div>
 18 |       <div class="dialog-bottom">
 19 |         <div class="dialog-btn dialog-cancel"
 20 |              @click="demo">查看示例数据</div>
 21 |       </div>
 22 |       <div class="dialog-btn dialog-cancel"
 23 |            @click="contact">点此咨询</div>
 24 |     </div>
 25 |   </div>
 26 | </template>
 27 | 
 28 | <script>
 29 | export default {
 30 |   name: "streetDialog",
 31 |   data() {
 32 |     return {
 33 |       isShowDialog: false,//是否显示打赏弹窗
 34 |     }
 35 |   },
 36 |   mounted() {
 37 | 
 38 |   },
 39 |   computed: {},
 40 |   methods: {
 41 |     demo() {
 42 |       this.$ba && this.$ba.trackEvent('echartsMap', '乡镇数据', '查看示例数据');
 43 |       window.location.href = "https://hxkj.vip/demo/streetMap/index.html"
 44 |     },
 45 |     closeDialog() {
 46 |       this.isShowDialog = false;
 47 |     },
 48 |     contact() {
 49 |       this.$emit('confirm')
 50 |       this.isShowDialog = false;
 51 |     },
 52 |     show() {
 53 |       this.isShowDialog = true;
 54 |     }
 55 |   }
 56 | }
 57 | </script>
 58 | 
 59 | <style lang="stylus" scoped>
 60 | .dialog
 61 |   position fixed
 62 |   top 0px
 63 |   left 0px
 64 |   width 100%
 65 |   height 100%
 66 |   display flex
 67 |   align-items center
 68 |   justify-content center
 69 |   background rgba(0, 0, 0, 0.3)
 70 |   z-index 999
 71 | .dialog-content
 72 |   position relative
 73 |   width 600px
 74 |   display flex
 75 |   align-items center
 76 |   flex-direction column
 77 |   background #17c1fb
 78 |   padding 30px
 79 |   border-radius 10px
 80 |   color #fff
 81 | .dialog-title
 82 |   font-size 24px
 83 |   margin-bottom 15px
 84 | .dialog-close
 85 |   font-size 26px
 86 |   position absolute
 87 |   right 20px
 88 |   top 0px
 89 |   cursor pointer
 90 | .dialog-img
 91 |   width 100%
 92 |   display flex
 93 |   align-items center
 94 |   justify-content space-around
 95 | .dialog-img img
 96 |   width 250px
 97 |   height 350px
 98 | .dialog-bottom
 99 |   width 100%
100 |   margin-top 40px
101 |   display flex
102 |   align-items center
103 |   justify-content space-around
104 | .dialog-btn
105 |   position relative
106 |   padding 10px 20px
107 |   background #1c71fb
108 |   margin-bottom 15px
109 |   border-radius 5px
110 |   cursor pointer
111 | </style>


--------------------------------------------------------------------------------
/src/images/ad.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TangSY/echarts-map-demo/0f39333fb199105a78e786c79a3d7119c8373b4c/src/images/ad.jpg


--------------------------------------------------------------------------------
/src/images/alipay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TangSY/echarts-map-demo/0f39333fb199105a78e786c79a3d7119c8373b4c/src/images/alipay.png


--------------------------------------------------------------------------------
/src/images/aojiao.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TangSY/echarts-map-demo/0f39333fb199105a78e786c79a3d7119c8373b4c/src/images/aojiao.gif


--------------------------------------------------------------------------------
/src/images/bg_bigdata.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TangSY/echarts-map-demo/0f39333fb199105a78e786c79a3d7119c8373b4c/src/images/bg_bigdata.png


--------------------------------------------------------------------------------
/src/images/data_background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TangSY/echarts-map-demo/0f39333fb199105a78e786c79a3d7119c8373b4c/src/images/data_background.png


--------------------------------------------------------------------------------
/src/images/love.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TangSY/echarts-map-demo/0f39333fb199105a78e786c79a3d7119c8373b4c/src/images/love.jpg


--------------------------------------------------------------------------------
/src/images/pay.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TangSY/echarts-map-demo/0f39333fb199105a78e786c79a3d7119c8373b4c/src/images/pay.jpg


--------------------------------------------------------------------------------
/src/images/wxpay.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TangSY/echarts-map-demo/0f39333fb199105a78e786c79a3d7119c8373b4c/src/images/wxpay.jpg


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | import echarts from 'echarts'
 5 | 
 6 | //引入百度统计插件
 7 | import ba from 'vue-ba'
 8 | Vue.use(ba, 'b0668f30d62e1597bdb36d05edea8960')
 9 | 
10 | Vue.config.productionTip = false
11 | Vue.prototype.$echarts = echarts
12 | 
13 | Vue.config.productionTip = false
14 | 
15 | new Vue({
16 |   render: h => h(App)
17 | }).$mount('#app')
18 | 


--------------------------------------------------------------------------------
/src/mapDataDialog.vue:
--------------------------------------------------------------------------------
  1 | /**
  2 | * @Description:    全国乡镇级联数据
  3 | * @Author:         TSY 
  4 | * @Email:          t@tsy6.com
  5 | * @CreateDate:     2020/08/07 01:02
  6 | */
  7 | <template>
  8 |   <div class="dialog"
  9 |        v-show="isShowDialog">
 10 |     <div class="dialog-content">
 11 |       <div class="dialog-close"
 12 |            @click="closeDialog">&times;</div>
 13 |       <table>
 14 |         <thead>
 15 |           <tr>
 16 |             <th align="left">单级数据文件列表</th>
 17 |             <th align="left">JSON</th>
 18 |             <th align="left">CSV</th>
 19 |           </tr>
 20 |         </thead>
 21 |         <tbody>
 22 |           <tr>
 23 |             <td align="left">省级（省份、直辖市、自治区）</td>
 24 |             <td align="left"><a href="https://hxkj.vip/demo/mapData/provinces.json">provinces.json</a></td>
 25 |             <td align="left"><a href="https://hxkj.vip/demo/mapData/provinces.csv">provinces.csv</a></td>
 26 |           </tr>
 27 |           <tr>
 28 |             <td align="left">地级（城市）</td>
 29 |             <td align="left"><a href="https://hxkj.vip/demo/mapData/cities.json">cities.json</a></td>
 30 |             <td align="left"><a href="https://hxkj.vip/demo/mapData/cities.csv">cities.csv</a></td>
 31 |           </tr>
 32 |           <tr>
 33 |             <td align="left">县级（区县）</td>
 34 |             <td align="left"><a href="https://hxkj.vip/demo/mapData/areas.json">areas.json</a></td>
 35 |             <td align="left"><a href="https://hxkj.vip/demo/mapData/areas.csv">areas.csv</a></td>
 36 |           </tr>
 37 |           <tr>
 38 |             <td align="left">乡级（乡镇、街道）</td>
 39 |             <td align="left"><a href="https://hxkj.vip/demo/mapData/streets.json">streets.json</a></td>
 40 |             <td align="left"><a href="https://hxkj.vip/demo/mapData/streets.csv">streets.csv</a></td>
 41 |           </tr>
 42 |           <tr>
 43 |             <td align="left">村级（村委会、居委会）</td>
 44 |             <td align="left"><a href="https://hxkj.vip/demo/mapData/villages.json">villages.json</a></td>
 45 |             <td align="left"><a href="https://hxkj.vip/demo/mapData/villages.csv">villages.csv</a></td>
 46 |           </tr>
 47 |         </tbody>
 48 |       </table>
 49 |       <table>
 50 |         <thead>
 51 |           <tr>
 52 |             <th align="left">联动数据文件列表</th>
 53 |             <th align="left">普通</th>
 54 |             <th align="left">带编码</th>
 55 |           </tr>
 56 |         </thead>
 57 |         <tbody>
 58 |           <tr>
 59 |             <td align="left">“省份、城市” 二级联动数据</td>
 60 |             <td align="left"><a href="https://hxkj.vip/demo/mapData/pc.json">pc.json</a></td>
 61 |             <td align="left"><a href="https://hxkj.vip/demo/mapData/pc-code.json">pc-code.json</a></td>
 62 |           </tr>
 63 |           <tr>
 64 |             <td align="left">“省份、城市、区县” 三级联动数据</td>
 65 |             <td align="left"><a href="https://hxkj.vip/demo/mapData/pca.json">pca.json</a></td>
 66 |             <td align="left"><a href="https://hxkj.vip/demo/mapData/pca-code.json">pca-code.json</a></td>
 67 |           </tr>
 68 |           <tr>
 69 |             <td align="left">“省份、城市、区县、乡镇” 四级联动数据</td>
 70 |             <td align="left"><a href="https://hxkj.vip/demo/mapData/pcas.json">pcas.json</a></td>
 71 |             <td align="left"><a href="https://hxkj.vip/demo/mapData/pcas-code.json">pcas-code.json</a></td>
 72 |           </tr>
 73 |         </tbody>
 74 |       </table>
 75 |     </div>
 76 |   </div>
 77 | </template>
 78 | 
 79 | <script>
 80 | export default {
 81 |   name: "streetDialog",
 82 |   data() {
 83 |     return {
 84 |       isShowDialog: false,//是否显示打赏弹窗
 85 |     }
 86 |   },
 87 |   mounted() {
 88 | 
 89 |   },
 90 |   computed: {},
 91 |   methods: {
 92 |     demo() {
 93 |       window.location.href = "https://hxkj.vip/demo/streetMap/index.html"
 94 |     },
 95 |     closeDialog() {
 96 |       this.isShowDialog = false;
 97 |     },
 98 |     contact() {
 99 |       this.$emit('confirm')
100 |       this.isShowDialog = false;
101 |     },
102 |     show() {
103 |       this.isShowDialog = true;
104 |     }
105 |   }
106 | }
107 | </script>
108 | 
109 | <style lang="stylus" scoped>
110 | .dialog {
111 |   position: fixed;
112 |   top: 0px;
113 |   left: 0px;
114 |   width: 100%;
115 |   height: 100%;
116 |   display: flex;
117 |   align-items: center;
118 |   justify-content: center;
119 |   background: rgba(0, 0, 0, 0.3);
120 |   z-index: 999;
121 | }
122 | .dialog-content {
123 |   position: relative;
124 |   width: 600px;
125 |   display: flex;
126 |   align-items: center;
127 |   flex-direction: column;
128 |   background: #17c1fb;
129 |   padding: 30px;
130 |   border-radius: 10px;
131 |   color: #fff;
132 | }
133 | .dialog-title {
134 |   font-size: 24px;
135 |   margin-bottom: 15px;
136 | }
137 | .dialog-close {
138 |   font-size: 26px;
139 |   position: absolute;
140 |   right: 20px;
141 |   top: 0px;
142 |   cursor: pointer;
143 | }
144 | .dialog-img {
145 |   width: 100%;
146 |   display: flex;
147 |   align-items: center;
148 |   justify-content: space-around;
149 | }
150 | .dialog-img img {
151 |   width: 250px;
152 |   height: 350px;
153 | }
154 | .dialog-bottom {
155 |   width: 100%;
156 |   margin-top: 40px;
157 |   display: flex;
158 |   align-items: center;
159 |   justify-content: space-around;
160 | }
161 | .dialog-btn {
162 |   position: relative;
163 |   padding: 10px 20px;
164 |   background: #1c71fb;
165 |   margin-bottom: 15px;
166 |   border-radius: 5px;
167 |   cursor: pointer;
168 | }
169 | </style>


--------------------------------------------------------------------------------
/src/saveAs.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @Description:    保存文件到本地
  3 |  * @Author:         TSY
  4 |  * @Email:          t@tsy6.com
  5 |  * @CreateDate:     2018/12/12 23:28
  6 |  */
  7 | "use strict";
  8 | export default (function (view) {
  9 |     // IE <10 is explicitly unsupported
 10 |     if (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {
 11 |         return;
 12 |     }
 13 |     var doc = view.document
 14 |         // only get URL when necessary in case Blob.js hasn't overridden it yet
 15 |         , get_URL = function () {
 16 |             return view.URL || view.webkitURL || view;
 17 |         }
 18 |         , save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
 19 |         , can_use_save_link = "download" in save_link
 20 |         , click = function (node) {
 21 |             var event = new MouseEvent("click");
 22 |             node.dispatchEvent(event);
 23 |         }
 24 |         , is_safari = /constructor/i.test(view.HTMLElement) || view.safari
 25 |         , is_chrome_ios = /CriOS\/[\d]+/.test(navigator.userAgent)
 26 |         , throw_outside = function (ex) {
 27 |             (view.setImmediate || view.setTimeout)(function () {
 28 |                 throw ex;
 29 |             }, 0);
 30 |         }
 31 |         , force_saveable_type = "application/octet-stream"
 32 |         // the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to
 33 |         , arbitrary_revoke_timeout = 1000 * 40 // in ms
 34 |         , revoke = function (file) {
 35 |             var revoker = function () {
 36 |                 if (typeof file === "string") { // file is an object URL
 37 |                     get_URL().revokeObjectURL(file);
 38 |                 } else { // file is a File
 39 |                     file.remove();
 40 |                 }
 41 |             };
 42 |             setTimeout(revoker, arbitrary_revoke_timeout);
 43 |         }
 44 |         , dispatch = function (filesaver, event_types, event) {
 45 |             event_types = [].concat(event_types);
 46 |             var i = event_types.length;
 47 |             while (i--) {
 48 |                 var listener = filesaver["on" + event_types[i]];
 49 |                 if (typeof listener === "function") {
 50 |                     try {
 51 |                         listener.call(filesaver, event || filesaver);
 52 |                     } catch (ex) {
 53 |                         throw_outside(ex);
 54 |                     }
 55 |                 }
 56 |             }
 57 |         }
 58 |         , auto_bom = function (blob) {
 59 |             // prepend BOM for UTF-8 XML and text/* types (including HTML)
 60 |             // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
 61 |             if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
 62 |                 return new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
 63 |             }
 64 |             return blob;
 65 |         }
 66 |         , FileSaver = function (blob, name, no_auto_bom) {
 67 |             if (!no_auto_bom) {
 68 |                 blob = auto_bom(blob);
 69 |             }
 70 |             // First try a.download, then web filesystem, then object URLs
 71 |             var
 72 |                 filesaver = this
 73 |                 , type = blob.type
 74 |                 , force = type === force_saveable_type
 75 |                 , object_url
 76 |                 , dispatch_all = function () {
 77 |                     dispatch(filesaver, "writestart progress write writeend".split(" "));
 78 |                 }
 79 |                 // on any filesys errors revert to saving with object URLs
 80 |                 , fs_error = function () {
 81 |                     if ((is_chrome_ios || (force && is_safari)) && view.FileReader) {
 82 |                         // Safari doesn't allow downloading of blob urls
 83 |                         var reader = new FileReader();
 84 |                         reader.onloadend = function () {
 85 |                             var url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/, 'data:attachment/file;');
 86 |                             var popup = view.open(url, '_blank');
 87 |                             if (!popup) view.location.href = url;
 88 |                             url = undefined; // release reference before dispatching
 89 |                             filesaver.readyState = filesaver.DONE;
 90 |                             dispatch_all();
 91 |                         };
 92 |                         reader.readAsDataURL(blob);
 93 |                         filesaver.readyState = filesaver.INIT;
 94 |                         return;
 95 |                     }
 96 |                     // don't create more object URLs than needed
 97 |                     if (!object_url) {
 98 |                         object_url = get_URL().createObjectURL(blob);
 99 |                     }
100 |                     if (force) {
101 |                         view.location.href = object_url;
102 |                     } else {
103 |                         var opened = view.open(object_url, "_blank");
104 |                         if (!opened) {
105 |                             // Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html
106 |                             view.location.href = object_url;
107 |                         }
108 |                     }
109 |                     filesaver.readyState = filesaver.DONE;
110 |                     dispatch_all();
111 |                     revoke(object_url);
112 |                 }
113 |             ;
114 |             filesaver.readyState = filesaver.INIT;
115 | 
116 |             if (can_use_save_link) {
117 |                 object_url = get_URL().createObjectURL(blob);
118 |                 setTimeout(function () {
119 |                     save_link.href = object_url;
120 |                     save_link.download = name;
121 |                     click(save_link);
122 |                     dispatch_all();
123 |                     revoke(object_url);
124 |                     filesaver.readyState = filesaver.DONE;
125 |                 });
126 |                 return;
127 |             }
128 | 
129 |             fs_error();
130 |         }
131 |         , FS_proto = FileSaver.prototype
132 |         , saveAs = function (blob, name, no_auto_bom) {
133 |             return new FileSaver(blob, name || blob.name || "download", no_auto_bom);
134 |         }
135 |     ;
136 |     // IE 10+ (native saveAs)
137 |     if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
138 |         return function (blob, name, no_auto_bom) {
139 |             name = name || blob.name || "download";
140 | 
141 |             if (!no_auto_bom) {
142 |                 blob = auto_bom(blob);
143 |             }
144 |             return navigator.msSaveOrOpenBlob(blob, name);
145 |         };
146 |     }
147 | 
148 |     FS_proto.abort = function () {
149 |     };
150 |     FS_proto.readyState = FS_proto.INIT = 0;
151 |     FS_proto.WRITING = 1;
152 |     FS_proto.DONE = 2;
153 | 
154 |     FS_proto.error =
155 |         FS_proto.onwritestart =
156 |             FS_proto.onprogress =
157 |                 FS_proto.onwrite =
158 |                     FS_proto.onabort =
159 |                         FS_proto.onerror =
160 |                             FS_proto.onwriteend =
161 |                                 null;
162 | 
163 |     return saveAs;
164 | }(
165 |     typeof self !== "undefined" && self
166 |     || typeof window !== "undefined" && window
167 |     || this.content
168 | ));
169 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @Description:    自定义配置
 3 |  * @Author:         TSY
 4 |  * @CreateDate:     2018/6/9 13:28
 5 |  */
 6 | 
 7 | module.exports = {
 8 |     baseUrl: process.env.NODE_ENV === 'production' ? './' : '/',
 9 |     lintOnSave: false
10 | }


--------------------------------------------------------------------------------
/全国省市区geoJson数据包.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TangSY/echarts-map-demo/0f39333fb199105a78e786c79a3d7119c8373b4c/全国省市区geoJson数据包.zip


--------------------------------------------------------------------------------