Control


Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /OL3Exam/27_Control.html

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

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

MousePosition

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

ScaleLine

optiondefaultnote
classNameol-scale-line縮尺のCSS
target表示 Element
minWidth64縮尺の最小長さ。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

optiondefaultnote
classNameCSS
maxResolution156543.0339280409740075016.68557849 / 256 meter/pixel
minResolution0.000583168245583925340075016.68557849 / 256 / Math.pow(2, 28) meter/pixel
var zoomSlider = new ol.control.ZoomSlider();

ZoomToExtent

optiondefaultnote
classNameol-zoom-extentCSS
targetTarget
labelEボタン
tipLabelZoom to extenttool tip
extent表示範囲
var zoomToExtent = new ol.control.ZoomToExtent({
	extent: ol.proj.transformExtent([120, 20, 150, 50], 'EPSG:4326', 'EPSG:3857')
});

Original Control


GIS


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2016-05-16 (月) 01:29:14 (3127d)
Short-URL: http://at-sushi.com/pukiwiki/index.php?cmd=s&k=4c0b76bd60
ISBN10
ISBN13
9784061426061