使用滤镜CSS属性调整传单地图的亮度

Question

I am trying to adjust brightness (not the opacity) of the leaflet map by using default css property "filter: brightness(1.0);" 我正在尝试通过使用默认的CSS属性“ filter：Brightness（1.0）;”来调整传单地图的亮度（而不是不透明度）。 and kind of adding slider functionality as well like below link. 以及添加滑块功能的方式，以及下面的链接。

Leaflet Example - Changing opacity to filter: brightness(1.0); 传单示例 -更改要过滤的不透明度：brightness（1.0）;

 var mymap = L.map('map').setView([51.505, -0.09], 13); var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', opacity: 0 }).addTo(mymap); var slider = document.getElementById('opacity-slider'); slider.addEventListener('input', function(e) { var value = Number(e.target.value); var opacity = value / 100; tileLayer.setOpacity(opacity); });

Any suggestions would be helpful. 任何的意见都将会有帮助。 Thanks! 谢谢！

Answer 1

Here's one way of doing it: 这是一种实现方法：

HTML HTML

<body>
  <input type="range" min="0" max="200" value="0" class="slider" id="brightness-slider">
  <div id="map"></div>
</body>

JavaScript JavaScript的

var mymap = L.map('map').setView([51.505, -0.09], 13);

var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
tileLayer.getContainer().style.filter = 'brightness(0%)';

var slider = document.getElementById('brightness-slider');
slider.addEventListener('input', function(e) {
  var value = e.target.value;
  tileLayer.getContainer().style.filter = 'brightness(' + value + '%)';
});

Try it out in this JSBin . 在此JSBin中尝试一下。

使用滤镜CSS属性调整传单地图的亮度

问题描述

1 个解决方案

解决方案1
5 已采纳 2018-03-20 18:26:52

使用滤镜CSS属性调整传单地图的亮度

问题描述

1 个解决方案

解决方案1 5 已采纳 2018-03-20 18:26:52

解决方案1
5 已采纳 2018-03-20 18:26:52