牛 倩

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

基于百度地圖API的反向遮罩功能的實(shí)現(xiàn)*

牛 倩

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

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

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

0 引言

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

1 需求分析

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

2 相關(guān)技術(shù)分析

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

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

mDistrictSearch = DistrictSearch.newInstance();

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

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

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

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

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

3 實(shí)現(xiàn)

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

(1) 找到該坐標(biāo)列表中的最右邊的坐標(biāo)點(diǎn)I(如圖2中點(diǎn)I)，點(diǎn)I表示為(Iw,Ij)，其中Iw表示點(diǎn)I的緯度，Ij表示點(diǎn)I的經(jīng)度。

// 區(qū)域點(diǎn)集合

List boundLatLngs = new ArrayList<>();

// 找右側(cè)極值

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) 調(diào)整坐標(biāo)列表順序，調(diào)整為從最右邊的邊界點(diǎn)(點(diǎn)I)開始逆時針順序的坐標(biāo)列表。

List latLngsTemp = new ArrayList<>();

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

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

(3) 添加7個點(diǎn)(A到G)到坐標(biāo)列表末尾。其中點(diǎn)C、D、E、F為地圖的4個邊界點(diǎn)，F(xiàn)j表示F點(diǎn)的經(jīng)度。點(diǎn)A的坐標(biāo)為(Iw-0.00000001,Ij)，點(diǎn)B的坐標(biāo)為(Iw-0.00000001,Fj)，點(diǎn)G的坐標(biāo)為(Iw,Ij)。

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

在圖2中，線AB和線IG的未遮罩區(qū)域?yàn)榱朔奖憷斫夥糯罅? 000 000倍，實(shí)際使用時，這個未遮罩區(qū)域在地圖放大到最大級別時只有一個像素大小，不影響用戶使用。

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)根據(jù)現(xiàn)有坐標(biāo)列表繪制遮罩層。如圖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右是最終提供給用戶的使用了反向遮罩功能展示太原市迎澤區(qū)內(nèi)空氣質(zhì)量分布的效果。滿足了用戶的實(shí)際需求。具體的實(shí)現(xiàn)代碼和清晰的運(yùn)行截圖已經(jīng)上傳至網(wǎng)絡(luò)，可以通過網(wǎng)絡(luò)查看[6]。

圖3 反向遮罩示意圖

5 結(jié)論

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

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

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

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

[4] Baidu. 基礎(chǔ)地圖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

山西省科技基礎(chǔ)條件平臺計(jì)劃項(xiàng)目(2013091002-0108)

TP311.1

A

10.19358/j.issn.1674- 7720.2017.15.029

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

2017-03-12)

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