• 百度地图api 区级以下行政区划


    我们在使用百度地图api想要展示苏州市吴中区各乡镇的行政区范围;

    百度api有提供了“添加行政区划”的示例:http://lbsyun.baidu.com/jsdemo.htm#c1_10

    但该功能目前只能展示区级及以上范围行政区划

    -------------------------------------------------------------------------------------------------------------------------------------

    研究了百度行政区划实现原理,它也是存储了行政区边界点集合,显示时通过点集合绘制多边形polygon,

    那我们自己也可以按照这个逻辑来实现乡镇行政区划的展示,

    那现在的问题就是如何来获取行政区边界的点集;

    从百度地图api V1.1版本,polygon类提供了enableEditing()功能,我们可以在地图上拖动编辑边界点,

    然后,再通过polygon类提供的getPath()方法返回边界点数组,

    将我们自己编辑过的边界点数组存储起来,就实现了行政区划的数字话工作(当然,这个数字话比起专业的GIS平台还是有差距)

    ---------------------------------------------------------------------------------------------------------------------------------------

    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(120.49, 31.15), 12);  // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
        map.setCurrentCity("苏州");          // 设置地图显示的城市 此项是必须设置的
    
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.enableContinuousZoom(true);    //启用地图惯性拖拽,默认禁用
    
        map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
        map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT })); //向地图中添加比例尺控件
    //------------------------ 显示镇级范围 ------------------ var polygons = []; function getBoundary() { //var bdary = new BMap.Boundary(); //bdary.get("苏州市吴中区", function (rs) { //获取行政区域 // //map.clearOverlays(); //清除地图覆盖物 // var count = rs.boundaries.length; //行政区域的点有多少个 // if (count === 0) { // alert('未能获取当前输入行政区域'); // return; // } // var pointArray = []; // for (var i = 0; i < count; i++) { // var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物 // ply.enableEditing(); //范围可编辑 // map.addOverlay(ply); //添加覆盖物 // pointArray = pointArray.concat(ply.getPath()); // } // map.setViewport(pointArray); //调整视野 // addlabel(); //}); var areas = []; var dongshan = "120.3651,31.019986;120.34469,31.038057;120.336067,31.043751;120.340091,31.051423;120.336929,31.058106;120.34814,31.05959;120.354177,31.066767;120.365675,31.072458;120.363663,31.081861;120.366537,31.087551;120.376311,31.090273;120.384935,31.093241;120.392983,31.113278;120.403332,31.119213;120.411668,31.116988;120.417992,31.108331;120.421442,31.102394;120.43064,31.098931;120.439552,31.106352;120.442749,31.108377;120.44645,31.109769;120.448283,31.108748;120.450511,31.107821;120.460931,31.105347;120.468297,31.103523;120.47516,31.102008;120.475484,31.101652;120.468297,31.088046;120.463123,31.074685;120.452775,31.06454;120.43409,31.032116;120.428916,31.022957;120.429203,30.997206;120.389246,30.997453;120.382635,31.001168;120.381485,31.009587"; var dongshan_sml = "120.311273,31.030693;120.308255,31.027723;120.301212,31.029579;120.298481,31.026609;120.296613,31.024257;120.2969,31.02141;120.292301,31.021657;120.274335,31.024133;120.278216,31.02797;120.285114,31.027227;120.289139,31.029579;120.292876,31.035025;120.297906,31.041832;120.306818,31.04109"; var linhu = "120.475807,31.102039;120.480837,31.112551;120.483568,31.117621;120.48709,31.120697;120.505262,31.121856;120.513886,31.122104;120.514461,31.117899;120.521648,31.116663;120.523372,31.123588;120.530271,31.126061;120.525672,31.136447;120.525959,31.144359;120.526247,31.15326;120.525977,31.161229;120.527702,31.170746;120.529238,31.18049;120.52834,31.183889;120.526417,31.18375;120.522734,31.183564;120.518422,31.183255;120.510014,31.182761;120.499306,31.182421;120.49945,31.193264;120.488814,31.191905;120.485796,31.188445;120.480047,31.180784;120.471567,31.172372;120.450933,31.149057;120.442884,31.142134;120.43506,31.136771;120.446414,31.126834;120.44972,31.123031;120.450511,31.119878;120.450187,31.11657;120.448858,31.111191;120.446989,31.110016;120.447852,31.109336;120.452127,31.107666;120.463841,31.104883"; var hengjing = "120.573025,31.130466;120.569576,31.117606;120.547729,31.095345;120.532494,31.090892;120.530482,31.095839;120.537668,31.106724;120.520133,31.11167;120.523363,31.123588;120.530289,31.126026;120.525582,31.136412;120.526085,31.161322;120.529283,31.180386;120.526579,31.19033;120.525259,31.193979;120.523534,31.197809;120.516635,31.201886;120.514573,31.207303;120.516922,31.21004;120.519653,31.209917;120.522096,31.214117;120.522191,31.220151;120.526072,31.220398;120.535701,31.219162;120.544613,31.208662;120.557261,31.183703;120.56186,31.173569;120.572209,31.171839;120.580545,31.168626;120.597172,31.161125;120.584811,31.149259;120.5782,31.140852;120.575038,31.135659" var yuexi = "120.561523,31.243425;120.576471,31.223602;120.586819,31.225578;120.601839,31.228604;120.60033,31.238979;120.607013,31.237003;120.610103,31.233607;120.612116,31.234224;120.61614,31.236324;120.633819,31.236077;120.637843,31.236571;120.639424,31.226319;120.646323,31.225825;120.646323,31.219896;120.636837,31.215264;120.632206,31.211419;120.630913,31.204377;120.631631,31.194616;120.628182,31.186337;120.619989,31.175339;120.601879,31.15853;120.579831,31.168912;120.572141,31.171816;120.561811,31.173747;120.556924,31.183757;120.544707,31.208593;120.535364,31.21897;120.538526,31.22811;120.543126,31.234533;120.554624,31.233792;"; var xukou = "120.46341,31.262179;120.459961,31.271316;120.465135,31.274032;120.476346,31.267612;120.491581,31.261685;120.507104,31.260697;120.513643,31.261994;120.514434,31.248596;120.508972,31.248473;120.511056,31.241248;120.511775,31.237729;120.515512,31.233591;120.52198,31.232974;120.522123,31.225069;120.52701,31.220498;120.52198,31.219881;120.522052,31.213889;120.519321,31.21006;120.517021,31.210183;120.515009,31.207465;120.516159,31.201906;120.523345,31.197705;120.526363,31.191033;120.528376,31.183865;120.499342,31.18263;120.499486,31.19338;120.487988,31.192145;120.488563,31.195975;120.491868,31.20277;120.491006,31.213642;120.484107,31.223895;120.477208,31.223278;120.47189,31.225624;120.457302,31.226304;120.450403,31.225192;120.458955,31.2318;120.4453,31.234517;120.440845,31.236247;120.442282,31.239211;120.436102,31.243286;120.429203,31.246744;120.428987,31.249522;120.428987,31.249399;120.429275,31.249646;120.432149,31.252857;120.437826,31.25156;120.442282,31.248473;120.4476,31.244151;120.467938,31.237049;120.468513,31.239149;120.463985,31.244645"; var mudu = "120.535356,31.21917;120.538446,31.228002;120.54283,31.234424;120.554544,31.233869;120.561514,31.243193;120.562664,31.252146;120.574019,31.256962;120.576031,31.260296;120.565961,31.269896;120.564811,31.283229;120.537512,31.279679;120.535212,31.293504;120.530325,31.295973;120.529741,31.302484;120.516815,31.297454;120.51509,31.301403;120.511928,31.303378;120.511928,31.304612;120.509916,31.302638;120.510203,31.297701;120.505029,31.294492;120.495543,31.297701;120.496405,31.306834;120.488644,31.310536;120.485769,31.316706;120.479733,31.31794;120.469384,31.319668;120.462198,31.321642;120.450987,31.319668;120.447959,31.30631;120.438186,31.292486;120.415189,31.27792;120.415594,31.261407;120.432158,31.252825;120.438051,31.251529;120.447537,31.244304;120.468091,31.236833;120.468594,31.239303;120.463922,31.244675;120.463276,31.262333;120.45997,31.271284;120.465,31.274185;120.476427,31.26758;120.49195,31.26153;120.507041,31.260543;120.513653,31.262271;120.514515,31.248627;120.509053,31.248503;120.511712,31.237883;120.515449,31.233622;120.522061,31.233004;120.522133,31.225037;120.526948,31.220529"; var xiangshan = "120.401158,31.25376;120.400735,31.258946;120.415575,31.261415;120.418513,31.259849;120.420714,31.258822;120.422043,31.258097;120.424981,31.256515;120.424981,31.256515;120.432095,31.25281;120.428933,31.249353;120.429328,31.246559;120.436371,31.243101;120.442192,31.239149;120.440683,31.236247;120.44521,31.234456;120.458721,31.231738;120.449451,31.224204;120.445857,31.224636;120.442911,31.223339;120.416968,31.214631;120.397277,31.221795;120.386785,31.216236;120.377299,31.216854;120.37428,31.2024;120.376724,31.201535;120.373849,31.191156;120.370543,31.19128;120.367525,31.192268;120.363644,31.188808;120.360914,31.188561;120.35732,31.18609;120.347259,31.174968;120.35114,31.173237;120.349128,31.170395;120.343091,31.171013;120.338348,31.173855;120.343666,31.178552;120.345822,31.17608;120.355308,31.186584;120.353583,31.189426;120.353871,31.192145;120.356745,31.192145;120.360051,31.193874;120.36077,31.200423;120.362926,31.203141;120.365513,31.204377;120.372124,31.202523;120.375143,31.216854;120.366806,31.222042;120.367786,31.226867;120.370948,31.229585;120.37428,31.233776;120.383191,31.237976;120.391815,31.237976;120.399505,31.242275;120.403673,31.250549"; var jinting = "120.33966,31.16783;120.339947,31.157448;120.343397,31.152998;120.349433,31.155964;120.354895,31.15547;120.361506,31.150278;120.364094,31.140882;120.366968,31.134453;120.35087,31.118379;120.343684,31.119121;120.333623,31.110959;120.320112,31.108733;120.312064,31.096365;120.306027,31.088943;120.30574,31.079046;120.304302,31.072118;120.304302,31.065437;120.282456,31.070881;120.250835,31.077314;120.25256,31.088201;120.256584,31.096117;120.25256,31.097354;120.244511,31.096859;120.245373,31.102054;120.237612,31.104528;120.228701,31.108485;120.217203,31.111454;120.212028,31.119121;120.201967,31.122089;120.19938,31.130744;120.208866,31.131733;120.222089,31.130744;120.23675,31.131486;120.246811,31.139399;120.262621,31.147311;120.274694,31.152256;120.280156,31.159673;120.276994,31.167336;120.27182,31.173763;120.274407,31.182661;120.279868,31.180436;120.281593,31.173268;120.279868,31.169066;120.282743,31.162392;120.30114,31.162639;120.295966,31.168077;120.287055,31.171044;120.293666,31.175493;120.300853,31.186121;120.306027,31.182908;120.306602,31.177223;120.314938,31.179448;120.312639,31.174504;120.307752,31.160909;120.311489,31.1572;120.321837,31.157448;120.320112,31.162886"; var guangfu = "120.448067,31.306618;120.432113,31.306495;120.420327,31.311431;120.421477,31.332901;120.40078,31.333148;120.397331,31.335616;120.375484,31.331174;120.379796,31.325745;120.358524,31.324018;120.363986,31.316367;120.350296,31.310567;120.352451,31.307606;120.358919,31.305508;120.362081,31.306001;120.364812,31.307852;120.364668,31.304397;120.355614,31.299337;120.354895,31.301805;120.349433,31.300694;120.346127,31.296745;120.338797,31.291067;120.337072,31.288228;120.341384,31.282673;120.339228,31.274279;120.329599,31.276254;120.316663,31.280328;120.316519,31.277241;120.3181,31.275019;120.316519,31.270451;120.318963,31.269217;120.319538,31.266871;120.334917,31.264772;120.34584,31.267488;120.352883,31.269834;120.357769,31.272427;120.360644,31.269093;120.367112,31.268476;120.371855,31.26292;120.37746,31.265513;120.38091,31.265266;120.384503,31.26934;120.388527,31.271562;120.391833,31.269711;120.39442,31.266871;120.400888,31.258969;120.415584,31.261469;120.415441,31.277735;120.438006,31.292301"; var luzhi = "120.87071,31.317417;120.86223,31.311;120.858924,31.301374;120.855187,31.290882;120.850588,31.288167;120.843833,31.290759;120.838802,31.294956;120.814656,31.299522;120.809769,31.291253;120.805314,31.285698;120.81135,31.280637;120.812069,31.275946;120.809338,31.273106;120.80517,31.272983;120.792809,31.274217;120.784329,31.273477;120.780592,31.268662;120.779155,31.262612;120.778005,31.254339;120.769884,31.246065;120.765716,31.247918;120.761979,31.249399;120.760111,31.247485;120.758242,31.24693;120.752637,31.245448;120.748181,31.242607;120.746097,31.239335;120.759751,31.232665;120.775562,31.224266;120.786485,31.217349;120.78476,31.211172;120.78052,31.206601;120.780664,31.200423;120.791372,31.194925;120.796762,31.193319;120.798558,31.191527;120.798918,31.189736;120.796905,31.185658;120.807326,31.179232;120.818105,31.193813;120.822992,31.198385;120.830322,31.201597;120.841964,31.20728;120.865248,31.217287;120.875309,31.213334;120.881346,31.214569;120.888964,31.215434;120.902905,31.216546;120.902905,31.220375;120.906355,31.220869;120.907217,31.22581;120.904343,31.234333;120.901899,31.240261;120.898306,31.245818;120.895144,31.244583;120.892557,31.260389;120.887095,31.273847;120.887526,31.290265;120.880915,31.290882;120.878903,31.295696;120.879334,31.299275;120.880196,31.306804;120.87804,31.311493"; areas.push(dongshan); areas.push(dongshan_sml); areas.push(linhu); areas.push(hengjing); areas.push(yuexi); areas.push(xukou); areas.push(mudu); areas.push(xiangshan); areas.push(jinting); areas.push(guangfu); areas.push(luzhi); colors = ["#fff492", "#fff492", "#98d057", "#e19ee6", "#1ad3da", "#ffc11d", "#98e800", "#b95817", "#03a9f4", "#39d0a4", "#8bbb53"]; var pointArray = []; for (var i = 0; i < areas.length; i++) { var ply = new BMap.Polygon(areas[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物 ply.setFillColor(colors[i]) //设置多边形的填充颜色 ply.setFillOpacity(0.35); polygons.push(ply); //加入多边形数组,以之后获取多边形边界点集 //if (i == 3) //{ // ply.enableEditing(); //范围可编辑 【编辑的时候开启】 //} map.addOverlay(ply); //添加覆盖物 pointArray = pointArray.concat(ply.getPath()); } map.setViewport(pointArray); //调整视野 addlabel(); } setTimeout(function () { getBoundary(); }, 2000); function addlabel() { var pointArray = [ new BMap.Point(120.384935, 31.063241), //东山镇 new BMap.Point(120.484461, 31.140899), //临湖镇 new BMap.Point(120.528582, 31.159412), //横泾镇 new BMap.Point(120.588424, 31.216319), //越溪镇 new BMap.Point(120.486159, 31.241906), //胥口镇 new BMap.Point(120.500029, 31.281492), //木渎镇 new BMap.Point(120.403673, 31.240549), //香山镇 new BMap.Point(120.288866, 31.131733), //金庭镇 new BMap.Point(120.387959, 31.306318), //光福镇 new BMap.Point(120.818048, 31.251493) //甪直镇 ]; var optsArray = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]; var labelArray = []; var contentArray = [ "东山镇", "临湖镇", "横泾镇", "越溪镇", "胥口镇", "木渎镇", "香山镇","金庭镇","光福镇", "甪直镇"]; for (var i = 0; i < pointArray.length; i++) { optsArray[i].position = pointArray[i]; labelArray[i] = new BMap.Label(contentArray[i], optsArray[i]); labelArray[i].setStyle({ color: "red", fontSize: "12px", height: "20px", lineHeight: "20px", fontFamily: "微软雅黑" }); map.addOverlay(labelArray[i]); } } //获取编辑后的边界点集【编辑完后,可以通过 button 来触发这个方法】 function getpoints() { for (var j = 0; j < polygons.length; j++) { var polyline =polygons[j]; var pts = polyline.getPath(); var sss = ""; for (var i = 0; i < pts.length; i++) { sss += pts[i].lng + "," + pts[i].lat + ";"; } console.log(sss); //【将点集输出到控制台】 } alert('已输出边界点集合!'); } </script>

    编辑时的效果:

    将边界点集输出到控制台:

    最后将边界点集合存储下来,或者像我这边一样,直接写在js初始化函数里。

  • 相关阅读:
    MySQL数据库封装和分页查询
    程序员的价值在哪里?
    奇葩的程序员
    京东咚咚架构演进
    程序员必看的《黑客帝国》,你看懂了吗?
    微信后台技术“干货们”带来的启发
    drf框架 2 drf框架的请求生命周期(as_view和dispatch方法), 请求、解析、渲染、响应、异常, 序列化组件 ,ORM配置回顾(media文件配置),应用在settings.py中INSTALLED_APPS注册意义 ,数据库配置
    drf框架, 接口(api) Django FBV => CBV drf框架的基础试图类 drf核心组件 群查与单查 python换源
    前端Vue框架 05 第三方插件(vuex: 组件间交互的(移动端), axios
    前端Vue框架 04 路由:逻辑跳转、路由传参 项目组件的数据局部化处理data(){ return{} } 组件的生命周期钩子 组件间通信 全局配置css, js
  • 原文地址:https://www.cnblogs.com/RiseSoft/p/7979637.html
Copyright © 2020-2023  润新知