文章版權由作者李曉暉和部落格園共有，若轉載請於明顯處標明出處：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/

                                                                           如果您覺得本文確實幫助了您，可以微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

相關推薦