ol-opacity
ol-opacity is a OpenLayers plugin that makes multiple tile layers transparent.
OpenLayers Plugins
npm
Browser Support
- Chrome
- Firefox
- Safari
Usage
Demo
Option
// OpacityControl Option // Baselayers settingsbaseLayers: title: 'BaseLayer' id: 'baseLayer' layers: m_streets m_gray // Overlayers settingsoverLayers: title: 'OverLayer' id: 'overLayer' layers: o_std t_pale t_ort // Transparent slide bar settings (true or false)opacityControl: true
Example - npm
Start OpenLayers easily. [OpenLayers, webpack]
openlayers-starter
Install package
npm install ol-opacity
main.js
// CSS import;;; // JS import;
script.js
// ol module import;;;;;; // plugin module import; // MIERUNE Streetsconst m_streets = title: 'MIERUNE Streets' id: 'm_streets' source: url: 'https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=giAeaRZBFWKqrzIDD5Se' attributions: '<a href="https://maptiler.jp/" target="_blank">© MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>' attributionsCollapsible: false tileSize: 256 256 minZoom: 0 maxZoom: 18 visible: true ; // MIERUNE Grayconst m_gray = title: 'MIERUNE Gray' id: 'm_gray' source: url: 'https://api.maptiler.com/maps/jp-mierune-gray/256/{z}/{x}/{y}.png?key=giAeaRZBFWKqrzIDD5Se' attributions: '<a href="https://maptiler.jp/" target="_blank">© MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>' attributionsCollapsible: false tileSize: 256 256 minZoom: 0 maxZoom: 18 ; // OpenStreetMapconst o_std = title: 'OpenStreetMap' id: 'o_std' source: url: 'http://tile.openstreetmap.jp/{z}/{x}/{y}.png' attributions: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' attributionsCollapsible: false tileSize: 256 256 minZoom: 0 maxZoom: 18 ; // GSI Paleconst t_pale = title: 'GSI Pale' id: 't_pale' source: 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 Ortconst t_ort = title: 'GSI Ort' id: 't_ort' source: 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 ; // BaseLayerconst mapBaseLayer = title: 'BaseLayer' id: 'baseLayer' layers: m_streets m_gray ; // OverLayerconst mapOverLayer = title: 'OverLayer' id: 'overLayer' layers: o_std t_pale t_ort ; // MapCreateconst map = target: 'map' layers: mapBaseLayer mapOverLayer view: center: zoom: 11 ; // OpacityControlconst opacityControl = baseLayers: mapBaseLayer overLayers: mapOverLayer opacityControl: true;map;m_streets;
License
MIT
Copyright (c) 2020 Yasunori Kirimoto
Japanese
ol-opacity
ol-opacityは、複数のタイルレイヤーを透過するOpenLayersのプラグインです。
OpenLayers Plugins
npm
対応ブラウザ
- Chrome
- Firefox
- Safari
使用方法
デモ
オプション
// OpacityControlのオプション // 背景レイヤ設定baseLayers: title: 'BaseLayer' id: 'baseLayer' layers: m_streets m_gray // オーバーレイヤ設定overLayers: title: 'OverLayer' id: 'overLayer' layers: o_std t_pale t_ort // 透過度スライドバー表示/非表示設定 (trueまたはfalse)opacityControl: true
例 - npm
OpenLayersを手軽に始める [OpenLayers, webpack]
openlayers-starter
パッケージインストール
npm install ol-opacity
main.js
// CSS import;;; // JS import;
script.js
// ol module import;;;;;; // plugin module import; // MIERUNE Streetsconst m_streets = title: 'MIERUNE Streets' id: 'm_streets' source: url: 'https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=giAeaRZBFWKqrzIDD5Se' attributions: '<a href="https://maptiler.jp/" target="_blank">© MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>' attributionsCollapsible: false tileSize: 256 256 minZoom: 0 maxZoom: 18 visible: true ; // MIERUNE Grayconst m_gray = title: 'MIERUNE Gray' id: 'm_gray' source: url: 'https://api.maptiler.com/maps/jp-mierune-gray/256/{z}/{x}/{y}.png?key=giAeaRZBFWKqrzIDD5Se' attributions: '<a href="https://maptiler.jp/" target="_blank">© MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>' attributionsCollapsible: false tileSize: 256 256 minZoom: 0 maxZoom: 18 ; // OpenStreetMapconst o_std = title: 'OpenStreetMap' id: 'o_std' source: url: 'http://tile.openstreetmap.jp/{z}/{x}/{y}.png' attributions: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' attributionsCollapsible: false tileSize: 256 256 minZoom: 0 maxZoom: 18 ; // GSI Paleconst t_pale = title: 'GSI Pale' id: 't_pale' source: 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 Ortconst t_ort = title: 'GSI Ort' id: 't_ort' source: 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 ; // BaseLayerconst mapBaseLayer = title: 'BaseLayer' id: 'baseLayer' layers: m_streets m_gray ; // OverLayerconst mapOverLayer = title: 'OverLayer' id: 'overLayer' layers: o_std t_pale t_ort ; // MapCreateconst map = target: 'map' layers: mapBaseLayer mapOverLayer view: center: zoom: 11 ; // OpacityControlconst opacityControl = baseLayers: mapBaseLayer overLayers: mapOverLayer opacityControl: true;map;m_streets;
ライセンス
MIT
Copyright (c) 2020 Yasunori Kirimoto