"将 CSS3 过滤器应用于 Leaflet 上的图像图块"

Question

我想在传单上的图像图块上应用filter:hue-rotate()<\/code> ，而不是#myMapDiv<\/code>的任何子元素。

这似乎只是影响了我的标记（与我想要的相反）。

#map {
    filter: hue-rotate(180deg);
}

Answer 1

我对传单不熟悉，但是从您发布的内容来看，图像看起来像是放在.leaflet-layer 。 意思是

.leaflet-layer {
  filter: hue-rotate(180deg);
}

... 会做。

演示：

 window.onload = function(){ var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors', osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }); var map = L.map('map').setView([53.350140, -6.266155], 11).addLayer(osm); // Script for adding marker on map click function onMapClick(e) { var marker = L.marker(e.latlng, { draggable: true, title: "Resource location", alt: "Resource Location", riseOnHover: true }).addTo(map) .bindPopup(e.latlng.toString()).openPopup(); // Update marker on changing it's position marker.on("dragend", function(ev) { var chagedPos = ev.target.getLatLng(); this.bindPopup(chagedPos.toString()).openPopup(); }); } map.on('click', onMapClick); } 

 #map { height: 100vh; width: 100%; } body { margin: 0; } .leaflet-layer { filter: hue-rotate(180deg); } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script> <div id="map"></div> 

标记不受影响（单击以添加一个）。

Answer 2

您可以只对特定图层使用className<\/code>选项。 https:\/\/leafletjs.com\/reference.html#tilelayer-classname<\/a>

例如

<style type="text/css">

  .myclass {
    filter: blur(5px);
  }

</style>


L.tileLayer(url, {className: 'myclass'});