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通过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实现update数据实时同步_实际操作05---大数据之Nifi工作笔记0044

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从Oracle11G同步数据到Mysql_亲测可用_解决数据重复_数据跟源表不一致的问题---大数据之Nifi工作笔记0065

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

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

NIFI分页获取Mysql数据_导入到Hbase中_并可通过phoenix客户端查询_含金量很高的一篇_搞了好久_实际操作05---大数据之Nifi工作笔记0045

NIFI分页获取Postgresql数据到Hbase中_实际操作---大数据之Nifi工作笔记0049

NIFI同步MySql数据_到SqlServer_错误_驱动程序无法通过使用安全套接字层(SSL)加密与SQL Server_Navicat连接SqlServer---大数据之Nifi工作笔记0047

NIFI同步MySql数据源数据_到原始库hbase_同时对数据进行实时分析处理_同步到清洗库_实际操作06---大数据之Nifi工作笔记0046

Nifi同步过程中报错create_time字段找不到_实际目标表和源表中没有这个字段---大数据之Nifi工作笔记0066