OpenLayers3のアニメーション

サンプルプログラム

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

https://github.com/kagyuu/OL3Exam/blob/master/05_Animation.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 05 Animation</title>
</head>
<body>
    <div id="map" class="map" style="height:300px"></div>
    Go to 
    <button id="btnGoto">London</button>
    with
    <select id="cmbAnimation">
    	<option>no animation</option>
    	<option>pan</option>
    	<option>bounce</option>
    	<option>rotate</option>
    	<option>zoom</option>
    	<option>pan+bounce</option>
    </select>

<script src="js/ol-debug.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var newyork = ol.proj.transform([-74.0022, 40.4246], 'EPSG:4326', 'EPSG:3857');
var london = ol.proj.transform([-0.5, 51.32], 'EPSG:4326', 'EPSG:3857');

var map = new ol.Map({
	target: 'map',
	layers: [
		new ol.layer.Tile({
			source: new ol.source.OSM()
		})
	],
	view: new ol.View({
	  center: newyork,
	  zoom: 4
	}),
});

$('#btnGoto').on('click', function() {
	var pan = ol.animation.pan({
		source : map.getView().getCenter()
	});
	var bounce = ol.animation.bounce({
		resolution : map.getView().getResolution() * 2
	});
	
	switch($('#cmbAnimation').val()){
		case 'pan':
			map.beforeRender(pan);
			break;
		case 'bounce':
			map.beforeRender(bounce);
			break;
		case 'pan+bounce':
			map.beforeRender(pan, bounce);
			break;
		case 'rotate':
			map.beforeRender( ol.animation.rotate({
				rotation : Math.PI * 2
		 	}));
			break;
		case 'zoom':
			map.beforeRender( ol.animation.zoom({
				resolution : map.getView().getResolution() * 0.5
		 	}));
			break;
		default:
			// no animation
			map.beforeRender();
	}
	
	if ('London' === $(this).html()) {
		map.getView().setCenter(london);
		$(this).html('NewYork');
	} else {
		map.getView().setCenter(newyork);
		$(this).html('London');
	}	
});
</script>
</body>
</html>


GIS


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