基于百度地圖API的反向遮罩功能的實現*

牛 倩

(山西大學 軟件學院，山西 太原 030013)

基于百度地圖API的反向遮罩功能的實現*

牛 倩

(山西大學 軟件學院，山西 太原 030013)

百度地圖作為目前市場占有率最高的開放地圖平臺，基本可以滿足大部分產品的使用需求，但是對于個性化的需求卻實現困難，例如實現地圖的反向遮罩功能。文章實現了一種通過簡單的二次開發即可實現基于百度地圖應用程序接口的反向遮罩功能。

百度地圖；開放接口；反向遮罩

0 引言

由于單獨開發一個地圖類服務的產品成本非常昂貴[1]，所以大部分產品都選擇使用第三方的電子地圖服務。在中國，提供電子地圖服務的公司中，市場占有率較高的有百度地圖[2]、高德地圖、搜狗地圖等，其中目前市場占有率最高的是百度地圖[3]。百度地圖擁有豐富的功能，基本可以滿足大多數地圖類服務產品的使用需求。通過調用百度地圖應用程序接口(Application Programming Interface, API)，開發者不需要自備大量地圖數據，可以便捷地進行地圖類應用的開發，極大地降低了開發成本。但是使用現有的百度地圖開放接口卻不能實現反向遮罩功能。本文以百度地圖Android軟件開發工具包(Software Development Kit, SDK)為例，通過簡單的二次開發，實現了反向遮罩功能。

1 需求分析

在給地方政府各級部門研發產品(例如：可再生能源分布情況，或者空氣質量指數分布情況)時，用戶希望可以對其所屬行政區域以外的區域進行遮罩，以便用戶可以快速找到行政區域的邊界，快速了解自己負責的區域的可再生能源分布情況，或者空氣質量指數分布情況。

2 相關技術分析

與上述需求相關的百度地圖API有以下兩個接口：

(1) boolean search District(District Search Option var1)[4],這個接口提供行政區邊界數據檢索功能。根據省、市、縣(區)級行政區劃名稱，查詢行政區劃的詳細邊界信息。示例代碼如下：

mDistrictSearch = DistrictSearch.newInstance();

mDistrictSearch.searchDistrict(new DistrictSearchOption().cityName(city).districtName(district));

(2) Overlay addOverlay(OverlayOptions var1)[5]，通過這個接口可以實現點(Dot)、折線(Polyline)、弧線(Arc)、圓(Circle)、多邊形(Polygon)多種圖形的遮罩功能。上述需求可以通過接口1獲得的行政區域便捷信息來繪制多邊形遮罩。示例代碼如下：

OverlayOptions polygonOption = new PolygonOptions().points(pts).stroke(new Stroke(5, 0xAA00FF00)).fillColor(0xAAFFFF00);

但是通過接口2并不能完全滿足用戶需求。接口2可以給指定的行政區域添加半透明遮罩，這樣，會讓用戶關注的行政區域顏色加深而高亮了用戶不關注的區域(如圖1左圖所示)，這與用戶需求是完全相反的(如圖1右圖所示)。圖1中是以太原市迎澤區空氣質量顯示為例，通過接口1獲得太原市迎澤區的邊界信息，直接使用接口2繪制多邊形即得到圖1中左圖效果，與用戶要求的右圖效果相反。而現有的百度地圖API并不提供直接可使用的接口。為了解決這一問題，本文設計并實現了基于百度地圖API的反向遮罩功能。

圖1 百度地圖API效果與用戶需求效果對比

3 實現

實現反向遮罩功能需要以下4步，并在每一步后附上基于百度地圖Android SDK實現的代碼。

(1) 找到該坐標列表中的最右邊的坐標點I(如圖2中點I)，點I表示為(Iw,Ij)，其中Iw表示點I的緯度，Ij表示點I的經度。

// 區域點集合

List boundLatLngs = new ArrayList<>();

// 找右側極值

int longMaxIndx = 0;

LatLng longMax = latLngList.get(0).get(0);

for (List latLngs : latLngList) {

if (latLngs == null || latLngs.size() == 0) {

continue;

}

for (LatLng latLng : latLngs) {

boundLatLngs.add(latLng);

if (latLng.longitude > longMax.longitude) {

longMax = latLng;

longMaxIndx = boundLatLngs.size() - 1;

}

}

}

圖2 反向遮罩示意圖

(2) 調整坐標列表順序，調整為從最右邊的邊界點(點I)開始逆時針順序的坐標列表。

List latLngsTemp = new ArrayList<>();

latLngsTemp.addAll(boundLatLngs.subList(longMaxIndx, boundLatLngs.size()));

latLngsTemp.addAll(boundLatLngs.subList(0, longMaxIndx));

(3) 添加7個點(A到G)到坐標列表末尾。其中點C、D、E、F為地圖的4個邊界點，Fj表示F點的經度。點A的坐標為(Iw-0.00000001,Ij)，點B的坐標為(Iw-0.00000001,Fj)，點G的坐標為(Iw,Ij)。

在圖2中，為了方便理解，地圖邊界點縮小到可視范圍，并在圖中標出，實際使用的邊界點為C(10, 150)、D(10, 60)、E(60, 60)、F(60, 150)。區域CDEF遠超中國邊界，所以在用戶實際使用時，陰影的邊界是感知不到的。

在圖2中，線AB和線IG的未遮罩區域為了方便理解放大了2 000 000倍，實際使用時，這個未遮罩區域在地圖放大到最大級別時只有一個像素大小，不影響用戶使用。

latLngsTemp.add(new LatLng(latLngsTemp.get(0).latitude-0.00000001, latLngsTemp.get(0).longitude));

latLngsTemp.add(new LatLng(latLngsTemp.get(0).latitude-0.00000001, 150));

latLngsTemp.add(new LatLng(10, 150));

latLngsTemp.add(new LatLng(10, 60));

latLngsTemp.add(new LatLng(60, 60));

latLngsTemp.add(new LatLng(60, 150));

latLngsTemp.add(new LatLng(latLngsTemp.get(0).latitude, 150));

(4)根據現有坐標列表繪制遮罩層。如圖2所示，陰影部分即為反向遮罩層。

OverlayOptions ooPolygon = new PolygonOptions().points(latLngsTemp).stroke(new Stroke(1,context.getResources().getColor(R.color.map_overlay))).fillColor(context.getResources().getColor(R.color.map_overlay));

baiduMap.addOverlay(ooPolygon);

4 測試

最終的效果如圖3所示。圖3左為使用反向遮罩的效果，圖3右是最終提供給用戶的使用了反向遮罩功能展示太原市迎澤區內空氣質量分布的效果。滿足了用戶的實際需求。具體的實現代碼和清晰的運行截圖已經上傳至網絡，可以通過網絡查看[6]。

圖3 反向遮罩示意圖

5 結論

本文基于百度地圖API的addOverlay和searchDistrict兩個開放接口在Android平臺實現了對行政區域的反向遮罩功能，這個實現方法同樣適用于其他地圖服務，以及其他封閉圖形的反向遮罩功能。但目前這一版本的反向遮罩功能還是不能完全滿足用戶需求。用戶有時并不是關注行政區域全部的地區，而是它的一部分。例如，太原整個行政區域很大，但在空氣質量監控時，用戶更關注的是太原市城區(太原市六城區)的空氣質量分布。基于這個需求，在下一版本的開發中，希望添加區域合并功能，即給定多個區域(太原市六個城區分別的坐標)，對這幾個區域進行合并，并對這幾個區域以外的部分進行遮罩。

[1] 成功,楊亞. 主流地圖應用程序接口在地圖質量和實用功能上的對比分析[J]. 地理信息世界,2016,23(5):41-45.

[2] Baidu. 百度地圖開放平臺[EB/OL]. (2017-02-23) [2017-03-01].http://lbsyun.baidu.com/.

[3] 羅超. 百度地圖這十年如何一步步干掉了強悍的對手[EB/OL]. (2016-12-26) [2017-02-01].http://luochao.baijia.baidu.com/article/277207.

[4] Baidu. 基礎地圖Android SDK[EB/OL]. (2017-02-23) [2017-03-01].http://lbsyun.baidu.com/index.php?title=androidsdk/guide/basicmap.

[5] Baidu. 檢索功能Android SDK[EB/OL]. (2017-02-23) [2017-03-01].http://lbsyun.baidu.com/index.php?title=androidsdk/guide/retrieval.

[6] 牛倩. AddReverseOverlay[EB/OL]. (2017-03-04) [2017-03-04].http://git.oschina.net/qian.n/AddReverseOverlay.

Implementation of adding reverse overlay function based on Baidu map API

Niu Qian

(College of Software, Shanxi University, Taiyuan 030013, China)

Baidu maps as the highest market share of the open map platform, has rich function, basically can meet the needs of most of the software, but for the personalized requirement is difficult to implement. For example to implement the adding reverse overlay function. This paper implemented it by a small amount of secondary development based on Baidu map open API(Application Programming Interface).

Baidu map; open API; reverse overlay

山西省科技基礎條件平臺計劃項目(2013091002-0108)

TP311.1

A

10.19358/j.issn.1674- 7720.2017.15.029

牛倩.基于百度地圖API的反向遮罩功能的實現[J].微型機與應用，2017,36(15)：100-102.

2017-03-12)

牛倩(1987-)，女，碩士研究生，助教，主要研究方向：軟件工程。