GIS OpenLayers3 Animation

2024-04-172024
29.3% (107.2/366)
April
54.3% (16.2/30)
Week 16
32.7% (2.2/7)
Day 17 Wed
29.4% (7/24)

訪問者

total: 8254
today: 3
yesterday: 7
now: 4

↑

更新

MenuBar

OpenLayers3のアニメーション
サンプルプログラム

OpenLayers3のアニメーション †

表示されている地図が変更されるときに、アニメーションを伴わせることができる
アニメーションの設定方法
1. map.beforeRender(anime()) で、map 変更前の処理として、アニメーション処理を設定する
2. map.getView().setCneter(newyork) で map の変更をリクエストする
- ⇒ OpenLayers3 がユーザプログラムからの変更リクエストの実行前に anime() を実行する
アニメーション処理の作成方法
- めっちゃむずい...
- ので、よく使われるアニメーション処理を返すユーティリティメソッドが用意されている
- http://openlayers.org/en/v3.8.1/apidoc/ol.animation.html
- ol.animation.pan
- ol.animation.bounce
- ol.animation.rotate
- ol.animation.zoom
map.beforeRender には、複数のアニメーション処理を設定することができる
- map.beforeRender(pan, bounce);
アニメーション処理を削除するときには引数なしで、map.beforeRender() を呼び出す
- 注意
```
1.map.beforeRender(anime())
2.map.getView().setCneter(newyork)
3.map.beforeRender()
```
  はダメ。
  2行目は、map を変更するのではなく、OpenLayers3 に変更依頼を出すコマンド。このままのコードだと、OpenLayers3 が地図の中心を newyork にしようとするときには、beforeRender は空になってしまう。
  どうしてもアニメーションを今回一回限りにしたければ、moveend イベント処理で map.beforeRender() をやれば良い。
  まぁ普通は、使っている途中でアニメーションが変わるとユーザが混乱するんで、最初に設定したらそれっきりにしとけば良いと思うけど

↑

サンプルプログラム †

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

GIS OpenLayers3 Animation

目次

訪問者

更新

最新の10件

人気の10件

MenuBar

OpenLayers3のアニメーション †

サンプルプログラム †

https://github.com/kagyuu/OL3Exam/blob/master/05_Animation.html