Javascript 仅在PHP JS中向WebGL添加播放/暂停_Javascript_Php

Javascript 仅在PHP JS中向WebGL添加播放/暂停

javascript php

Javascript 仅在PHP JS中向WebGL添加播放/暂停,javascript,php,Javascript,Php,我正在尝试向高级API控件添加播放/暂停按钮，我有按钮。值从ascii#9654更改为#9646，但启动动画和停止动画的其余代码不起作用？如果'requestanimationframe'包含在WebGl自身的“init（）”中，则球体将旋转。您可以在中看到工作球体和我正在添加控件的球体，谢谢您的建议我在//中留下了硬编码标记，如果您需要自己运行它，只需注释掉DB access的php部分即可 <!DOCTYPE HTML> <html> <head>

我正在尝试向高级API控件添加播放/暂停按钮，我有按钮。值从ascii

#9654

更改为

#9646

，但启动动画和停止动画的其余代码不起作用？如果

'requestanimationframe

'包含在

WebGl

自身的“

init（）

”中，则球体将旋转。您可以在中看到工作球体和我正在添加控件的球体，谢谢您的建议

我在//中留下了硬编码标记，如果您需要自己运行它，只需注释掉DB access的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>


函数初始化（）{
变量选项={
天空：是的，
气氛:对,，
是的，
倾斜：错误
}；//选项
var earth=新的WE.map（'earth_div'）；
地球。setView（[30.0，-87.65]，3）；
我们是蒂莱耶http://data.webglearth.com/natural-earth-color/{z} /{x}/{y}.jpg'{
瓷砖尺寸：256，
界限：[-85，-180]，[85，180]]，
minZoom:2，
最大缩放：9，
tms：没错
}).addTo（地球）；//Tillelayer
var toner=WE.tillelayer（'http://tile.stamen.com/toner/{z} /{x}/{y}.png'{
不透明度：0.25
})；//碳粉
碳粉。添加到（地球）；
地球。setZoom（3）；
document.getElementById（'zoom_level'）。addEventListener（'change'，函数（e）{
earth.setZoom（即目标值）；
})；//设置缩放
//地球。设置倾斜（40）；
//document.getElementById（'tilt_level'）。addEventListener（'change'，函数（e）{
//接地设置倾斜（即目标值）；
//}）；//setTilt无法工作查看.setview
/*//添加标记-硬编码工作。
var marker=WE.marker（[48.45,34.9833]，'http://eagleeye360.com/worldmap/pin.jpg，4，4）。添加到（地球）；
bindPopup（“86.110.118.194”，{maxWidth:90，closeButton:true}）；
var-marker2=WE.marker（[41.85，-87.65]，'http://eagleeye360.com/worldmap/pin.jpg，4，4）。添加到（地球）；
bindPopup（“174.221.5.127”，{maxWidth:90，closeButton:true}）；
var-marker3=WE.marker（[44.3051，-69.977]，'http://eagleeye360.com/worldmap/pin.jpg，4，4）。添加到（地球）；
bindPopup（“142.105.199.149”，{maxWidth:90，closeButton:true}）；
*/
//从sql Db获取标记的GPS lat/lon
//填充标记
var标记=；
var ygpslat=；
ygpslon变量=；
叶华=；
对于（变量i=1，len=markers.length；i”+yip，{maxWidth:100，closeButton:true}）；
}//init（）
函数旋转\播放\暂停（）{
var status=document.getElementById（“旋转按钮”）；
if（status.value==String.fromCharCode（9654））{
document.getElementById（“旋转按钮”）.value=String.fromCharCode（9646）；
//开始一个简单的旋转动画
var-before=null；
requestAnimationFrame（函数animate（现在）{
var c=接地。getPosition（）；
var经过=之前？现在-之前：0；
以前=现在；
地球设定中心（[c[0]，c[1]-0.1*（经过/30）]；
请求动画帧（动画）；
})；//requestAnimationFrame
}否则{
document.getElementById（“旋转按钮”）.value=String.fromCharCode（9654）；
取消动画帧（动画）；
}//否则
}//函数旋转\播放\暂停（）
//document.getElementById（'cesium-credit-text'）.innerHTML=“EagleEye360.com访问者/机器人/黑客尝试”；
html，正文{填充：0；边距：0；背景色：黑色；}
#地球分割{顶部：0；右侧：0；底部：0；左侧：0；位置：绝对！重要；}
#坐标{位置：绝对；底部：10px；右侧：10px；z索引：100000；}
#按钮{位置：绝对；底部：10px；左侧：10px；颜色：#808080；}
EagleEye360测试1


快速移动
29

倾斜
40和176130和176

经过10天的尝试，我用以下代码解决了问题：）问题是Java脚本不像其他语言那样传递变量，而是传递变量的动态，因此在函数中对变量所做的任何操作都将保持原始变量不变，除非它是全局变量。我添加了全局变量：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>


var earth=未定义；
var-myReq；
函数初始化（）{
变量选项={
天空：是的，
气氛:对,，
是的，
错,，
滚轮缩放：错误
}；//选项
地球=新的WE.map（'earth_div'）；
地球。setView（[30.0，-87.65]，3）；
我们是蒂莱耶http://data.webglearth.com/natural-earth-color/{z} /{x}/{y}.jpg'{
瓷砖尺寸：256，
界限：[-85，-180]，[85，180]]，
minZoom:2，
最大缩放：9，
tms：没错，
归属：“©EagleEye360.com”
}).addTo（地球）；//Tillelayer
var toner=WE.tillelayer（'http://tile.stamen.com/toner/{z} /{x}/{y}.png'{
不透明度：0.15//或使用http://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png
})；//碳粉
碳粉。添加到（地球）；
document.getElementById（'opacity2'）。addEventListener（'change'，函数（e）{
调色剂设置不透明度（如目标值）；
})；//设置不透明度
地球。setZoom（3）；
document.getElementById（'zoom_level'）.a