本篇的主要思路是通过绘制全国的行政区划边界点来添加遮罩层从而视觉上达到只显示中国区域的效果,具体实现看代码:
一、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使用百度地图仅显示中国区域,实现大数据热点图,感谢大神提供资源!