怎么获取echarts需要的geoJson数据去渲染地图：以广州市白云区24镇街为例（内附资源）
Posted 凯小默
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么获取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。
先看个例子：
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全能版：谷歌卫星地图下载器
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 数据。
实现 24 镇街的 geojson 数据
上面已经拿到了 22 镇街的数据，由于行政区的调整，现在太和镇一分为三：龙归街道、大源街道、太和镇。
那么我们下面就需要实现将太和镇画出三份出来。我实现的步骤大致如下：
首先这里需要知道一点经纬度的关系：白云区的大致经纬度范围，往北走纬度会怎么样，往东走经度会怎么样，这个就不多说了，不懂的可以补一下地理知识
[
113.47268343699997, // 经度
23.429203868999984 // 纬度
]
1、边界划分实现的效果如下图
- 蓝色跟绿色中间是：龙归街道
- 绿色跟红色中间是：大源街道
- 红色是：划分过后的太和镇
2、将拿到的效果图打印出来
将拿到的效果图打印出来，用剪刀剪掉我们需要扣的图
3、描点画区域
比如下面，正在描点大源街道的右边边界，先把需要裁剪好的纸张通过（浏览器跟工具自带的）缩小放大跟地图的尺寸基本匹配起来，
匹配起来之后，我们找到多边形工具开始描点：
然后闭合之后，我们就会得到一个边界生成的多边形
4、确定边界汇聚点
这个非常重要，比如，下图的两个边界点
那么怎么样才能精确的确定边界汇聚点的坐标？
我的解决方案就是：用 放大+ 画矩形的方式确定一个点的坐标
举个例子：比如我要获取这个点坐标：
先放大，放大之后用矩形工具点击这个点，在滑动一下生成一个矩形，右边就会生成一个多边形的数据，而倒数第二条数据正是这个点的坐标。
5、通过汇聚点找到边界数据
通过两个汇聚点的经纬度，我们从太和镇的数据中找到龙归街道，也就是蓝色边界的数据。
6、融合两个边界形成一块
下面就是需要将两个边界的数据融合起来，记住头尾数据必须一样。
最重要的一步来了，怎么融合？
说白了就是将这两个多边形其中一个当做主体，讲另外一个的坐标（coordinates）数据放进去就行。这样我们就形成了一个闭环数据。
7、需要注意的问题
这里需要注意的是，头尾的处理。如果处理不当会有下面问题。
两个区域之间出现空白区域：这个问题就是缺少点导致的，找到汇聚点检查一下就行。
出现线交叉的问题：这种问题一般是多了点导致的，检查交汇处的点的走向，找到多余的点
合并之后中间多了一根直线：假设下面已经合并，但是中间的直线还在，这种情况一般是形成数据形成∞了，而我们要求的应该是o，只需要吧一个边界的数据倒序在整合就行。
这些就是我画图过程中遇到的问题，跟一些解决方案，希望对你有所帮助。其他的划分也是同样的一个道理，主要还是要细心，有耐心。
8、太和镇现实的效果如下
参考资料
- 广州白云区有几个镇和街道？
- RFC 7946
- geojson.io：在线绘制GIS数据的工具网站
- POI数据：打造最专业POI数据
- datav：数据可视化平台
- BIGEMAP全能版：谷歌卫星地图下载器_地图下载工具_全能地图下载器
- 百科：KML
24 个镇街 geojson 数据代码
由于 24 个镇街的数据太大博客里放不下，这里贴出太和镇，龙归街道、大源街道 的 geojson 数据，大家在把它拼接到 21 个里，这样就生成24 镇街数据了。这里拼的时候用 features 里面的东西。
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "Polygon",
"coordinates": [
[
[113.33054109600003, 23.25094065699999],
[113.33246178925037, 23.25080286148973],
[113.3323860168457, 23.25128279770217],
[113.33375930786133, 23.253333134751365],
[113.3346176147461, 23.254437149334656],
[113.33581924438477, 23.255698869093365],
[113.33719253540039, 23.25680286408744],
[113.33873748779295, 23.25822227278926],
[113.33993911743164, 23.26011479421539],
[113.34148406982422, 23.261218752638825],
[113.34217071533203, 23.262164995438603],
[113.34354400634766, 23.2626381143193],
[113.3456039428711, 23.26326893688102],
[113.34800720214844, 23.264057460884295],
[113.3488655090332, 23.265634494894325],
[113.34766387939453, 23.265949899456807],
[113.34766387939453, 23.267526911071204],
[113.34680557250977, 23.268788506924622],
[113.3456039428711, 23.270207787981082],
[113.34526062011719, 23.27194244429546],
[113.34611892700195, 23.273834770878185],
[113.34388732910156, 23.275096306999046],
[113.34251403808594, 23.276042451248856],
[113.34062576293945, 23.276673210348186],
[113.33856582641602, 23.27698858877768],
[113.3378791809082, 23.27761934339626],
[113.33581924438477, 23.27698858877768],
[113.33324432373047, 23.27888084367162],
[113.33084106445311, 23.279669275275637],
[113.32809448242188, 23.281403808373305],
[113.32740783691406, 23.28219222503963],
[113.32603454589844, 23.2842420865242],
[113.32672119140625, 23.287395657951087],
[113.32569122314453, 23.289130090393193],
[113.32603454589844, 23.291022172736977],
[113.32706451416016, 23.291652860874496],
[113.32826614379883, 23.29307189825664],
[113.32878112792969, 23.294648588713123],
[113.32895278930664, 23.295594594020287],
[113.327579498291, 23.297171254586974],
[113.32689285278319, 23.298590233123587],
[113.32620620727539, 23.29922088539338],
[113.32483291625977, 23.300482180964732],
[113.32363128662108, 23.300482180964732],
[113.32277297973633, 23.30158580478034],
[113.32225799560547, 23.302374101900277],
[113.32002639770506, 23.303241223336748],
[113.32002639770506, 23.30529076062529],
[113.32025471600001, 23.307300004000012],
[113.32034068799999, 23.30789108200002],
[113.31958958, 23.307852034],
[113.318237394, 23.307713937],
[113.31806634500002, 23.30806797100001],
[113.31680016500002, 23.30800889099999],
[113.31677814600005, 23.308245919],
[113.31615599400004, 23.309132991],
[113.315425903, 23.308915921999972],
[113.31437471900003, 23.309368916999972],
[113.31439567200005, 23.310098008000015],
[113.31252938199997, 23.31037293299999],
[113.31216428599997, 23.31098398699997],
[113.31298036700001, 23.31153610199998],
[113.31261525900003, 23.312324178999962],
[113.31173515, 23.31206809600001],
[113.31171422299995, 23.310963958],
[113.30997596899999, 23.310983860000018],
[113.31012594799994, 23.311594943999975],
[113.31210009499999, 23.313625308999978],
[113.31171403400002, 23.31370429600002],
[113.31089797599996, 23.31283614199997],
[113.30950379399997, 23.312521021999988],
[113.30851665, 23.31254096700001],
[113.30819457599999, 23.31293499700001],
[113.30920664400001, 23.314078196000015],
[113.30944256899997, 23.315654403999986],
[113.30987157200002, 23.316521535999982],
[113.30903442600003, 23.316876531999984],
[113.30824045199995, 23.31482723300002],
[113.30772538, 23.31478719799998],
[113.3074893199999, 23.315142227000027],
[113.30643815400003, 23.315359193],
[113.30600915299998, 23.31447205900002],
[113.30609422899998, 23.313545949],
[113.304936052, 23.313663897000023],
[113.30482805799998, 23.313367853999978],
[113.303755872, 23.31380184499999],
[113.30381985300004, 23.31419589699999],
[113.30334777699998, 23.314313884999986],
[113.30291878599995, 23.313289732999966],
[113.30222369700003, 23.313101669999973],
[113.30182364699999, 23.312993634],
[113.30195569, 23.31263759699999],
[113.29897249299995, 23.309227002999975],
[113.29813537300004, 23.30918795000002],
[113.29800638400002, 23.308753889],
[113.29764233799992, 23.308655854999987],
[113.29757736299996, 23.308162790999976],
[113.29725532099994, 23.30810376499999],
[113.297170391, 23.306901611999987],
[113.29483104, 23.30705949499998],
[113.29463791800002, 23.30843865299999],
[113.29403683400004, 23.308379612],
[113.29403788599996, 23.307628519],
[113.29388792, 23.30682041099998],
[113.292792812, 23.30607225499999],
[113.29311489199992, 23.305599214999972],
[113.29089167799998, 23.304027893],
[113.28566817399997, 23.300335134000022],
[113.28616130299996, 23.299507060999982],
[113.28607634699993, 23.298678952999975],
[113.28556127299998, 23.298678923],
[113.284187136, 23.297772732],
[113.28463125, 23.297046668],
[113.28468126300002, 23.296964661],
[113.28124777599997, 23.29680644199999],
[113.28119294899997, 23.294187115999986],
[113.28118298000004, 23.293712056999983],
[113.27965994, 23.29107064200002],
[113.27860896699997, 23.288470260999986],
[113.27882318800003, 23.28572993599999],
[113.27645442799995, 23.27725575300002],
[113.27629844399995, 23.276697674999973],
[113.27428121199999, 23.275810448000016],
[113.27192792799997, 23.274973208],
[113.27193894899993, 23.274687174],
[113.27211000900002, 23.27417412099998],
[113.27238906499996, 23.27395810899998],
[113.272539099, 23.27378009699997],
[113.27277517100002, 23.27322804200002],
[113.27301123300002, 23.272834008000014],
[113.27442847299993, 23.272331027999986],
[113.27422945800002, 23.272123991999983],
[113.27378940200002, 23.272004950999982],
[113.27336044000002, 23.270565748000024],
[113.27329653499999, 23.26905755799999],
[113.273811613, 23.269008582000023],
[113.27388660199995, 23.269314624],
[113.27419765299996, 23.269235632999983],
[113.27434765600002,以上是关于怎么获取echarts需要的geoJson数据去渲染地图：以广州市白云区24镇街为例（内附资源）的主要内容，如果未能解决你的问题，请参考以下文章
获取街道镇级的地图geoJson数据方法，使用echarts绘制出街道镇级的地图区域画面（中山市为例）
vue 里怎么使用 echarts 实现地图自动轮播功能自定义 tooltip 悬浮位置提示自定义 label 标签位置样式？