高德地图API获取行政区域

高德地图API提供的行政区划查询，可以获取到行政区域的区号、城市编码、中心点、边界、下辖区域的详细信息。基于该工具进行扩展，对边界数据做转换处理，保存为GeoJson格式文件，方便使用。现已可以单个城市的边界数据下载。

ToDo

• 下载整个省、市的边界数据
• 火星坐标转换

现在就去下载

CLICK😍ME

😏想知道具体的实现，就往下看，不想就点上面的链接吧！

Vue项目中使用高德地图

什么？？？Vue？别慌，完全是因为我高兴！！！其实是想试试Vue，看看上上篇文章就知道了。

引入高德地图

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

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

配置webpack

文件webpack.base.conf.js中，找到module.exports项，添加：

externals: {
  'AMap': 'AMap'
}

创建地图

在需要的页面中引入

<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

npm install file-saver --save

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

---

打赏

微信支付

支付宝

• 本文作者： huangli
• 本文链接： giser.xyz/2018/04/25/…
• 版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！