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/

你可能感兴趣的文章