Leaflet.Control.Opacity 控制图层的透明度

最新有一个需求，能动态的控制Leaflet.js 地图图层的透明度，官网文档: https://leafletjs.com/reference.html#gridlayer-setopacity 

 

一直有个setOpacity方法，我以为拿来就能使呢，其实不行。后来找到一个日本人开发的demo: 右侧Controll显示底图，多选框https://dayjournal.github.io/Leaflet.Control.Opacity/

 方法一、 

 跟着这个案例，找到了依赖包:  

npm install leaflet.control.opacity

main.js: 

// CSS import
import "leaflet/dist/leaflet.css";
import "leaflet.control.opacity/dist/L.Control.Opacity.css";
import "./css/style.css";

// JS import
import 'leaflet.control.opacity';
import './js/app.js';

app.js

//MIERUNE Color
const m_color = new L.tileLayer('https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png', {
    attribution:
        "Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
});

//MIERUNE MONO
const m_mono = new L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', {
    attribution:
        "Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
});

//OSM
const o_std = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors',
});

//GSI Pale
const t_pale = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
    attribution:
        "国土地理院",
});

//GSI Ort
const t_ort = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
    attribution:
        "国土地理院",
});

//MAP
const map = L.map('map', {
    center: [35.6831925, 139.7511307],
    zoom: 13,
    zoomControl: true,
    layers: [m_mono],
});

//BaseLayer
const Map_BaseLayer = {
    'MIERUNE Color': m_color,
    'MIERUNE MONO': m_mono,
};

//AddLayer
const Map_AddLayer = {
    'OSM': o_std,
    'GSI Pale': t_pale,
    'GSI Ort': t_ort,
};

//LayerControl
L.control
    .layers(Map_BaseLayer, Map_AddLayer, {
        collapsed: false,
    })
    .addTo(map);

//OpacityControl
L.control
    .opacity(Map_AddLayer, {
        label: 'Layers Opacity',
    })
    .addTo(map);

按照上面的步骤确实可以实现这个页面：

 方法二、

下面来一个改装的demo:

先看看效果图:

 通过添加 Map_AddLayer 2个 属性，

        // AddLayer
        const Map_AddLayer = {
            'GSI Pale': osmLayer,
            'GSI Ort': stamenLayer
        };

最后用：L.control.opacity  来实现

        L.control.opacity(Map_AddLayer, {
            label: 'Layers Opacity',
        }).addTo(map);

 代码如下：

关于引入的 js、css文件地址请移步：https://download.csdn.net/download/qq_41646249/88167163