0
Ich versuche, den erweiterten API-Steuerelementen eine Play/Pause-Schaltfläche hinzuzufügen, ich habe den button.value von der ASCII-Datei #9654 zu #9646 aber den Rest des Codes geändert Starten Sie die Animation und stoppen Sie es nicht funktioniert? Die Kugel dreht sich, wenn die 'requestanimationframe 'in der' init() 'der WebGl selbst enthalten ist. Sie können die Arbeitssphäre bei No controls sehen und die, die ich Kontrollen in Placing controls but animation play/pause not working hinzufügen, danke für irgendwelche Ideen.Hinzufügen von Play/Pause zu WebGL, nur in PHP JS
Ich links in // hart codierte Marker, wenn Sie es selbst ausführen müssen, nur aus dem PHP-Abschnitt des DB-Zugriffs kommentieren.
<!DOCTYPE HTML>
<html>
<head>
<script src="http://www.webglearth.com/v2/api.js"></script>
<script>
function initialize() {
var options = {
sky: true,
atmosphere: true,
dragging: true,
tilting: false
};//options
var earth = new WE.map('earth_div');
earth.setView([30.0, -87.65], 3);
WE.tileLayer('http://data.webglearth.com/natural-earth-color/{z}/{x}/{y}.jpg', {
tileSize: 256,
bounds: [[-85, -180], [85, 180]],
minZoom: 2,
maxZoom: 9,
tms: true
}).addTo(earth);//tilelayer
var toner = WE.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
opacity: 0.25
});//toner
toner.addTo(earth);
earth.setZoom(3);
document.getElementById('zoom_level').addEventListener('change', function(e) {
earth.setZoom(e.target.value);
});//setZoom
// earth.setTilt(40);
// document.getElementById('tilt_level').addEventListener('change', function(e) {
// earth.setTilt(e.target.value);
// });//setTilt-not working look at .setview
/* // Add markers - Hard coded works.
var marker = WE.marker([48.45, 34.9833], 'http://eagleeye360.com/worldmap/pin.jpg', 4, 4).addTo(earth);
marker.bindPopup("86.110.118.194", {maxWidth: 90, closeButton: true}).openPopup();
var marker2 = WE.marker([41.85, -87.65], 'http://eagleeye360.com/worldmap/pin.jpg', 4, 4).addTo(earth);
marker2.bindPopup("174.221.5.127", {maxWidth: 90, closeButton: true}).openPopup();
var marker3 = WE.marker([44.3051,-69.977], 'http://eagleeye360.com/worldmap/pin.jpg', 4, 4).addTo(earth);
marker3.bindPopup("142.105.199.149", {maxWidth: 90, closeButton: true}).openPopup();
*/
//Get GPS lat/lon from sql Db for markers
<?php
include('ts.php');
// Add markers
$ct = 0;
$i = 1;
$lat1 = ""; $lat2 = "";
$lon1 = ""; $lon2 = "";
$row = array();
$rows = array($row);
$con = mysql_connect("localhost","User","Password");
$db_selected = mysql_select_db("DB", $con);
if (!$db_selected){echo mysql_errno($con) . ": " . mysql_error($con) . "\n";}
$query = "SELECT `gpslat`, `gpslon`, `ip` FROM `visitor_tracker` ORDER BY `gpslat` DESC";
$result = mysql_query($query) or die(mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_NUM)) {
$lat1 = $row[0];
//$lon1 = $row[1];
if ($ct == 0) {$rows[] = $row;
$lat2 = $rows[$i][0];
//$lon2 = $rows[$i][1];
}//if
Else {if ($lat1 != $lat2){
$rows[] = $row;
$i = $i+1;
$lat2 = $rows[$i][0];
//$lon2 = $rows[$i-1][1];
}//if
}//else
$ct = $ct+1;
}//while
mysql_free_result($result);
mysql_close($con);
?>
// Populate markers
var markers = <?php echo json_encode($rows); ?>;
var ygpslat = <?php echo json_encode($gpslat); ?>;
var ygpslon = <?php echo json_encode($gpslon); ?>;
var yip = <?php echo json_encode($ip); ?>;
for(var i = 1, len = markers.length; i < len; i++) {
var marker = WE.marker([markers[i][0],markers[i][1]], 'http://eagleeye360.com/worldmap/pin_green.jpg', 4, 4).addTo(earth);
marker.bindPopup(markers[i][2], {maxWidth: 100, closeButton: true}).closePopup();
}//for
//Your marker
var marker = WE.marker([ygpslat,ygpslon], 'http://eagleeye360.com/worldmap/pin.jpg', 4, 4).addTo(earth);
marker.bindPopup("<center>You</br>"+yip, {maxWidth: 100, closeButton: true}).openPopup();
}//init()
function rotate_play_pause() {
var status = document.getElementById("rotate_button");
if (status.value == String.fromCharCode(9654)) {
document.getElementById("rotate_button").value = String.fromCharCode(9646);
// Start a simple rotation animation
var before = null;
requestAnimationFrame(function animate(now) {
var c = earth.getPosition();
var elapsed = before? now - before: 0;
before = now;
earth.setCenter([c[0], c[1] - 0.1*(elapsed/30)]);
requestAnimationFrame(animate);
});//requestAnimationFrame
} else {
document.getElementById("rotate_button").value = String.fromCharCode(9654);
cancelAnimationFrame(animate);
}//if else
}//function rotate_play_pause()
// document.getElementById('cesium-credit-text').innerHTML = "EagleEye360.com-Visitors/Bots/HackAttempts";
</script>
<style type="text/css">
html, body{padding: 0; margin: 0; background-color: black;}
#earth_div{top: 0; right: 0; bottom: 0; left: 0; position: absolute !important;}
#coords{position: absolute; bottom: 10px; right: 10px; z-index: 100000;}
#buttons {position: absolute; bottom:10px; left: 10px; color: #808080;}
</style>
<title>EagleEye360 Test 1</title>
</head>
<body onload="initialize()">
<div id="earth_div"></div>
<div id="buttons">
<center><input type="button" id="rotate_button" value="▶" class="play" onclick="rotate_play_pause();"><center/><br>
<center>Zoom</center>
2<input type="range" id="zoom_level" min="2" max="9" step="1.0" value="3.0">9<br>
<center>Tilt</center>
40°<input type="range" id="tilt_level" min="40" max="130" step="5" value="40">130°<br>
</div>
</body>
</html>