GIS OpenLayers3 Control

2018-12-182018
96.1% (351/365)
December
55% (17/31)
Week 51
15.4% (1/7)
Day 18 Tue
8% (1.9/24)

訪問者

total: 3805
today: 1
yesterday: 5
now: 9

↑

更新

MenuBar

Control
Attribution
FullScreen
MousePosition
ScaleLine
ZoomSlider
ZoomToExtent
Original Control

Control †

GIS OpenLayers3 Cheat Sheet にあるように、ol.Map の interaction には、ol.control.defaults() が設定されている

defaults() に入っていない control を追加するには、defaults() に追加する

defaults()	control	note
✔	Attribution	右下の地図の著作権表示
	Control	Controlの基底クラス
	FullScreen	フルスクリーン表示
	MousePosition	マウス位置の表示
	OverviewMap	表示中の地図が、もうチョット大きい地図の中でどこかを表示
✔	Rotate	地図の回転を元に戻す。Shift+Alt+Mouse で地図を回転させると、左上に [⇒] ボタンが出てきて、押すと北が上に戻る
	ScaleLine	縮尺表示
✔	Zoom	左上の Zoomボタン [+][-]
	ZoomSlider	Zoom Slider
	ZoomToExtent	地図を特定の領域・解像度で表示する

https://github.com/kagyuu/OL3Exam/blob/master/27_Control.html

<!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>

https://github.com/kagyuu/OL3Exam/blob/master/css/sample.css

.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;
}

↑

Attribution †

http://openlayers.org/en/latest/apidoc/olx.control.html#.AttributionOptions

option	default	note
className	ol-attribution	著作権表示のCSS
target		表示 Element
collapsible	true	折りたたみ
collapsed	true	折りたたみの初期条件
tipLabel	Attributions	著作権表示の文言
label	i	著作権表示ボタン
collapseLabel	>>	著作権表示の折りたたみボタン
render		再描画時に呼ばれる callback function

tipLabel は、Layer (地図) 側の設定が優先されるようなので、地図側の attributions に設定する
自前の地図の著作権表示をしたいとき ⇒ http://openlayers.org/en/latest/examples/wmts.html

↑

FullScreen †

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()
    ])
});

左上の Rotate アイコンと重なるので、CSSでチョットずらす
```
.ol-full-screen {
    position: fixed;
    top: 10px;
    right: 50px;
}
```

↑

MousePosition †

var mousePosition = new ol.control.MousePosition({
//	coordinateFormat: ol.coordinate.createStringXY(2),
	coordinateFormat: ol.coordinate.toStringHDMS,
	projection: 'EPSG:4326',
	undefinedHTML: '&amp;nbsp;'
});

coordinateFormat / projection を指定しないと、地図の測地系での位置を表示する

左上の Rotate アイコンと重なるので、CSSでチョットずらす

.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;
}

↑

ScaleLine †

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'
});

↑

ZoomSlider †

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();

resolution については http://openlayers.org/en/latest/apidoc/ol.View.html を参照

↑

ZoomToExtent †

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')
});

↑

Original Control †

ol.control.Control の element に、ボタンを配置すれば、自前の Control を作ることができる

Interaction の Draw でやったように、無理やり ol.Map 内の Control にせず、外部の DOM 要素にするのも賢いやりかた。

https://github.com/kagyuu/OL3Exam/blob/master/28_MyControl.html

<!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>

GIS