如何利用高德地图URI加载区域边界

高德URI

以下是高德地图API官网中URI API以及行政区查询的相关页面展示。在行政区域查询中对相应的参数也有详细的描述。


利用URI API进行调用的实例：在返回的数据中districts中包含了相应区域的坐标，中心位置等信息。

在地图上加载相应的边界

如何利用高德地图 URI API获取的行政区域数据，在地图上加载相应的边界呢？首先要根据返回的数据，获取坐标点集数据。但是需要对数据进行相应的处理。
因为从高德地图API获取的数据，不同的地理块按照 | 划分，块里面的地理信息按照 ； 划分，经纬度信息按照 ， 划分，因此对于获取到的数据需要进行三次分割处理。并且对于不同的块，都需要添加一个Polygon才能正确完整的绘制。示例代码如下,根据所要获取的行政区名调用addLayerByGaode函数，解析、分割相应的数据，进行行政边界绘制。

 function addPolygon(data){
            				 //console.log(data);
            				 var searchSource = globalMa.searchLayer.getSource();
     						var targetArr = new Array();
     						$.each(data,function(index,obj){
     							var Data_Div3 = obj.split(',');
     							var newArr = new Array();
     							var transArr=(proj4('EPSG:4326','EPSG:3857',[Data_Div3[0],Data_Div3[1]]));
     							newArr.push(transArr[0]);
     							newArr.push(transArr[1]);
     							targetArr.push(newArr);
     						})

     						if(targetArr.length>0){
     							var polygonArr = new Array();
         						polygonArr.push(targetArr);

         						var myPolygon = new ol.geom.Polygon(polygonArr);
         						var feature = new ol.Feature(myPolygon);
         						//添加相应的图层
         						searchSource.addFeature(feature);
     						}
            			 }
            			 
            			 function addLayerByGaode(name){
            				 //console.log(name);
            				 var searchLayer = new ol.layer.Vector({
      							source:new ol.source.Vector({}),
      							style:new ol.style.Style({
      								stroke:new ol.style.Stroke({
      									color:'rgb(255,0,0)',
      									width:2
      								})
      							}),
      							visible:true,
      							zIndex: 10
      						});
            				 searchLayer.set('name',name);
                 			 map.addLayer(searchLayer);
                 			globalMa.searchLayer=searchLayer;
                 			 
            				 $.ajax({
            					 url:'https://restapi.amap.com/v3/config/district?key=你申请的key值&&keywords='+`${name}`+'&subdistrict=0&extensions=all',
            					 type:'GET',
            					 dataType:"json",
            					 success:function(res){
            						 var areaCenter = res.districts[0].center.split(",");
            						 areaCenter = proj4('EPSG:4326','EPSG:3857',[areaCenter[0],areaCenter[1]]);
            						 
            						 map.getView().setCenter(areaCenter);
            						 //获取相应的边界的坐标
            						 var Data = res.districts[0].polyline;

            						 //对结果进行第一次分割，按照|符号  因为从高德地图API获取的数据，不同的地理块按照|分，块里面的地理信息按照；分，经纬度按照，分，因此对于获取到的数据需要进行三次处理
            						 var Data_Div1 = Data.split('|');
            						 //console.log(Data_Div1);
            						 
            						 var Data_Div2 = new Array();
	           						 for(var i=0;i<Data_Div1.length;i++){
	           							 Data_Div2 = Data_Div1[i].split(';');
	           							addPolygon(Data_Div2);
	           						 }
            					 },
            					 error:function(){
            						 console.log('获取出错');
            					 }
            				 })
            			 }

结果图：