Leaflet opacity slider พร้อม L.tileLayer.wms

Question

ฉันต้องการควบคุมความทึบของเลเยอร์ wms (ใช้L.tileLayer.wms) ใน Leaflet โดยใช้แถบเลื่อนความทึบ

ในL.tileLayer.wmsฉันสามารถควบคุมความทึบได้โดยการตั้งค่าความทึบ: ค่า

นี่คือรหัสชิ้นส่วนของฉัน เลเยอร์ wms

var wmsLayer_2 = L.tileLayer.wms('https://wms.cartografia.agenziaentrate.gov.it/inspire/wms/ows01.php', {
  layers: ['CP.CadastralParcel'],
  crs: crs_6706,
    format: 'image/png',
  maxZoom: 21,
  transparent: true,
}).addTo(map);

แถบเลื่อนที่ใช้ในการควบคุมแผ่นพับ

function updateOpacity(value) {
        wmsLayer_2.setParams({opacity:value});
        };

var control = L.control.layers(baseMaps,
    {'Opacity_layer <br><input id="range" type="range" min="0" max="1" step="0.1" value="1" class="slider" onchange="updateOpacity(this.value)">':wmsLayer_2},{collapsed: false}).addTo(map);

อย่างไรก็ตามฉันไม่สามารถจัดการความทึบได้

นี่คือตัวอย่างที่สมบูรณ์

Answer 1

คุณกำลังสับสนแผ่นปลิวopacity ตัวเลือกที่มีพารามิเตอร์opacity WMS

เมื่อสร้างอินสแตนซ์ a L.TileLayer.WMSตัวเลือกใด ๆ ที่ไม่รู้จักกับ Leaflet จะถือว่าเป็นพารามิเตอร์ WMS ตามที่อธิบายไว้ในเอกสารประกอบ :

หากใช้ตัวเลือกแบบกำหนดเองใด ๆ ที่ไม่ได้ระบุไว้ที่นี่ตัวเลือกเหล่านั้นจะถูกส่งไปยังเซิร์ฟเวอร์ WMS เป็นพารามิเตอร์เพิ่มเติมในแต่ละ URL ของคำขอ สิ่งนี้มีประโยชน์สำหรับพารามิเตอร์ WMS ของผู้จำหน่ายที่ไม่ได้มาตรฐาน

ซึ่งอาจทำให้สับสนได้เนื่องจากทั้งสองอ็อพชันและพารามิเตอร์ WMS ถูกผสมเข้าด้วยกันเมื่อสร้างอินสแตนซ์

อย่างไรก็ตามวิธีการทำงานเฉพาะในพารามิเตอร์ WMS, ไม่เกี่ยวกับตัวเลือก ดังนั้นเมื่อสร้างอินสแตนซ์จะถือว่าเป็นตัวเลือก Leaflet แต่เมื่อส่งผ่านไปจะถือว่าเป็นพารามิเตอร์ WMS (และในตัวอย่างของคุณมีพารามิเตอร์ต่อท้าย URL ของคำขอไทล์ WMS ที่เบราว์เซอร์สร้างขึ้น)setParams()opacitysetParams&opacity=

TL; DR: ใช้วิธีการแทนsetOpacity()

Answer 2

ในupdateOpacityฟังก์ชันของคุณคุณควรใช้setOpacityเมธอดของเลเยอร์:

function updateOpacity(value) {
  wmsLayer_2.setOpacity(value);
};