var map = new BMap.Map("map_container");
function initMap(map, "長沙市") {
var point = new BMap.Point(112.987402, 28.201509); // 創建點坐標 112.987402, 28.201509
map.centerAndZoom(point, 8); // 初始化地圖,設置中心點坐標和地圖級別。
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加縮略地圖控件
map.setCenter(cityName); // 設置地圖顯示的城市 此項是必須設置的
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE ,anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(40, 250)}));
var bdary = new BMap.Boundary();
bdary.get(cityName, function (rs) { //獲取行政區域
map.clearOverlays(); //清除地圖覆蓋物
//添加遮罩層
//思路：利用行政區划點的集合與外圍自定義東南西北形成一個環形遮罩層
//1.獲取選中行政區划邊框點的集合 rs.boundaries[0]
var strs = new Array();
strs = rs.boundaries[0].split(";");
var EN = ""; //行政區划東北段點的集合
var NW = ""; //行政區划西北段點的集合
var WS = ""; //行政區划西南段點的集合
var SE = ""; //行政區划東南段點的集合
var pt_e = strs[0]; //行政區划最東邊點的經緯度
var pt_n = strs[0]; //行政區划最北邊點的經緯度
var pt_w = strs[0]; //行政區划最西邊點的經緯度
var pt_s = strs[0]; //行政區划最南邊點的經緯度
var n1 = ""; //行政區划最東邊點在點集合中的索引位置
var n2 = ""; //行政區划最北邊點在點集合中的索引位置
var n3 = ""; //行政區划最西邊點在點集合中的索引位置
var n4 = ""; //行政區划最南邊點在點集合中的索引位置
//2.循環行政區划邊框點集合找出最東南西北四個點的經緯度以及索引位置
for (var n = 0; n < strs.length; n++) {
var pt_e_f = parseFloat(pt_e.split(",")[0]);
var pt_n_f = parseFloat(pt_n.split(",")[1]);
var pt_w_f = parseFloat(pt_w.split(",")[0]);
var pt_s_f = parseFloat(pt_s.split(",")[1]);
var sPt = new Array();
try {
sPt = strs[n].split(",");
var spt_j = parseFloat(sPt[0]);
var spt_w = parseFloat(sPt[1]);
if (pt_e_f < spt_j) { //東
pt_e = strs[n];
pt_e_f = spt_j;
n1 = n;
}
if (pt_n_f < spt_w) { //北
pt_n_f = spt_w;
pt_n = strs[n];
n2 = n;
}
if (pt_w_f > spt_j) { //西
pt_w_f = spt_j;
pt_w = strs[n];
n3 = n;
}
if (pt_s_f > spt_w) { //南
pt_s_f = spt_w;
pt_s = strs[n];
n4 = n;
}
}
catch (err) {
alert(err);
}
}
//3.得出東北、西北、西南、東南四段行政區划的邊框點的集合
if (n1 < n2) { //第一種情況 最東邊點在索引前面
for (var o = n1; o <= n2; o++) {
EN += strs[o] + ";"
}
for (var o = n2; o <= n3; o++) {
NW += strs[o] + ";"
}
for (var o = n3; o <= n4; o++) {
WS += strs[o] + ";"
}
for (var o = n4; o < strs.length; o++) {
SE += strs[o] + ";"
}
for (var o = 0; o <= n1; o++) {
SE += strs[o] + ";"
}
}
else { //第二種情況 最東邊點在索引后面
for (var o = n1; o < strs.length; o++) {
EN += strs[o] + ";"
}
for (var o = 0; o <= n2; o++) {
EN += strs[o] + ";"
}
for (var o = n2; o <= n3; o++) {
NW += strs[o] + ";"
}
for (var o = n3; o <= n4; o++) {
WS += strs[o] + ";"
}
for (var o = n4; o <= n1; o++) {
SE += strs[o] + ";"
}
}
//4.自定義外圍邊框點的集合
var E_JW = "170.672126, 39.623555;"; //東
var EN_JW = "170.672126, 81.291804;"; //東北角
var N_JW = "105.913641, 81.291804;"; //北
var NW_JW = "-169.604276, 81.291804;"; //西北角
var W_JW = "-169.604276, 38.244136;"; //西
var WS_JW = "-169.604276, -68.045308;"; //西南角
var S_JW = "114.15563, -68.045308;"; //南
var SE_JW = "170.672126, -68.045308 ;"; //東南角
//4.添加環形遮罩層
var ply1 = new BMap.Polygon(EN + NW + WS + SE + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + EN_JW + E_JW, { strokeColor: "none", fillColor: "rgb(246,246,246)", strokeOpacity: 0 }); //建立多邊形覆蓋物
map.addOverlay(ply1); //遮罩物是半透明的，如果需要純色可以多添加幾層
//5. 給目標行政區划添加邊框，其實就是給目標行政區划添加一個沒有填充物的遮罩層
var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#ff0000",fillColor: "" });
map.addOverlay(ply);
map.setViewport(ply.getPath()); //調整視野
loadCityMapInfo(map);
});
return map;
}
效果圖如下：
