154：vue+openlayers 调节地图的明亮度、对比度、饱和度-白红宇

154：vue+openlayers 调节地图的明亮度、对比度、饱和度

阅读量：787 次

发布时间：2019-03-25

本文共 688 字，大约阅读时间需要 2 分钟。

vue+openlayers地图调整灰度与对比度的实现方法

作为技术工作者，本人在日常开发中常需要对地图进行较为细致的调整，例如灰度调节、对比度调整等。这一功能可以通过CSS filter实现，具体来看下面的技术方案。

示例效果图展示

(此处图片被移除，建议使用相关描述代替)

示例简介

本示例展示了如何在vue+openlayers项目中，通过CSS filter技术对地图进行亮度、对比度和饱和度等多方面的调整。这一方法简单实用，无需复杂的参数配置，即可实现丰富的地图视觉效果。

具体实现步骤

首先，在vue项目中引用openlayers库，并在template中使用Map组件

将地图层加载到组件中（可以是KML层、GeoJSON层等）

在style标签中添加以下CSS filter代码：filter: brightness(70%) contrast(90%) saturate(100%):filter: brightness(50%)

需要注意的是，brightness（亮度）与contrast（对比度）等属性的取值范围在0~100%之间，建议根据实际需求调整参数值。

调整后的效果展示

亮度调节：地图图像整体亮度会由默认值调节到上述设置后的亮度水平

对比度调节：地图图像的色彩对比度会增强，图片层次更加丰富

饱和度设置：默认值保留原本的色彩饱和度，并未作出调整

完整源代码展示

以下是完整的vue+openlayers实现代码：

以上代码展示了在地图上直接添加了一个透明度为80%的地图覆盖层的实现方法。

转载地址：http://nvouk.baihongyu.com/

你可能感兴趣的文章

NIFI1.21.0_Mysql到Mysql增量CDC同步中_补充_插入时如果目标表中已存在该数据则自动改为更新数据_Postgresql_Hbase也适用---大数据之Nifi工作笔记0058

NIFI1.21.0_Mysql到Mysql增量CDC同步中_补充_更新时如果目标表中不存在记录就改为插入数据_Postgresql_Hbase也适用---大数据之Nifi工作笔记0059

NIFI1.21.0_NIFI和hadoop蹦了_200G集群磁盘又满了_Jps看不到进程了_Unable to write in /tmp. Aborting----大数据之Nifi工作笔记0052

NIFI1.21.0_Postgresql和Mysql同时指定库_指定多表_全量同步到Mysql数据库以及Hbase数据库中---大数据之Nifi工作笔记0060

NIFI1.21.0最新版本安装_连接phoenix_单机版_Https登录_什么都没改换了最新版本的NIFI可以连接了_气人_实现插入数据到Hbase_实际操作---大数据之Nifi工作笔记0050

NIFI1.21.0最新版本安装_配置使用HTTP登录_默认是用HTTPS登录的_Https登录需要输入用户名密码_HTTP不需要---大数据之Nifi工作笔记0051

NIFI1.21.0通过Postgresql11的CDC逻辑复制槽实现_指定表多表增量同步_增删改数据分发及删除数据实时同步_通过分页解决变更记录过大问题_02----大数据之Nifi工作笔记0054

NIFI1.21.0通过Postgresql11的CDC逻辑复制槽实现_指定表多表增量同步_增加修改实时同步_使用JsonPath及自定义Python脚本_03---大数据之Nifi工作笔记0055

NIFI1.21.0通过Postgresql11的CDC逻辑复制槽实现_指定表多表增量同步_插入修改删除增量数据实时同步_通过分页解决变更记录过大问题_01----大数据之Nifi工作笔记0053

NIFI1.21.0通过Postgresql11的CDC逻辑复制槽实现_指定表或全表增量同步_实现指定整库同步_或指定数据表同步配置_04---大数据之Nifi工作笔记0056

NIFI1.23.2_最新版_性能优化通用_技巧积累_使用NIFI表达式过滤表_随时更新---大数据之Nifi工作笔记0063

NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_根据binlog实现数据实时delete同步_实际操作04---大数据之Nifi工作笔记0043

NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置binlog_使用处理器抓取binlog数据_实际操作01---大数据之Nifi工作笔记0040

NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置数据路由_实现数据插入数据到目标数据库_实际操作03---大数据之Nifi工作笔记0042

NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置数据路由_生成插入Sql语句_实际操作02---大数据之Nifi工作笔记0041

NIFI从MySql中离线读取数据再导入到MySql中_03_来吧用NIFI实现_数据分页获取功能---大数据之Nifi工作笔记0038

NIFI从MySql中离线读取数据再导入到MySql中_不带分页处理_01_QueryDatabaseTable获取数据_原0036---大数据之Nifi工作笔记0064

NIFI从MySql中离线读取数据再导入到MySql中_无分页功能_02_转换数据_分割数据_提取JSON数据_替换拼接SQL_添加分页---大数据之Nifi工作笔记0037

NIFI从PostGresql中离线读取数据再导入到MySql中_带有数据分页获取功能_不带分页不能用_NIFI资料太少了---大数据之Nifi工作笔记0039

nifi使用过程-常见问题-以及入门总结---大数据之Nifi工作笔记0012