zoukankan      html  css  js  c++  java
  • 一种针对第三方在线地图的动态匀色方案浅析

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

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

                                        

  • 相关阅读:
    【转】【SEE】基于SSE指令集的程序设计简介
    【转】【Asp.Net】asp.net服务器控件创建
    ControlTemplate in WPF ——ScrollBar
    ControlTemplate in WPF —— Menu
    ControlTemplate in WPF —— Expander
    ControlTemplate in WPF —— TreeView
    ControlTemplate in WPF —— ListBox
    ControlTemplate in WPF —— ComboBox
    ControlTemplate in WPF —— TextBox
    ControlTemplate in WPF —— RadioButton
  • 原文地址:https://www.cnblogs.com/naaoveGIS/p/11175634.html
Copyright © 2011-2022 走看看