将播放/暂停添加到WebGL，仅限PHP JS

时间：2017-06-03 05:12:30

标签： javascript php

我正在尝试向高级API控件添加播放/暂停按钮，我将button.value从ascii #9654更改为#9646，但其余代码用于启动动画并阻止它不工作？如果'requestanimationframe'包含在init()自身的“WebGl”内，则该球体将会旋转。您可以在No controls看到工作范围，并在Placing controls but animation play/pause not working中添加控件，感谢任何想法。

如果您需要自己运行它，我会留下//硬编码标记，只需注释掉DB访问的php部分。

<!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="&#9654" 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&#176<input type="range" id="tilt_level" min="40" max="130" step="5" value="40">130&#176<br>
      </div>
  </body>
</html>

1 个答案:

答案 0 :(得分：0)

经过10天的尝试，我用这段代码解决了这个问题:) 问题是Java Script没有像其他语言那样传递变量，因为它传递了var的动态，因此对函数中的var所做的任何操作都会使原始var保持不变 - 除非它是Global var。 我添加了Global vars：Earth和myReq（对于canx请求）整个代码是：

    <!DOCTYPE HTML>
<html>
  <head>
  <link rel="stylesheet" href="CSS/vertical-text.css" type="text/css"/>
    <script src="http://www.webglearth.com/v2/api.js"></script>
    <script>
    var earth = undefined;
    var myReq;
      function initialize() {
        var options = {
          sky: true,
          atmosphere: true,
          dragging: true,
          tilting: false,
          scrollWheelZoom: false
        };//options
        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,
          attribution: '© EagleEye360.com'
        }).addTo(earth);//tilelayer
        var toner = WE.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
          opacity: 0.15 // or use http://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png
        });//toner
        toner.addTo(earth);
        document.getElementById('opacity2').addEventListener('change', function(e) {
          toner.setOpacity(e.target.value);
        });//set opacity
        earth.setZoom(3);
          document.getElementById('zoom_level').addEventListener('change', function(e) {
          earth.setZoom(e.target.value);
        });//setZoom
        //rotate_play_pause();
        document.getElementById('rotate_button').addEventListener('change', function(e) {
          rotate_play_pause();
          });//rotate_play_pause()

//      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();
*/

        <?php
        include('ts.php');
        // Add markers
        $ct = 0;
        $i = 1;
        $lat1 = ""; $lat2 = "";
        $lon1 = ""; $lon2 = "";
        $row = array();
        $rows = array($row);
        $con = mysql_connect("localhost","hogansba_Jon","Tigger09<>");
        $db_selected = mysql_select_db("hogansba_EagleEye", $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("<div class='container'><div class='rotated-text'><span class='rotated-text__inner'><center><?php echo 'You-',$ip?><center/></span></div></div>", {maxWidth: 14, closeButton: true}).openPopup();
        earth.setView([ygpslat,ygpslon], 3);

    }//init()

        function rotate_play_pause() {
        var before = null;
        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        
        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)]);
            myReq = requestAnimationFrame(animate);
        });//requestAnimationFrame

        } else {
          cancelAnimationFrame(myReq);
          document.getElementById("rotate_button").value = String.fromCharCode(9654);
          }//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="&#9654" 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>Streetmap opacity</center>
      0<input type="range" id="opacity2" min="0" max="1" step="0.05" value="0.15">1<br>
      <center><p>Total Hits: <?php echo $ct ?></br>Unique Visitors: <?php echo $i ?><p/></center>
      </div>
  </body>
</html>

你可以看到它正常工作Here我将把它搁置一个月后，它将不再可用。 乔恩

相关问题
最新问题