PKA*_*PKA 2 javascript css leaflet
我正在尝试通过使用默认的CSS属性“ 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: '© <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);
});任何的意见都将会有帮助。谢谢！
这是一种实现方法：
的HTML
<body>
<input type="range" min="0" max="200" value="0" class="slider" id="brightness-slider">
<div id="map"></div>
</body>
的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: '© <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 + '%)';
});
在此JSBin中尝试一下。