文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处: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/
如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^