文章版權由作者李曉暉和部落格園共有,若轉載請於明顯處標明出處: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/
如果您覺得本文確實幫助了您,可以微信掃一掃,進行小額的打賞和鼓勵,謝謝 ^_^