Usage

Demo

Option

// OpacityControl Option// Baselayers settingsbaseLayers:newLayerGroup({title:'BaseLayer',id:'baseLayer',layers:[m_streets,m_gray]})// Overlayers settingsoverLayers:newLayerGroup({title:'OverLayer',id:'overLayer',layers:[o_std,t_pale,t_ort]})// Transparent slide bar settings (true or false)opacityControl:true

Example - npm

npm install ol-opacity

// CSS importimport"ol/ol.css";import"ol-opacity/dist/ol-opacity.css";import"./css/style.css";// JS importimport'./js/script.js';

// ol module importimportMapfrom'ol/Map';importViewfrom'ol/View';importLayerGroupfrom'ol/layer/Group';importTileLayerfrom'ol/layer/Tile';importXYZfrom'ol/source/XYZ';import{fromLonLat}from'ol/proj';// plugin module importimportOpacityControlfrom"ol-opacity";// MIERUNE Streetsconstm_streets=newTileLayer({title:'MIERUNE Streets',id:'m_streets',source:newXYZ({url:'https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=giAeaRZBFWKqrzIDD5Se',attributions:'<a href="https://maptiler.jp/">&copy; MIERUNE</a> <a href="https://www.maptiler.com/copyright/">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright">&copy; OpenStreetMap contributors</a>',attributionsCollapsible:false,tileSize:[256,256],minZoom:0,maxZoom:18,visible:true})});// MIERUNE Grayconstm_gray=newTileLayer({title:'MIERUNE Gray',id:'m_gray',source:newXYZ({url:'https://api.maptiler.com/maps/jp-mierune-gray/256/{z}/{x}/{y}.png?key=giAeaRZBFWKqrzIDD5Se',attributions:'<a href="https://maptiler.jp/">&copy; MIERUNE</a> <a href="https://www.maptiler.com/copyright/">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright">&copy; OpenStreetMap contributors</a>',attributionsCollapsible:false,tileSize:[256,256],minZoom:0,maxZoom:18})});// OpenStreetMapconsto_std=newTileLayer({title:'OpenStreetMap',id:'o_std',source:newXYZ({url:'http://tile.openstreetmap.jp/{z}/{x}/{y}.png',attributions:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',attributionsCollapsible:false,tileSize:[256,256],minZoom:0,maxZoom:18})});// GSI Paleconstt_pale=newTileLayer({title:'GSI Pale',id:'t_pale',source:newXYZ({url:'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',attributions:'<a href=\'http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html\' target=\'_blank\'>国土地理院</a>',attributionsCollapsible:false,tileSize:[256,256],minZoom:0,maxZoom:18})});// GSI Ortconstt_ort=newTileLayer({title:'GSI Ort',id:'t_ort',source:newXYZ({url:'https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg',attributions:'<a href=\'http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html\' target=\'_blank\'>国土地理院</a>',attributionsCollapsible:false,tileSize:[256,256],minZoom:0,maxZoom:18})});// BaseLayerconstmapBaseLayer=newLayerGroup({title:'BaseLayer',id:'baseLayer',layers:[m_streets,m_gray]});// OverLayerconstmapOverLayer=newLayerGroup({title:'OverLayer',id:'overLayer',layers:[o_std,t_pale,t_ort]});// MapCreateconstmap=newMap({target:'map',layers:[mapBaseLayer,mapOverLayer],view:newView({center:fromLonLat([139.767,35.681]),zoom:11})});// OpacityControlconstopacityControl=newOpacityControl({baseLayers:mapBaseLayer,overLayers:mapOverLayer,opacityControl:true});map.addControl(opacityControl);m_streets.setVisible(true);

License

Japanese

ol-opacity

使用方法

デモ

オプション

// OpacityControlのオプション// 背景レイヤ設定baseLayers:newLayerGroup({title:'BaseLayer',id:'baseLayer',layers:[m_streets,m_gray]})// オーバーレイヤ設定overLayers:newLayerGroup({title:'OverLayer',id:'overLayer',layers:[o_std,t_pale,t_ort]})// 透過度スライドバー表示/非表示設定 (trueまたはfalse)opacityControl:true

例 - npm

npm install ol-opacity

// CSS importimport"ol/ol.css";import"ol-opacity/dist/ol-opacity.css";import"./css/style.css";// JS importimport'./js/script.js';

// ol module importimportMapfrom'ol/Map';importViewfrom'ol/View';importLayerGroupfrom'ol/layer/Group';importTileLayerfrom'ol/layer/Tile';importXYZfrom'ol/source/XYZ';import{fromLonLat}from'ol/proj';// plugin module importimportOpacityControlfrom"ol-opacity";// MIERUNE Streetsconstm_streets=newTileLayer({title:'MIERUNE Streets',id:'m_streets',source:newXYZ({url:'https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=giAeaRZBFWKqrzIDD5Se',attributions:'<a href="https://maptiler.jp/">&copy; MIERUNE</a> <a href="https://www.maptiler.com/copyright/">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright">&copy; OpenStreetMap contributors</a>',attributionsCollapsible:false,tileSize:[256,256],minZoom:0,maxZoom:18,visible:true})});// MIERUNE Grayconstm_gray=newTileLayer({title:'MIERUNE Gray',id:'m_gray',source:newXYZ({url:'https://api.maptiler.com/maps/jp-mierune-gray/256/{z}/{x}/{y}.png?key=giAeaRZBFWKqrzIDD5Se',attributions:'<a href="https://maptiler.jp/">&copy; MIERUNE</a> <a href="https://www.maptiler.com/copyright/">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright">&copy; OpenStreetMap contributors</a>',attributionsCollapsible:false,tileSize:[256,256],minZoom:0,maxZoom:18})});// OpenStreetMapconsto_std=newTileLayer({title:'OpenStreetMap',id:'o_std',source:newXYZ({url:'http://tile.openstreetmap.jp/{z}/{x}/{y}.png',attributions:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',attributionsCollapsible:false,tileSize:[256,256],minZoom:0,maxZoom:18})});// GSI Paleconstt_pale=newTileLayer({title:'GSI Pale',id:'t_pale',source:newXYZ({url:'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',attributions:'<a href=\'http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html\' target=\'_blank\'>国土地理院</a>',attributionsCollapsible:false,tileSize:[256,256],minZoom:0,maxZoom:18})});// GSI Ortconstt_ort=newTileLayer({title:'GSI Ort',id:'t_ort',source:newXYZ({url:'https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg',attributions:'<a href=\'http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html\' target=\'_blank\'>国土地理院</a>',attributionsCollapsible:false,tileSize:[256,256],minZoom:0,maxZoom:18})});// BaseLayerconstmapBaseLayer=newLayerGroup({title:'BaseLayer',id:'baseLayer',layers:[m_streets,m_gray]});// OverLayerconstmapOverLayer=newLayerGroup({title:'OverLayer',id:'overLayer',layers:[o_std,t_pale,t_ort]});// MapCreateconstmap=newMap({target:'map',layers:[mapBaseLayer,mapOverLayer],view:newView({center:fromLonLat([139.767,35.681]),zoom:11})});// OpacityControlconstopacityControl=newOpacityControl({baseLayers:mapBaseLayer,overLayers:mapOverLayer,opacityControl:true});map.addControl(opacityControl);m_streets.setVisible(true);

ライセンス