一种针对第三方在线地图的动态匀色方案浅析

文章版权由做者李晓晖和博客园共有，若转载请于明显处标明出处：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/

                                                                           若是您以为本文确实帮助了您，能够微信扫一扫，进行小额的打赏和鼓励，谢谢 ^_^