高德地图行政区域下载

高德地图API提供的行政区划查询,可以获取到行政区域的区号、城市编码、中心点、边界、下辖区域的详细信息。基于该工具进行扩展,对边界数据做转换处理,保存为GeoJson格式文件,方便使用,并且还可以选择转为WGS84坐标。下载的GeoJson可通过 geojson.io 转换为shp、csv、kml等格式。

下载地址:点击😍下载

1

下载方法

  • 访问下载地址
  • 选择需要下载的行政区
  • WGS:勾选后,下载的行政区即为WGS84坐标系
  • 下载(默认为文件格式为 *.geojson)

文件转换(shp、kml等)

Coding😏

代码实现过程,可忽略

Vue项目中使用高德地图

接上上篇文章Leaflet的Vue组件 — Vue2Leaflet

引入高德地图

文件index.html中引入高德地图JavaScript API入口脚本。

1
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>

配置webpack

文件webpack.base.conf.js中,找到module.exports项,添加:

1
2
3
externals: {
'AMap': 'AMap'
}

创建地图

在需要的页面中引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
<div id="map-container"></div>
</template>

<script>
import AMap from 'AMap'
export default {
name: 'AMapDemo',
methods: {
initMap(){
const map = new AMap.Map('map-container', {
center: [116.397428, 39.90923],
zoom: 14
})
}
},
mounted(){
this.initMap()
}
}
</script>

<style scoped>
#map-container {
width: 800px;
height: 600px;
}
</style>

获取流程

获取流程

生成的GeoJson怎么保存到本地?

FileSaver

1
npm install file-saver --save

1
2
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

火星坐标转换

WGS-84(未偏移坐标)、GCJ-02(国家测绘局、高德、谷歌中国地图), BD-09(百度坐标系)

coordinate-convert(JavasSript)

该库实现了以下转换:

  • WGS84坐标转GCJ02坐标(wgs2gcj)
  • WGS84坐标转GCJ02坐标(gcj2wgs)
  • GCJ02坐标转百度BD09坐标(gcj2bd)
  • 百度DB09坐标转GCJ02坐标(bd2gcj)

coord-convert(Python)

该库实现了三者之间的互相转换,支持文件格式:ESRI Shapefile, GeoJSON。

1
npm install coordinate-convert --save
1
var coord = CoordinateConvert.wgs2gcj(116.3997, 39.9158)

0%