【百度地图】仅显示中国边界区域

本篇的主要思路是通过绘制全国的行政区划边界点来添加遮罩层从而视觉上达到只显示中国区域的效果，具体实现看代码：
一、Js

//绘制中国区域行政边界
function drawBoundary() {/*画遮蔽层的相关方法*思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。*      这样就做出了一个经过多次西北角的闭合多边形*///定义中国东南西北端点，作为第一层//向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点var pStart = new BMap.Point(180,90);var pEnd = new BMap.Point(0,-90);var pArray = [new BMap.Point(pStart.lng,pStart.lat),new BMap.Point(pEnd.lng,pStart.lat),new BMap.Point(pEnd.lng,pEnd.lat),new BMap.Point(pStart.lng,pEnd.lat)];//循环添加各闭合区域$.get('./ChinaPly.json',{},function (data) { //此处替换为自己的文件地址var chinaPly=data.chinaPly;$.each(chinaPly,function (index,value) {pArray.push(new BMap.Point(value[0],value[1]));});//添加遮蔽层var plyall = new BMap.Polygon(pArray,{ strokeOpacity: 1, strokeColor: "#091934",strokeWeight: 1, fillColor: "#091934",fillOpacity: 1 }); //建立多边形覆盖物map.addOverlay(plyall);pStart = new BMap.Point(180,90);pEnd = new BMap.Point(0,-90);pArray = [new BMap.Point(135.077218,48.454352),new BMap.Point(pStart.lng,pStart.lat),new BMap.Point(pStart.lng,pEnd.lat),new BMap.Point(135.077218,48.454352)];var boundary = new BMap.Polygon(pArray,{ strokeOpacity: 1, strokeColor: "#091934",strokeWeight: 1, fillColor: "#091934",fillOpacity: 1}); //建立多边形覆盖物map.addOverlay(boundary);});
}

在初始化地图以及地图缩放时调用此方法，比如：

map.addEventListener("zoomstart", function () {drawBoundary(); //绘制中国区域行政边界});

二、Json文件

{"chinaPly":[[135.077218,48.544352],[134.92218,48.584352],[134.827218,48.534352],[134.727669,48.495377],[134.304531,48.394091],[133.513447,48.177476],[132.832747,48.054205],[132.519993,47.789172],[131.765704,47.813962],[131.103402,47.776772],[130.919429,48.331824],[130.77225,48.868729],[129.907577,49.351849],[128.73015,49.699156],[127.791888,49.85404],[127.791888,50.492084],[126.927215,51.616759],[126.467283,52.579818],[125.952158,53.059077],[124.701142,53.313247],[123.56051,53.664362],[121.555204,53.46722],[120.340983,53.125528],[119.95464,52.579818],[120.616942,52.523746],[120.506559,52.095236],[119.862653,51.616759],[119.365926,50.959196],[119.089967,50.362806],[119.108364,50.05583],[118.133307,49.925357],[117.471005,49.794528],[116.808702,49.889712],[116.385564,49.758785],[115.962426,48.953617],[115.520891,48.147476],[115.796851,47.677465],[116.27518,47.652609],[117.103059,47.652609],[118.004526,47.801568],[118.887596,47.577968],[119.402721,47.127871],[119.402721,46.800397],[118.464459,46.825659],[117.103059,46.648575],[115.980824,46.088213],[115.226534,45.702829],[114.159491,45.275796],[112.761297,45.171782],[111.639061,45.132727],[111.436691,44.55683],[111.51028,44.001703],[110.682402,43.387647],[108.897864,42.658724],[106.892559,42.522781],[103.82021,42.140555],[102.422016,42.536389],[101.336575,42.82146],[99.478448,42.929712],[97.601924,42.997272],[96.019756,43.815487],[92.72664,45.288784],[91.144473,45.599605],[91.457227,46.483616],[90.794924,47.553064],[89.562305,48.221295],[88.2377,48.953617],[87.722576,49.279683],[87.097067,49.255604],[86.60034,49.122957],[86.177203,48.710696],[85.533297,48.344091],[85.404516,47.875888],[85.349324,47.390897],[84.926186,47.215692],[83.233635,47.315881],[82.865689,47.328391],[82.258578,45.844449],[82.368962,45.366651],[82.093003,45.30177],[80.989165,45.275796],[79.903724,45.015402],[80.326862,44.332772],[80.510835,43.642047],[80.621219,43.186043],[80.27167,43.010775],[79.885327,42.304653],[79.259819,41.838593],[78.487133,41.576647],[77.916816,41.341363],[77.272911,41.16086],[76.739389,41.02167],[76.26106,40.546202],[75.672346,40.75639],[74.881262,40.630357],[74.255754,40.293095],[73.777425,39.939968],[73.74063,39.556517],[73.53826,39.34256],[73.685438,38.725549],[74.034987,38.407771],[74.458125,38.335352],[74.734084,38.074036],[74.844468,37.577865],[74.678892,37.21089],[74.6237,36.975076],[75.414784,36.501232],[75.801127,35.934721],[76.518622,35.379154],[77.309706,35.137703],[77.972008,34.758986],[78.376749,34.241106],[78.523927,33.473647],[78.7079,32.978834],[78.450338,32.745921],[78.30316,32.340745],[78.431941,32.04349],[78.671106,31.572152],[78.855079,31.145879],[79.425395,30.797108],[80.087697,30.447053],[81.301919,29.855455],[81.90903,30.0157],[82.7921,29.485907],[84.539843,28.661613],[85.71727,28.124721],[86.821108,27.732537],[87.998535,27.69979],[88.568851,27.716165],[88.863208,27.108656],[89.580703,27.190949],[89.654292,27.765274],[90.923705,27.650651],[91.751584,27.223849],[92.04594,26.778874],[92.965805,26.646689],[93.830478,26.960375],[94.860727,27.453873],[96.185332,27.798001],[97.123594,27.503101],[97.620321,27.896122],[97.675513,28.059457],[98.080254,27.306056],[98.595378,27.009824],[98.393008,26.066566],[97.804294,25.483523],[97.528335,24.847254],[97.417951,24.10637],[97.804294,23.717348],[98.595378,23.886634],[98.834543,23.123105],[99.239283,22.697005],[99.165694,22.303805],[99.386462,21.857966],[100.251135,21.445169],[100.839848,21.290063],[101.704521,21.031186],[102.05407,21.152053],[101.998878,21.582901],[101.962083,22.132497],[102.587591,22.355156],[103.599443,22.338041],[104.482513,22.560368],[105.383981,22.799392],[106.083078,22.59454],[106.469421,22.286683],[106.874162,21.754879],[107.315697,21.514051],[107.812424,21.410715],[107.775629,21.134792],[106.929353,20.269201],[106.175064,19.17158],[106.377435,18.470789],[107.297299,17.23746],[109.008248,15.675143],[109.688948,13.705222],[109.652153,11.664031],[108.750686,9.571001],[108.198767,6.876803],[108.493124,5.090099],[109.817729,3.612656],[111.10554,3.298351],[114.71141,5.514272],[116.256783,7.556636],[118.758815,10.883133],[119.531502,13.669242],[119.494707,16.617614],[120.414572,18.961654],[121.51841,20.633358],[122.751029,22.303805],[123.247756,23.378111],[124.811526,25.68375],[126.577667,25.900278],[127.479134,26.67975],[128.454191,28.189945],[128.766945,29.93561],[128.73015,31.650877],[127.957464,32.153119],[127.221572,32.745921],[127.019202,33.596907],[125.988953,33.827543],[125.731391,34.546135],[125.878569,35.454458],[125.731391,36.634799],[125.80498,37.51927],[124.425183,37.972159],[124.498772,38.58128],[125.013896,39.242487],[124.590758,39.471014],[124.296402,39.840762],[124.388388,40.081441],[124.940307,40.335346],[125.731391,40.630357],[126.448885,40.96591],[126.798434,41.493704],[127.111188,41.410654],[127.883875,41.271998],[128.490985,41.452192],[128.307012,41.879854],[128.950918,41.921089],[129.484439,42.12686],[129.999564,42.549994],[130.073153,42.807915],[130.404304,42.495557],[130.77225,42.359256],[130.698661,42.726583],[131.195388,42.848541],[131.360964,43.494895],[131.342566,44.491021],[131.820896,45.002351],[132.998323,44.976239],[133.623831,45.599605],[134.102161,46.394582],[134.37812,47.228226],[134.874847,47.851127],[134.985231,48.233588],[135.13241,48.454352],[135.077218,48.474352]]
}

三、效果图

本篇参考博客js使用百度地图仅显示中国区域，实现大数据热点图，感谢大神提供资源！

【百度地图】仅显示中国边界区域相关推荐

js使用百度地图仅显示中国区域，实现大数据热点图
马上又到年底PPT环节了,各位实现效果之后,麻烦留言点赞.. 需求:领导需要在年会上展示我们的用户ip实时数据,做一个网页版的地图,仅仅显示中国区域. 技术分析:echart,hchart等网站都有地 ...
从百度地图批量获取中国县级以上行政区划边界坐标
从百度地图批量获取中国县级以上行政区划边界坐标不知道从什么时候开始,在Google地图或是百度地图中用城市或者省名称搜索的时候,你会发现地图上会勾勒出搜索的行政区的轮廓来,这个功能非常人性化. 比如 ...
百度地图API 显示区域边界及地名定位
百度地图API 显示区域边界及地名定位这个定位一共用了两个方法组成一个是定位绘制区域边界线,另一个是地名定位原理: 当用户输入省.市.县.区这种大地名时,我们要定位用户输入的这个位置,并显示轮廓 ...
关于百度地图API显示地区范围控制的问题
关于百度地图API显示地区范围控制的问题,这个有很多种方法,需要看个人需求下面列举两种方法 1.假如我只想在加载地图的时候显示郑州市所包含的范围,其他地方屏蔽掉,或者不让拖拽(如有图所示) 2. 控 ...
java百度地图地名定位地址_百度地图定位显示省市区街道名称，非常实用
[实例简介] 百度地图定位显示省市区街道名称,非常实用 [实例截图] [核心代码] locSDK_3.1_Demo └── locSDK_3.1_Demo ├── AndroidManifest.xm ...
【百度地图API】自行获取区域经纬度的工具
原文:[百度地图API]自行获取区域经纬度的工具摘要:上一章教大家如何建立自己的行政区域地图.这次为大家提供一个,可视化选择区域,并且能自动生成经纬度代码的工具.工具的源代码完全公开,并且做了详尽的 ...
html5获取我的位置并在百度地图上显示
html5获取我的位置并在百度地图上显示一.前言二.在线演示和GitHub源码一.前言最近有兴趣研究了下移动端的地图api,发现其实挺简单的,HTML5也提供了地理位置API:Geolocat ...
Informerd详解（2）与C#百度地图定位显示项目学习
文章目录摘要一.Informer代码部分(2) 1.1 Deconder模块代码 1.2 model.py部分源码 1.3 训练与预测阶段 1.4 小结二. C# 调用百度地图API 的Demo ...
调用百度地图只显示网格的问题
转自:推酷http://www.tuicool.com/articles/biyeY37 关于安卓调用百度地图只显示网格的问题,楼主也曾为此不知所措,曾怀疑是不是百度SDK的bug,在网上也搜了各种答 ...

【百度地图】仅显示中国边界区域

【百度地图】仅显示中国边界区域相关推荐

最新文章

热门文章