字体网站,天翼云主机怎么建设网站,著名建筑网站,公司做一个网站最新有一个需求#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
