一種針對第三方在線地圖的動態勻色方案淺析

文章版權由做者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

1.背景

       在顏值當道講究投屏酷炫的當下，系統不設計成黑科技風，業主爸爸要求的高大上就無法體現。尷尬的是很多項目數據並非本身掌握，必須採用第三方的WMTS服務，好比用國土局的、測繪院的或者內網天地圖的在線地圖服務，但是這些底圖服務百分之九十九的都是淺色系配圖。試想深色版設計的圖表和背景，配上一個白色系的淺色風格地圖，這畫面確實辣眼睛。

　　以下：

 

2.瓦片實時勻色的幾種方案討論

2.1 方案1——逐像素RGB比對變換

        當前端獲取到瓦片後，逐像素讀取瓦片的rgb，當瓦片的rgb等於某個值時，則將其賦色成另外一個值，從而改變瓦片的顏色。最後將改變顏色後的瓦片拼接起來，便成了另外一種風格的地圖。

        根據這個思路，咱們是比較容易實現初步的轉換的。可是缺點很是明顯：

        a.若是徹底根據rgb顏色是否一致判斷，即便同一種要素也會出現勻色不均的問題。好比一條道路，其外框和內框是有顏色漸變的，則很是容易出現內框顏色與勻色一致，可是因爲外框顏色有些許變化致使沒有進行勻色變換。

        b.爲了勻出一張符合要求的圖，必須針對全部顏色值進行勻色對應設計，大大增長了此變化對照表的內容。此問題同a中問題實際上是同樣的。

2.2方案2——逐像素顏色灰度閾值比對變換

        這裏咱們提出一個顏色灰度值的概念，即將rgb三色值相加後除以3，所得值的區間將固定在0到255範圍內，從而實現了將一個（r,g,b）三維數據變成了一個一維的值，進而便於進行閾值設置。

        方案1中的流程則變成了，逐像素判斷該像素的顏色灰度值是否在一個區間內，若是在則將該顏色值變換爲另外一個色值。

        此方案的優勢在於：只須要設置幾個區間的閾值和對應色值變化，就能完成瓦片中全部色值的勻色。

        缺點在於：閾值粒度很差控制，容易出現誤勻現象，可是若是勻色閾值區間足夠小，是能夠儘可能避免的。不過一個顏色灰度值所對應的RGB的值多是多種組合，此狀況依然會致使誤勻現象。

        不過綜合考慮實施便捷度，咱們最後採用了方案2。

3.進一步優化

3.1 瓦片後臺勻色並緩存

        以上方案均是考慮前端展現時進行實時渲染，這樣會致使同一瓦片數據每次加載時均需勻色，下降了展現的性能。若是將瓦片勻色機制放入後臺，後臺進行瓦片請求並勻色處理，最後緩存至服務器。當同一瓦片再次請求時，判斷瓦片是否已緩存，如緩存則直接獲取。沒有，則繼續上一機制。

3.2經過配置文件支持多套勻色方案切換

        將勻色規則處理成配置文件，則針對同一數據源能夠生成多套風格的勻色配置文件。系統傳入風格參數後，後臺系統自動讀取對應的勻色配置文件生成勻色規則。

4.效果展現

        經過對淺色天地圖進行深色勻色，並將部分區域透明化處理，疊加上對應色系的行政邊界數據後獲得以下展現效果：

 

 

　　　　　　　　　　　　　　　　　　　　    -----歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

                                                                           若是您以爲本文確實幫助了您，能夠微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^