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

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

                                                                           如果您觉得本文确实帮助了您，可以微信扫一扫，进行小额的打赏和鼓励，谢谢 ^_^