网站建设788gg,网页设计培训公司哪家好,做网站公司排名多少钱,想学做蛋糕用哪一个网站最新有一个需求#xff0c;能动态的控制Leaflet.js 地图图层的透明度#xff0c;官网文档: https://leafletjs.com/reference.html#gridlayer-setopacity 一直有个setOpacity方法#xff0c;我以为拿来就能使呢#xff0c;其实不行。后来找到一个日本人开发的demo: 右侧Co…最新有一个需求能动态的控制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 a hrefhttp://mierune.co.jp/ target_blankMIERUNE/a, under CC BY. Data by a hrefhttp://osm.org/copyright target_blankOpenStreetMap/a 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 a hrefhttp://mierune.co.jp/ target_blankMIERUNE/a, under CC BY. Data by a hrefhttp://osm.org/copyright target_blankOpenStreetMap/a contributors, under ODbL., });//OSM const o_std new L.tileLayer(https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png, {attribution: copy; a hrefhttp://osm.org/copyrightOpenStreetMap/a contributors, });//GSI Pale const t_pale new L.tileLayer(https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png, {attribution:a hrefhttp://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html target_blank国土地理院/a, });//GSI Ort const t_ort new L.tileLayer(https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg, {attribution:a hrefhttp://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html target_blank国土地理院/a, });//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个 属性 // AddLayerconst Map_AddLayer {GSI Pale: osmLayer,GSI Ort: stamenLayer}; 最后用L.control.opacity  来实现 L.control.opacity(Map_AddLayer, {label: Layers Opacity,}).addTo(map); 代码如下 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hrefhttps://unpkg.com/leaflet1.7.1/dist/leaflet.css /script srchttps://unpkg.com/leaflet1.7.1/dist/leaflet.js/scriptscript src./dist/L.Control.Opacity.js/scriptlink href./dist/L.Control.Opacity.css relstylesheet /stylehtml,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}/style /head bodydiv idmap/divscript typetext/javascript// 声明osm地图图层var osmLayer L.tileLayer(http://{s}.tile.osm.org/{z}/{x}/{y}.png, {attribution: osm});// 声明stamen地图图层var stamenLayer L.tileLayer(https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png, {attribution: stamen});// 声明地图并添加图层var map L.map(map, {center: [36.09, 120.35],zoom: 13,layers: [osmLayer, stamenLayer]});// 新建图层控件的数据源-地图var baseLayers {osm地图: osmLayer,stamen地图: stamenLayer};// AddLayerconst Map_AddLayer {GSI Pale: osmLayer,GSI Ort: stamenLayer};//新建图层控件并添加到地图var layerControl L.control.layers(baseLayers, Map_AddLayer).addTo(map);L.control.opacity(Map_AddLayer, {label: Layers Opacity,}).addTo(map);/script /body /html 关于引入的 js、css文件地址请移步https://download.csdn.net/download/qq_41646249/88167163