怎么获取echarts需要的geoJson数据去渲染地图：以广州市白云区24镇街为例（内附资源）

原由

为什么会有这篇博客，因为我通过半天的查找没有在网上找到广州市白云区 24 镇街的边界 geojson 数据，要不不全，要不就是收费（能理解），并且自己第一次弄这个 geojson 数据确实感觉有点恶心心。希望这篇对同学有所帮助，减少一些不必要的弯路。

下面将我遇到的问题，找到的资源，以及实现 24 镇街边界 geojson 数据的过程简单梳理一下。

什么是 geojson 数据

GeoJSON 是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法(JavaScript Object Notation, 简称JSON)的地理空间信息数据交换格式。

   GeoJSON 使用地理坐标参考系统 World Geodetic 系统 1984，十进制度。

   GeoJSON 对象可以表示几何、特征或者特征集合。

   GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。

   GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

   2015 年，互联网工程任务组 （IETF） 与原始规范作者一起组建了GeoJSON WG，以标准化 GeoJSON。 RFC 7946 于 2016 年 8 月发布，是 GeoJSON 格式的新标准规范，取代了 2008 年 GeoJSON 规范。

geojson.io：在线绘制GIS数据的工具网站

   一个在线生成 geojson、kml、Topojson 等数据格式的一个网站，http://geojson.io/，在上面可以通过画线、画面等方式生成geojson。在地图控件中绘制的图形数据，会实时以 GeoJson 的格式显示出来。对于多边形还可以通过点击进行属性修改。Save 命令可以保存成相应的格式。数据可保存在 GitHub。

在线绘制GIS数据的工具网站

先看个例子：

Example：A GeoJSON FeatureCollection:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]
      },
      "properties": {
        "prop0": "value0"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [102.0, 0.0],
          [103.0, 1.0],
          [104.0, 0.0],
          [105.0, 1.0]
        ]
      },
      "properties": {
        "prop0": "value0",
        "prop1": 0.0
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [100.0, 0.0],
            [101.0, 0.0],
            [101.0, 1.0],
            [100.0, 1.0],
            [100.0, 0.0]
          ]
        ]
      },
      "properties": {
        "prop0": "value0",
        "prop1": {
          "this": "that"
        }
      }
    }
  ]
}

然后打开网址，把 json 数据粘贴进去：显示如下

datav：数据可视化平台

数据可视化平台：范围选择器，定位到白云区，但是不能再向下面的镇街层级了，这个只能生成白云区的 geojson 数据，边界生层器跟层级生成器，感觉有点复杂，没有怎么研究，这里就不展开

比如：可以自己搜索 440111 定位到白云区

上图最右边那个复制的数据就是白云区的边界数据了，我们试一下，打开http://geojson.io/

POI数据：打造最专业POI数据

我请教了之前同事，问问他们之中有没有用过广州市白云区 24 镇街的 geojson 数据。他们提供了一个网站给我，没错就是POI数据：打造最专业POI数据，里面有高德跟百度的行政划分

但是很可惜，里面我找到白云区的时候，发现只有 18 个镇街的数据

白云区边界地图

分别如下：

比如我们要下载钟落潭镇边界地图，点击按钮下载即可

BIGEMAP全能版：谷歌卫星地图下载器

• BIGEMAP全能版：谷歌卫星地图下载器_地图下载工具_全能地图下载器

1、下载 BIGEMAP 全能版

首先打开网址，下载 BIGEMAP 全能版

2、安装

解压 bmsetup.rar, 然后双击，按提示一步一步安装就行。

3、打开 Bigemap GIS Office

然后进入画面，先关闭

然后选择地图

在切换到地图，选择到白云区，我们可以看到有 22 个镇街，我问了一下客户为什么没有 24 个，她说会定期同步的，但我等不及了，只能靠自己画其他几个了。

4、导出对应镇街的kml文件

   KML(Keyhole Markup Language,Keyhole 标记语言)最初是由Google 旗下的Keyhole 公司开发和维护的一种基于XML 的标记语言，利用XML 语法格式描述地理空间数据(如点、线、面、多边形和模型等)，适合网络环境下的地理信息协作与共享。2008 年4月,KML的最新版本2.2 被OGC 宣布为开放地理信息编码标准,并改由OGC 维护和发展。

我们以钟落潭镇为例，我们选择导出边界。

然后我们就会得到 22 个镇街的 kml 文件。

5、将 kml 文件导入 geojson.io 工具网站

我们打开在线绘制GIS数据的工具网站 geojson.io，点击 Open，选择 File，选择对应的 kml 文件。

打开之后如下：

我们可以添加完 22 个，里面 FeatureCollection 里可以包含多个 Feature，而右边生成的数据正是我们需要的 22 镇街的 geojson 数据。