行政区边线绘制+网格化+网页打开显示空白问题解决

一、行政区边线绘制

        步骤:1、获取行政区边线点的经纬度数据,越多越精确。2、python调用folium模块进行绘制

1、获取行政区边线点的经纬度数据

(1)网页搜索“高德地图API”,进入官网(高德开放平台 | 高德地图API (amap.com)),找到网页上方开发支持,点击web服务API,进入后在网页左侧找到“行政区域查询”并点击进入。

网页界面如下

将网页拉至最下面找到“服务示例”,在参数keywords的值中输入要绘制的行政区名称如历城区。在参数extensions的值中输入值“all”。点击运行。

点击运行结果中“districts”左边的加号,再点击“0”左边的加号,所显示的结果中,“polyline”后对应的数据即为所查找区域边界点的经纬度坐标。

注:若不确定所查找的区域是否在全国范围内有重名的,可以百度查找所要查找区域的"citycode",济南市历城区的"citycode"为0531,与查找结果一致。若有重名,点击“districts”的加号后出现的不止有“0”,需自行对应"citycode"值找到要找的结果。

(2)数据处理

 python中定义一个变量a,将上述结果双引号中的所有值以字符串形式赋予a

a='117.130703,36.592404;117.131943,36.592259;117.133876,36.593159;117.138164,36.597533;117.138757,36.598603;117.138998,36.604235;117.13872,36.608435;117.138387,36.608925;117.139201,36.611973;117.138786,36.615641;117.139996,36.61942;117.142819,36.621264;117.143592,36.621488;117.146414,36.621987;117.147212,36.622422;117.14724,36.623519;117.146644,36.623714;117.146145,36.624235;117.140203,36.626076;117.136834,36.62772;117.135579,36.629563;117.135484,36.631016;117.134075,36.631854;117.134046,36.633264;117.134558,36.633713;117.134418,36.634462;117.135513,36.634789;117.134796,36.635083;117.134765,36.636604;117.135473,36.637241;117.13484,36.638834;117.134946,36.642615;117.135011,36.644757;117.134571,36.646435;117.134946,36.648071;117.138408,36.649344;117.138433,36.649354;117.137443,36.64992;117.13829,36.651504;117.138057,36.651558;117.136985,36.651652;117.134519,36.651737;117.135016,36.652833;117.135202,36.653773;117.135269,36.654488;117.135278,36.655341;117.137167,36.655309;117.137183,36.656126;117.137194,36.657133;117.137194,36.657477;117.137215,36.65851;117.137613,36.658915;117.137619,36.658918;117.137565,36.659581;117.140499,36.660542;117.141904,36.661007;117.142019,36.661118;117.142025,36.661244;117.141903,36.66127;117.141887,36.66142;117.136486,36.668305;117.136337,36.668809;117.137374,36.669229;117.138266,36.669656;117.137935,36.670169;117.138129,36.670405;117.138429,36.670662;117.138729,36.670934;117.138962,36.671432;117.139846,36.671248;117.140231,36.671359;117.140516,36.671436;117.140473,36.671806;117.140404,36.672382;117.14105,36.672267;117.141659,36.671299;117.141981,36.670567;117.143384,36.670891;117.14431,36.67068;117.14506,36.670558;117.145053,36.669181;117.145738,36.669174;117.145807,36.66842;117.146012,36.667879;117.149294,36.668489;117.149404,36.66768;117.151213,36.667927;117.151429,36.666984;117.153171,36.667201;117.153572,36.667249;117.153835,36.66728;117.154146,36.667315;117.154408,36.666129;117.154467,36.665819;117.155566,36.666059;117.155581,36.666059;117.155951,36.665819;117.156203,36.665663;117.15659,36.665421;117.156622,36.665104;117.156783,36.665035;117.157266,36.665095;117.157882,36.665505;117.158166,36.665698;117.158493,36.665728;117.158815,36.665753;117.15903,36.665771;117.159219,36.664724;117.159491,36.664773;117.161901,36.665164;117.162348,36.664656;117.163281,36.663593;117.164435,36.662251;117.164467,36.661122;117.165755,36.660881;117.167212,36.659233;117.17039,36.659036;117.172461,36.658007;117.174719,36.658739;117.176007,36.658837;117.179366,36.659081;117.180644,36.661177;117.179636,36.662786;117.179861,36.663638;117.177554,36.664206;117.177565,36.664817;117.177479,36.666547;117.176695,36.666529;117.176673,36.667114;117.176566,36.667519;117.176567,36.667525;117.176437,36.668431;117.176887,36.668782;117.176975,36.668827;117.175462,36.669111;117.175441,36.670462;117.17442,36.670477;117.174356,36.670891;117.174028,36.670955;117.17354,36.671047;117.173079,36.67114;117.172446,36.671923;117.172227,36.672384;117.171924,36.673997;117.171905,36.6741;117.171602,36.675715;117.172908,36.67582;117.173136,36.677376;117.173295,36.678239;117.173045,36.678374;117.172995,36.679305;117.173006,36.680037;117.171836,36.680801;117.171739,36.681137;117.171622,36.681491;117.170946,36.681447;117.171053,36.680776;117.170668,36.680656;117.170496,36.680191;117.16997,36.680182;117.170045,36.680663;117.170335,36.680734;117.170495,36.6823;117.170011,36.682423;117.168468,36.682041;117.167898,36.683644;117.16887,36.685306;117.169146,36.685772;117.169353,36.686124;117.170046,36.687632;117.168892,36.688473;117.168639,36.688657;117.168618,36.689956;117.168665,36.691026;117.169744,36.690989;117.169798,36.691377;117.170134,36.691471;117.169872,36.692123;117.169871,36.692129;117.169909,36.693619;117.169957,36.695332;117.166887,36.69697;117.166297,36.697684;117.165832,36.69825;117.167222,36.708086;117.164304,36.708147;117.164324,36.707458;117.16426,36.706513;117.163244,36.706513;117.163176,36.706254;117.163012,36.705958;117.162781,36.705576;117.163446,36.705531;117.163489,36.705351;117.163141,36.705364;117.162781,36.704766;117.16336,36.704799;117.163379,36.703792;117.163329,36.701865;117.163623,36.701129;117.162167,36.701163;117.160996,36.701203;117.159847,36.701228;117.159865,36.701776;117.159811,36.702751;117.159796,36.702882;117.159786,36.70293;117.159055,36.70417;117.158894,36.704491;117.158753,36.706134;117.156069,36.706095;117.156419,36.704181;117.155661,36.704146;117.155654,36.704147;117.15578,36.702144;117.155818,36.701034;117.156696,36.700114;117.156248,36.699458;117.156106,36.699987;117.155686,36.700082;117.155732,36.701384;117.155729,36.701389;117.155376,36.701571;117.155086,36.701424;117.155466,36.699323;117.155701,36.698916;117.155086,36.698481;117.154672,36.698251;117.154206,36.69829;117.153981,36.698239;117.153684,36.698168;117.152951,36.698017;117.152726,36.697862;117.152639,36.697613;117.151974,36.697639;117.152033,36.696057;117.150343,36.695107;117.150257,36.696134;117.150717,36.696147;117.150706,36.697292;117.151254,36.69739;117.151227,36.69764;117.151147,36.698568;117.151049,36.700596;117.150835,36.700685;117.150649,36.70026;117.150632,36.699661;117.150799,36.698287;117.150311,36.698225;117.150031,36.698939;117.149776,36.699224;117.149454,36.700682;117.14
### 实现高德地图行政区划边界绘制的方法 要在高德地图上实现行政区划边界的绘制,可以利用高德地图 JavaScript API 提供的功能模块 `AMap.DistrictSearch` 或者更高级的组件来完成。以下是详细的说明: #### 使用 AMap.DistrictSearch 获取行政区数据并绘制边界 通过 `AMap.DistrictSearch` 可以查询指定地区的地理信息,包括其边界坐标集合。这些坐标可以通过多边形工具 `AMap.Polygon` 来渲染到地图上。 ```javascript // 初始化地图实例 var map = new AMap.Map('container', { zoom: 5, center: [108.946279, 34.26372] // 设置初始视图中心点为中国中部地区 }); // 创建 DistrictSearch 实例 var district = new AMap.DistrictSearch({ level: 'city', // 查询级别为城市级 extensions: 'all' // 返回行政区边界坐标等全部信息 }); // 调用插件方法获取特定城市的行政区信息 district.search('西安市', function(status, result) { if (status === 'complete') { var bounds = result.districtList[0].boundaries; // 获取边界数组 if (bounds) { for (var i = 0, l = bounds.length; i < l; i++) { // 将每一组边界坐标转换成 Polygon 对象并添加至地图 var polygon = new AMap.Polygon({ path: bounds[i], strokeWeight: 1, fillOpacity: 0.4, fillColor: '#80d8ff', strokeColor: '#0091ea' }); map.add(polygon); // 添加多边形到地图 } // 自动调整视野范围以便显示完整的多边形 map.setFitView(); } else { console.log('未找到该区域的边界'); } } else { console.error('请求失败:', status); } }); ``` 上述代码展示了如何加载一个具体的城市(如西安)的地图,并将其行政边界作为多边形覆盖物呈现在地图之上[^1]。 #### 利用 html2canvas 截取含边界效果的画面 如果还需要进一步处理生成的地图图像,则可引入第三方库 **html2canvas** 完成截图操作。此过程涉及先隐藏不必要的 DOM 元素再执行捕捉动作。 ```javascript import html2canvas from 'html2canvas'; function captureMap() { const containerElement = document.getElementById('container'); // 地图容器 html2canvas(containerElement).then(canvas => { document.body.appendChild(canvas); // 显示捕获后的图片于页面底部 }).catch(err => { console.error('截屏错误:', err.message); }); } ``` 注意,在实际项目里可能需要额外考虑样式隔离等问题以免影响最终输出质量[^2]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值