給你的地圖點燈

曾經坐在飛機上俯瞰整個北京城，在萬米高空上可以看到北京的全貌，即使是凌晨一兩點，北京依然燈火通明，儼然是一座不眠之城。四通八達的交通線彷彿是這座城市的血脈，裡面流淌著的，是生活在這裡的人們的夢想。

然而，今天要講的不是北京，也不是夢想。今天要講的是我們該如何在地圖上點起一盞燈，就像夜幕下的北京城一樣。

為了方便理解，我們先看一下最終的實現效果。

最終效果.png

沒錯，就是要在夜幕下，放幾盞燈，告訴別人這塊區域目前有人正在裡面工作。

在講解如何實現這種效果前，先分享一下之前的那種存在問題的思路。

之前的做法是：

位於底部的陰影區域當做一個大的 PolygonView ，並且充滿屏幕。

位於上面的高亮區域當做另外的 PolygonView ，依次添加，並設置它們的背景色與透明度，模擬高亮。

然而這樣做會產生一個無法避免的問題,那就是無論我們怎麼設置高亮區域的背景色與透明度，都不夠好看：透明度低的時候，就看不到下面的地圖，透明度高的時候，雖然能看到下面的地圖，但是卻霧蒙蒙的，彷彿那片高亮區域，被霧霾籠罩了。。

被霧霾籠罩的效果圖.png

那麼問題來了，如何讓大晚上還在工作的人們，少呼吸點霧霾呢。

思路其實很簡單，只需要換個角度來思考就可以了，那就是我們不再分別繪製高亮區域和底部的全屏陰影區域，而是只需要繪製一個陰影區域就可以了，這樣剩下的沒有繪製的區域自然就是沒有霧霾的。 對，再說一遍，只需要繪製一個陰影區域就可以。 先來一張圖：

繪製過程分解.png

屏幕的四個點分別是

S1、S2、S3、S4

,兩個高亮區域分別是

區域A

和

區域B

，區域A的四個點分別是A1、A2、A3、A4，區域B的四個點分別是B1、B2、B3、B4。我們要繪製的就是除去

區域A,區域B

後，把剩下的那部分當做一個

PolygonView

來繪製。(注意：這裡所說的點是指經緯度點，而不是point點)

So ,如何得到陰影區域的 Polygon ：

首先聲明一個經緯度數組 CLLocationCoordinate2D * coors ，用來存放區域坐標點。

先從 S1點 開始，將其加入到 coors 中，下一個點是 A1點 ，然後依次添加 A2、A3、A4 。

添加完 A4 後， 一定要再將 A1點 加一遍,以構成一個閉環，而不是直接去添加區域B的點，此時 A1點 被添加了兩遍。

接著添加 區域B 的點，先是 B1點 ，然後依次添加 B2、B3、B4 。

添加完 B4 後，像 區域A 一樣，一定要再添加一遍 B1點 ，以構成閉環。此時 B1點 被添加兩遍。

由於此時只有兩個區域，所以添加完 B1點 後，我們需要返回，這裡需要注意的一定要原路返回。所以需要再添加一遍 A1點 ，此時 A1點 被添加了3遍（注意：非屏幕邊界點最多被添加三遍）。

接著我們需要再次添加 S1點 ，也就是說從 S1點 ，出去轉了一圈後，最後必須回到 S1點 。此時 S1點 被添加2遍。(注意：屏幕邊界點最多被添加2遍)。 *最後再依次添加 S2、S3、S4 點構成閉環就可以了。

總結一下規律，我們需要從屏幕

四個角的任意一個點

開始，假設是

S1點

，然後依次添

區域A、區域B、區域C

等的點，區域點添加完一圈後，

一定要把區域的第一個點再添加一遍，然後再去添加另一個區域的點

，添加完後，

依然要再加一遍該區域的第一個點

，如果當前區域是

最後一個

區域了，那麼添加完後，

需要讓它原路返回

，也就是說

除了最後一個區域的起點是填加兩遍

，

其他區域的起點都是添加三遍

再添加一遍屏幕的S1點

，最後就是按照順時針或者逆時針添加屏幕的剩餘三個點。

這樣我們就只需要繪製這麼一個整合後的陰影區域就可以了。由此就實現了我們的去霧霾目的。

過程有點繞，可能不太好理解，那怎麼辦，多看幾遍然後自己試一試就可以了。demo還是之前的給你的地圖模塊動手術的demo。代碼比較多，但是卻很簡單，所以文章里就不寫代碼了，本文介紹的關鍵在於這種思路，使用的時候，只需要借鑒思路，對數據的處理，需要你自己搞定。並且這種思路是通用的，移動端與web端都適用。

好吧，作者比較懶，三篇文章，只留下了一個demo。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！