defaults() | control | note |
✔ | Attribution | 右下の地図の著作権表示 |
Control | Controlの基底クラス | |
FullScreen | フルスクリーン表示 | |
MousePosition | マウス位置の表示 | |
OverviewMap | 表示中の地図が、もうチョット大きい地図の中でどこかを表示 | |
✔ | Rotate | 地図の回転を元に戻す。Shift+Alt+Mouse で地図を回転させると、左上に [⇒] ボタンが出てきて、押すと北が上に戻る |
ScaleLine | 縮尺表示 | |
✔ | Zoom | 左上の Zoomボタン [+][-] |
ZoomSlider | Zoom Slider | |
ZoomToExtent | 地図を特定の領域・解像度で表示する |
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="css/ol.css" type="text/css"/> <link rel="stylesheet" href="css/sample.css" type="text/css"/> <style> body { padding : 0; margin : 0; } </style> <title>OpenLayers 3 example 27 Control</title> </head> <body> <div id="map" class="map"></div> <script src="js/ol-debug.js"></script> <script type="text/javascript"> var mousePosition = new ol.control.MousePosition({ // coordinateFormat: ol.coordinate.createStringXY(2), coordinateFormat: ol.coordinate.toStringHDMS, projection: 'EPSG:4326', undefinedHTML: 'Outside' }); var scaleLine = new ol.control.ScaleLine({ minWidth: 100, units: /** @type {olx.control.AttributionOptions} */ 'nautical' }); var zoomSlider = new ol.control.ZoomSlider(); var zoomToExtent = new ol.control.ZoomToExtent({ extent: ol.proj.transformExtent([120, 20, 150, 50], 'EPSG:4326', 'EPSG:3857') }); var overviewMap = new ol.control.OverviewMap(); var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.transform([39.816667, 21.416667], 'EPSG:4326', 'EPSG:3857'), zoom: 4 }), controls: ol.control.defaults({ zoom: true, attribution: true, attributionOptions: /** @type {ol.control.ScaleLineUnits} */ ({ collapsible: false }), rotate: true }).extend([ new ol.control.FullScreen(), mousePosition, scaleLine, zoomSlider, zoomToExtent, overviewMap ]) }); </script> </body> </html>
.map { width: 100%; background-color: ghostwhite; border: 1px gray; } .full-map { width: 100%; height: 100%; position:fixed } .ol-full-screen { position: fixed; top: 10px; right: 50px; } .ol-mouse-position { top: 10px; right: 100px; font-size: 13px; color: white; background-color: rgba(0,60,136,0.5); padding: 2px 10px; border-radius: 5px; }
option | default | note |
className | ol-attribution | 著作権表示のCSS |
target | 表示 Element | |
collapsible | true | 折りたたみ |
collapsed | true | 折りたたみの初期条件 |
tipLabel | Attributions | 著作権表示の文言 |
label | i | 著作権表示ボタン |
collapseLabel | >> | 著作権表示の折りたたみボタン |
render | 再描画時に呼ばれる callback function |
var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.transform([39.816667, 21.416667], 'EPSG:4326', 'EPSG:3857'), zoom: 4 }), controls: ol.control.defaults().extend([ new ol.control.FullScreen() ]) });
.ol-full-screen { position: fixed; top: 10px; right: 50px; }
var mousePosition = new ol.control.MousePosition({ // coordinateFormat: ol.coordinate.createStringXY(2), coordinateFormat: ol.coordinate.toStringHDMS, projection: 'EPSG:4326', undefinedHTML: '&nbsp;' });
.ol-mouse-position { top: 10px; right: 100px; font-size: 13px color: white; background-color: rgba(0,60,136,0.5); padding: 2px 10px; border-radius: 5px; }
option | default | note |
className | ol-scale-line | 縮尺のCSS |
target | 表示 Element | |
minWidth | 64 | 縮尺の最小長さ。px |
units | 'metric' | ol.control.ScaleLineUnits? 'degrees' (緯度・経度) , 'imperial' (英マイル) , 'nautical' (海里) , 'metric' (キロメートル) , 'us' (米マイル) |
var scaleLine = new ol.control.ScaleLine({ minWidth: 100, units: /** @type {ol.control.ScaleLineUnits} */ 'nautical' });
option | default | note |
className | CSS | |
maxResolution | 156543.03392804097 | 40075016.68557849 / 256 meter/pixel |
minResolution | 0.0005831682455839253 | 40075016.68557849 / 256 / Math.pow(2, 28) meter/pixel |
var zoomSlider = new ol.control.ZoomSlider();
option | default | note |
className | ol-zoom-extent | CSS |
target | Target | |
label | E | ボタン |
tipLabel | Zoom to extent | tool tip |
extent | 表示範囲 |
var zoomToExtent = new ol.control.ZoomToExtent({ extent: ol.proj.transformExtent([120, 20, 150, 50], 'EPSG:4326', 'EPSG:3857') });
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="css/ol.css" type="text/css"/> <link rel="stylesheet" href="css/sample.css" type="text/css"/> <style> body { padding : 0; margin : 0; } .my-hello-control { top: 80px; left: .5em; } </style> <title>OpenLayers 3 example 28 My Control</title> </head> <body> <div id="map" class="map"></div> <script src="js/ol-debug.js"></script> <script type="text/javascript"> var button = document.createElement('button'); button.innerHTML = 'H'; button.addEventListener('click', function(e){ alert('hello'); }, false); var element = document.createElement('div'); element.className = 'my-hello-control ol-unselectable ol-control'; element.appendChild(button); var myControl = new ol.control.Control({ element: element }); var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.transform([39.816667, 21.416667], 'EPSG:4326', 'EPSG:3857'), zoom: 4 }), controls: ol.control.defaults().extend([myControl]) }); </script> </body> </html>