OpenLayers3 概略

実行環境

QuickStart?

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

https://github.com/kagyuu/OL3Exam/blob/master/01_QuickStart.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 01 Quick Start</title>
</head>
<body>
    <div id="map" class="map"></div>

<script src="js/ol-debug.js"></script>
<script type="text/javascript">

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

Windowサイズに追随して地図の大きさを変える

Mapにコンポーネントを追加する

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

https://github.com/kagyuu/OL3Exam/blob/master/02_Components.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 02 Components</title>
</head>
<body>
    <div id="map" class="map"></div>

<script src="js/ol-debug.js"></script>
<script type="text/javascript">

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
	}),
	// Create Interaction (extends default)
	interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotateAndZoom()]),
	// Create Control (extends default)
	controls: ol.control.defaults().extend([new ol.control.FullScreen()])
});
</script>
</body>
</html>

Map に DOM を表示する

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

https://github.com/kagyuu/OL3Exam/blob/master/03_Overlay.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 03 Overlay</title>
</head>
<body>
    <div id="map" class="map"></div>
	<div id="overlay" style="background-color:white; border: 1px solid black; padding: 5px 10px;">Makkah</div>

<script src="js/ol-debug.js"></script>
<script type="text/javascript">

var makkah = ol.proj.transform([39.816667, 21.416667], 'EPSG:4326', 'EPSG:3857');
var overlay = new ol.Overlay({
	element: document.getElementById('overlay'),
	position: makkah,
	positioning: 'bottom-center'
});

var map = new ol.Map({
	target: 'map',
	layers: [
		new ol.layer.Tile({
			source: new ol.source.OSM()
		})
	],
	view: new ol.View({
	  center: makkah,
	  zoom: 4
	}),
	// Create Interaction (extends default)
	interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotateAndZoom()]),
	// Create Control (extends default)
	controls: ol.control.defaults().extend([new ol.control.FullScreen()]),
	// Add Overlay
	overlays : [overlay]
});
</script>
</body>
</html>


GIS


添付ファイル: fileol3.png 140件 [詳細] fileod3-download.png 155件 [詳細] fileQuickStart.html 372件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2015-08-11 (火) 00:59:40 (483d)
ISBN10
ISBN13
9784061426061