百度地图 圈出省份轮廓图并高亮
生活随笔
收集整理的這篇文章主要介紹了
百度地图 圈出省份轮廓图并高亮
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
//描繪省份輪廓線
addSCBorder:function () {
var blist = [];
/**
* 添加行政區劃
* @param {} districtName 行政區劃名
* @returns 無返回值
*/
function addDistrict(districtName) {
var me = this;
//使用計數器來控制加載過程
//使用百度接口加載邊界經緯度數據
var bdary = new BMap.Boundary();
bdary.get(districtName, function (rs) { //獲取行政區域
blist.push({points: rs.boundaries[0], name: districtName});
drawBoundary();
});
}
function drawBoundary() {
//包含所有區域的點數組
var pointArray = [];
/*畫遮蔽層的相關方法
*思路: 首先在中國地圖最外畫一圈,圈住理論上所有的中國領土,然后再將每個閉合區域合并進來,并全部連到西北角。
* 這樣就做出了一個經過多次西北角的閉合多邊形*/
//定義中國東南西北端點,作為第一層
var pNW = {lat: 59.0, lng: 73.0};
var pNE = {lat: 59.0, lng: 136.0};
var pSE = {lat: 3.0, lng: 136.0};
var pSW = {lat: 3.0, lng: 73.0};
//向數組中添加一次閉合多邊形,并將西北角再加一次作為之后畫閉合區域的起點
var pArray = [];
pArray.push(pNW);
pArray.push(pSW);
pArray.push(pSE);
pArray.push(pNE);
pArray.push(pNW);
//循環添加各閉合區域
//添加顯示用標簽層
var label = new BMap.Label(blist[0].name, {offset: new BMap.Size(20, -10)});
label.hide();
map.addOverlay(label);
//添加多邊形層并顯示
var ply = new BMap.Polygon(blist[0].points, {
strokeWeight: 2,
strokeColor: "#FF0000",
fillOpacity: 0.01,
fillColor: " #FFFFFF"
}); //建立多邊形覆蓋物
ply.name = blist[0].name;
ply.label = label;
ply.Type = "Border";
map.addOverlay(ply);
//將點增加到視野范圍內
var path = ply.getPath();
pointArray = pointArray.concat(path);
//將閉合區域加到遮蔽層上,每次添加完后要再加一次西北角作為下次添加的起點和最后一次的終點
pArray = pArray.concat(path);
pArray.push(pArray[0]);
//限定顯示區域,需要引用api庫
try {
map.setViewport(pointArray); //調整視野
} catch (err) {
console.log(err)
}
//添加遮蔽層
var plyall = new BMap.Polygon(pArray, {
strokeOpacity: 0.0000001,
strokeColor: "#04121b",
strokeWeight: 0.00001,
fillColor: "#04121b",
fillOpacity: 0.7
}); //建立多邊形覆蓋物
plyall.Type = "Border";
map.addOverlay(plyall);
}
addDistrict("上海市浦東新區")
}
總結
以上是生活随笔為你收集整理的百度地图 圈出省份轮廓图并高亮的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Angular ctorParamete
- 下一篇: Angular ActivatedRou