Touring 游览-google earth学习
Touring-游览
介绍
Google Earth Plugin 能够播放KML中编写的游览动画, 允许查看者在观看时的地球环境中与其交互, 控制游览动作. 插件当前开发了一些回放的 methods; 插件本身不支持游览的编辑功能.
导入一个游览
Simple Tour 简单游览
简单游览使用 <gx:Tour> feature 作为KML的根级 feature, 可以被 GETourPlayer 直接提取并传递给它. The tour 必须是 KML file中仅有的功能. 如果你的 KML 不符合这些要求，参考下面的Complex tour 例子.
<script type="text/javascript">
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
var href = 'http://code.google.com/apis/kml/documentation/kmlfiles/bounce_example.kml';
google.earth.fetchKml(ge, href, kmlFinishedLoading);
}
function kmlFinishedLoading(object) {
ge.getTourPlayer().setTour(object);
ge.getTourPlayer().play();
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
Complex Tour 复杂游览
如果你的游览包含在一个KMZ file中, 或者你的KML file 包住了多个 tour, 或者tour被嵌套在一个 container (such as <Document> or <Folder>)里, 你需要在文件中手动查找 <gx:Tour> feature. 一种方法是 'walk' 整个文件的 DOM 直到KMLTour feature 被发现. 你可以使用kmldomwalk.js 应用脚本来做这件事.
在下面的例子中, the KML file包含了一些 placemarks and features, 也需要被读入 Earth.
首先, 引用 kmldomwalk.js file from your page's <head>:
<script src="http://earth-api-samples.googlecode.com/svn/trunk/lib/kmldomwalk.js" type="text/javascript"></script>
Then:
<script type="text/javascript">
var ge;
var tour;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
var href = 'http://code.google.com/apis/kml/documentation/kmlfiles/complete_tour_example.kml';
google.earth.fetchKml(ge, href, fetchCallback);
}
function fetchCallback(fetchedKml) {
// alert if no KML was found at the specified URL
if (!fetchedKml) {
setTimeout(function() {
alert('Bad or null KML');
}, 0);
return;
}
// add the fetched KML into this Earth instance
ge.getFeatures().appendChild(fetchedKml);
// walk through the KML to find the tour object; assign to variable 'tour'
walkKmlDom(fetchedKml, function() {
if (this.getType() == 'KmlTour') {
tour = this;
return false;
}
});
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
前面的代码简单的读入 fetched tour 到 the Earth plugin. 它不包括激活动画和控制播放的控制器. 参考 Defining the active tour and Controlling tour playback 了解详细信息. 整个游览的控制包含在 the Sample tour 段.
Defining the active tour 定义一个激活的游览
插件可以读入任意数量的 tour objects, 但是仅有一个能够被设置为当前激活状态. 一旦一个 tour 被设置为激活状态, tour 控制器就会出现在屏幕上:
ge.getTourPlayer().setTour(tour);
使用 setTour(null) 来退出当前激活的 tour并回到正常的全球导航状态:
ge.getTourPlayer().setTour(null);
Controlling tour playback 控制浏览的回放
The Earth API 支持下列回放控制的调用:
| Function | Description |
|---|---|
ge.getTourPlayer().play() |
Plays the currently active tour |
ge.getTourPlayer().pause() |
Pauses the currently active tour |
ge.getTourPlayer().reset() |
Stops playback of the currently active tour and jumps to the beginning of the tour |
ge.getTourPlayer().setCurrentTime(time) |
Sets playback to the specified point on the tour's timeline, in seconds. |
Querying tour playback information 查询游览回放的信息
The Earth API 支持下列对当前回放的游览信息查询的调用:
| Function | Description |
|---|---|
ge.getTourPlayer().getCurrentTime() |
Retrieves the current elapsed playing time of the tour, in seconds. |
ge.getTourPlayer().getDuration() |
Retrieves the total duration of the active tour, in seconds. |
Complete tour playback sample
Source: http://code.google.com/apis/earth/documentation/samples/tour_example.html
<html>
<head>
<title>Sample tour in the Google Earth Plugin</title>
<script src="http://www.google.com/jsapi?key=ABCDEFG"> </script>
<script src="http://earth-api-samples.googlecode.com/svn/trunk/lib/kmldomwalk.js" type="text/javascript"> </script>
<script type="text/javascript">
var ge;
var tour;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
var href = 'http://code.google.com/apis/kml/documentation/kmlfiles/complete_tour_example.kml';
google.earth.fetchKml(ge, href, fetchCallback);
function fetchCallback(fetchedKml) {
// Alert if no KML was found at the specified URL.
if (!fetchedKml) {
setTimeout(function() {
alert('Bad or null KML');
}, 0);
return;
}
// Add the fetched KML into this Earth instance.
ge.getFeatures().appendChild(fetchedKml);
// Walk through the KML to find the tour object; assign to variable 'tour.'
walkKmlDom(fetchedKml, function() {
if (this.getType() == 'KmlTour') {
tour = this;
return false;
}
});
}
}
function failureCB(errorCode) {
}
// Tour control functions
function enterTour() {
if (!tour) {
alert('No tour found!');
return;
}
ge.getTourPlayer().setTour(tour);
}
function playTour() {
ge.getTourPlayer().play();
}
function pauseTour() {
ge.getTourPlayer().pause();
}
function resetTour() {
ge.getTourPlayer().reset();
}
function exitTour() {
ge.getTourPlayer().setTour(null);
}
google.setOnLoadCallback(init);
</script>
</head>
<body>
<div id="map3d" style="height: 400px; width: 600px;"></div>
<div id ="controls">
<input type="button" onclick="enterTour()" value="Enter Tour"/>
<input type="button" onclick="playTour()" value="Play Tour"/>
<input type="button" onclick="pauseTour()" value="Pause Tour"/>
<input type="button" onclick="resetTour()" value="Stop/Reset Tour"/>
<input type="button" onclick="exitTour()" value="Exit Tour"/>
</div>
</body>
</html>
