利用天地图API数据更新Echarts地图

获取天地图地图数据更新(修复)Echarts地图数据

1.为什么要更新?

官网提示:暂不能提供地图下载,建议使用百度地图。但可能由于实际需求(项目需要)我们不能使用百度地图。故而需要自行进行数据更新维护。
说明:天地图的数据是2015年份的,但对于维护目前的echarts 地图数据还是很充实够分量的。
利用天地图API数据更新Echarts地图_第1张图片
官网停止更新和暂停echarts地图:https://echarts.baidu.com/download-map.html

2.使用天地图获取对应城市的坐标步骤。

1.登录天地图官网:http://lbs.tianditu.gov.cn/ ,登录进去。
利用天地图API数据更新Echarts地图_第2张图片
2.找到 WEB服务API —> 行政区划 。来查看天地图提供给我们获取城市行政区划边界线的接口使用示例和参数详细说明(访问地址:http://lbs.tianditu.gov.cn/server/administrative.html)。
利用天地图API数据更新Echarts地图_第3张图片
利用天地图API数据更新Echarts地图_第4张图片
利用天地图API数据更新Echarts地图_第5张图片
利用天地图API数据更新Echarts地图_第6张图片
利用天地图API数据更新Echarts地图_第7张图片
利用天地图API数据更新Echarts地图_第8张图片
利用天地图API数据更新Echarts地图_第9张图片
利用天地图API数据更新Echarts地图_第10张图片
利用天地图API数据更新Echarts地图_第11张图片

3.用于调用天地图API需要指定密匙,所以我们使用天地图接口时需要 自己申请创建自己的密匙,申请如下:

利用天地图API数据更新Echarts地图_第12张图片
利用天地图API数据更新Echarts地图_第13张图片

4.例子说明:以广西壮族自治区为例 ,获取其下的各个市和县区的行政区划边界坐标。

我这里使用Postman工具发送请求(原因是该工具和浏览器一样,但是Postman可以自动转换成JSON格式,方便我们观察数据)
①.打开Postman数据请求天地图行政区划服务接口:
http://api.tianditu.gov.cn/administrative?postStr={“searchWord”:“广西”,“searchType”:“1”,“needSubInfo”:“true”,“needAll”:“true”,“needPolygon”:“true”,“needPre”:“true”}&tk=7399ca89136435c1980b5cc8b55e8cae
参数说明:

参数 含义
searchWord 搜索的地区,这里可以填写全称也可缩写,例如:广西壮族自治州 或广西
searchType 查询类型(0:根据code查询,1:根据名称。) 默认 0 。我这里用1根据名称搜索
needSubInfo 是否需要下一级信息。如果为false则只显示当前搜索区域的信息,如果为true则显示当前搜索区域和其下所属地区的信息(目前只到县级)默认: false 。
needAll 是否需要所有子节点(包括孙子节点…)。默认:false。
needPolygon 是否需要行政区划范围。默认:false 。这个参数就是我们需要获取的行政区划边界坐标,所以我设置为true。
needPre 是否需要上一级所有信息。 默认:false

②.返回参数中获取我们需要的边界坐标值。
返回参数中的points数据就是对应区域的行政区划边界坐标,如下图所示:
利用天地图API数据更新Echarts地图_第14张图片

5.将天地图的坐标格式转换成echarts地图坐标数据格式

①.echarts地图坐标数据格式:

---------------------------------------------echarts地图之广西地图格式说明--------------------------------------------
{
"type":"FeatureCollection",
"cp":[107.7813,23.6426],//地图上区域名字显示的位置
"size":"1450", // 整块地图的大小
"features":[
  	{
  		"type":"Feature", 
  		"properties":{
 	 		"id":"4510",//地区的id 标识 一般都是该地区的行政区划代码
 	 		"name":"百色市","cp":[106.6003,23.9227], //地区的名称
 	 		"childNum":12 //地区下的城市个数
 	 	},
 	 	"geometry":  {
 	 		"type":"Polygon",
 	 		"coordinates":[//  coordinates 这里就是echarts地图行政区划代码边界坐标,也就是我们要替换的坐标
 	 			[
 	 				[106.5674,25.0818],[106.5894,25.0598],[106.6113,25.0488],[106.6223,25.0543],[106.6223,25.0653],
 	 				[106.6663,25.0598],[106.6992,25.0818],[106.6992,25.0928],[106.7212,25.0983],[106.7432,25.0983],
 	 				[106.7542,25.0873],[106.7432,25.0708],[106.7651,25.0323],[106.7432,25.0323],[106.7212,25.0269],
 	 				[106.7212,25.0049],[106.7432,24.9774],[106.7432,24.9664],[106.7651,24.9554],[106.7651,24.939],
 	 				[106.8201,24.895],[106.853,24.8621],[106.842,24.8511],[106.842,24.8621],[106.8201,24.8456],
 	 				[106.8091,24.8456],[106.7981,24.8291],[106.7981,24.8181],[106.7871,24.7906],[106.7542,24.7906],
 	 				[106.7212,24.8126],[106.7212,24.8071],[106.6992,24.8126],[106.6663,24.7906],[106.6663,24.7742],
 	 				[106.6882,24.7522],[106.7322,24.7302],[106.7542,24.7247],[106.7871,24.7028],[106.7871,24.6863],
 	 				[106.8091,24.6863],[106.8201,24.6808],[106.8091,24.6643],[106.7871,24.6533],[106.7212,24.6478],
 	 				[106.6992,24.6204],[106.6882,24.6204],[106.6882,24.6039],[106.6882,24.5984],[106.7212,24.6094],
 	 				[106.7212,24.6149],[106.7322,24.6204],[106.7651,24.6094],[106.7761,24.5874],[106.7651,24.5709],
 	 				[106.7761,24.549],[106.7651,24.5325],[106.7651,24.5105],[106.7981,24.5105],[106.7981,24.4995],
 	 				[106.8201,24.4775],[106.7981,24.4556],[106.853,24.4226],[106.842,24.4061],[106.853,24.3951],
 	 				[106.875,24.3896],[106.886,24.4061],[106.897,24.3787],[106.908,24.3732],[106.886,24.3567],[106.897,24.3347],
 	 				[106.886,24.3127],[106.886,24.3073],[106.897,24.2853],[106.897,24.2688],[106.9299,24.2523],
 	 				[106.9189,24.2139],[106.864,24.1919],[106.864,24.1644],[106.897,24.115],[106.9189,24.0985],
 	 				[106.9629,24.1095],[106.9629,24.104],[106.9409,24.0875],[106.9849,24.0656],[106.9958,24.0436],
 	 				[107.0178,24.0326],[107.0398,24.0326],[107.0618,24.0601],[107.0728,24.0546],[107.1167,24.0491],
 	 				[107.1387,24.0381],[107.1387,24.0106],[107.1497,23.9941],[107.1606,23.9886],[107.1716,23.9886]
 	 			]
 	 		]
 	 	}
 	 }
  ]
  }

②.天地图数据格式:
这里只截取我们需要的行政区划边界坐标:

"points": [
	 {
		"region": "111.266 23.456,111.268 23.453,111.27 23.453,111.272 23.452,111.273 23.448,111.277 23.446,111.281 23.446,111.288 23.449,111.291 23.447,111.298 23.445,111.299 23.443,111.298 23.441,111.305 23.434,111.305 23.429,111.308 23.43,111.311 23.426,111.317 23.425,111.324 23.426,111.325 23.425,111.329 23.424,111.331 23.426,111.336 23.426,111.341 23.428,111.345 23.426,111.347 23.427,111.352 23.424,111.356 23.426,111.359 23.424,111.361 23.42,111.364 23.419,111.368 23.414,111.374 23.415,111.38 23.411,111.381 23.409,111.378 23.405,111.378 23.402,111.387 23.394,111.385 23.381,111.384 23.378,111.376 23.375,111.373 23.372,111.368 23.358,111.363 23.353,111.359 23.346,111.357 23.333,111.357 23.326,111.36 23.322,111.37 23.318,111.373 23.315,111.371 23.307,111.358 23.299,111.352 23.291,111.348 23.291,111.348 23.287,111.351 23.286,111.35 23.282,111.348 23.282,111.344 23.275,111.346 23.268,111.348 23.271,111.35 23.272,111.349 23.269,111.351 23.269,111.356 23.273,111.367 23.267,111.365 23.253,111.362 23.248,111.362 23.244,111.36 23.245,111.36 23.243,111.361 23.239,111.374 23.224,111.372 23.222,111.373 23.218,111.382 23.215,111.384 23.213,111.379 23.197,111.379 23.17,111.384 23.169,111.387 23.172,111.392 23.168,111.393 23.162,111.385 23.156,111.377 23.156,111.371 23.151,111.361 23.147,111.361 23.146,111.371 23.145,111.371 23.132,111.373 23.129,111.376 23.129,111.372 23.129,111.373 23.126,111.373 23.128,111.375 23.126,111.373 23.123,111.369 23.124,111.373 23.12,111.37 23.114,111.369 23.095,111.372 23.085,111.389 23.071,111.397 23.069,111.409 23.071,111.411 23.07,111.415 23.072,111.416 23.068,111.418 23.067,111.422 23.069,111.421 23.072,111.428 23.076,111.429 23.074,111.428 23.07,111.425 23.069,111.424 23.065,111.422 23.063,111.423 23.059,111.421 23.057,111.428 23.05,111.427 23.043,111.429 23.041,111.429 23.039,111.423 23.035,111.42 23.036,111.411 23.028,111.408 23.022,111.411 23.021,111.409 23.019,111.402 23.019,111.401 23.016,111.392 23.016,111.39 23.012,111.384 23.008,111.389 23,111.398 22.994,111.392 22.984,111.372 22.976,111.369 22.97,111.363 22.972,111.358 22.971,111.361 22.98,111.352 22.975,111.348 22.979,111.349 22.982,111.357 22.992,111.354 22.999,111.35 23.001,111.348 23.005,111.343 23.007,111.342 23.01,111.339 23.01,111.335 23.015,111.332 23.017,111.331 23.015,111.325 23.014,111.327 23.011,111.325 23.006,111.32 23.003,111.321 23.008,111.319 23.012,111.315 23.01,111.314 23.011,111.309 23.012,111.307 23.015,111.302 23.012,111.3 23.014,111.297 23.011,111.292 23.01,111.288 23.015,111.285 23.017,111.285 23.02,111.284 23.022,111.29 23.039,111.285 23.042,111.284 23.046,111.282 23.048,111.281 23.051,111.281 23.056,111.28 23.061,111.272 23.062,111.272 23.06,111.27 23.06,111.267 23.064,111.267 23.062,111.264 23.063,111.265 23.061,111.262 23.063,111.253 23.06,111.248 23.063,111.243 23.068,111.24 23.068,111.235 23.064,111.229 23.066,111.231 23.074,111.226 23.079,111.239 23.081,111.24 23.085,111.239 23.091,111.24 23.093,111.244 23.095,111.245 23.099,111.224 23.111,111.22 23.112,111.213 23.109,111.213 23.112,111.216 23.116,111.208 23.126,111.208 23.135,111.205 23.134,111.202 23.134,111.199 23.127,111.189 23.13,111.187 23.133,111.181 23.133,111.179 23.129,111.179 23.124,111.177 23.123,111.174 23.123,111.169 23.127,111.163 23.125,111.159 23.126,111.155 23.129,111.151 23.129,111.148 23.132,111.146 23.129,111.14 23.127,111.137 23.131,111.134 23.13,111.132 23.119,111.122 23.119,111.117 23.126,111.119 23.13,111.116 23.134,111.117 23.135,111.118 23.142,111.113 23.157,111.118 23.166,111.122 23.17,111.123 23.178,111.12 23.184,111.123 23.19,111.126 23.194,111.129 23.193,111.131 23.193,111.133 23.198,111.137 23.198,111.14 23.2,111.14 23.206,111.137 23.215,111.142 23.218,111.141 23.222,111.141 23.227,111.146 23.229,111.147 23.235,111.151 23.235,111.153 23.238,111.157 23.237,111.158 23.238,111.154 23.24,111.15 23.248,111.147 23.25,111.146 23.252,111.144 23.254,111.146 23.261,111.147 23.262,111.152 23.263,111.153 23.267,111.152 23.271,111.15 23.272,111.15 23.274,111.147 23.275,111.145 23.28,111.144 23.285,111.145 23.29,111.143 23.291,111.143 23.299,111.147 23.305,111.147 23.307,111.148 23.31,111.144 23.322,111.139 23.325,111.142 23.331,111.139 23.335,111.14 23.339,111.138 23.342,111.14 23.35,111.141 23.354,111.145 23.357,111.147 23.357,111.148 23.359,111.151 23.358,111.155 23.362,111.158 23.362,111.16 23.364,111.163 23.362,111.164 23.359,111.173 23.358,111.176 23.359,111.182 23.358,111.182 23.357,111.185 23.355,111.189 23.357,111.189 23.363,111.191 23.365,111.19 23.37,111.191 23.371,111.187 23.377,111.191 23.379,111.188 23.382,111.181 23.38,111.182 23.382,111.181 23.386,111.177 23.385,111.177 23.388,111.174 23.389,111.178 23.392,111.177 23.395,111.178 23.396,111.177 23.399,111.18 23.401,111.177 23.404,111.174 23.406,111.173 23.409,111.172 23.409,111.173 23.415,111.17 23.418,111.171 23.42,111.17 23.423,111.197 23.419,111.235 23.428,111.246 23.434,111.253 23.441,111.262 23.456,111.266 23.456"
	},
	 {
		 "region": "111.377 23.129,111.376 23.126,111.376 23.129,111.377 23.129"
	 }
  ]

③.转换规则:

echarts地图中的 coordinates的数组属性对应points数组属性,例如:

coordinates:[
	[],//第一个
	[]//第二个
]
等于
points:[
	{},//第一个
	{}//第二个
]

echarts地图坐标和天地图坐标格式对比:

echarts:
[106.5674,25.0818],[106.5894,25.0598]

天地图:
111.266 23.456,111.268 23.453
所以要将天地图坐标格式转换成我们需要的echarts地图坐标格式:
例如:
111.266 23.456,111.268 23.453 ==》 [111.266,23.456],[111.268,23.453]

你可能感兴趣的:(前端)