"將 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'});