Google地球APIJavascript游览动画

Question

我正在尝试在 javascript 中实施 Google 地球 API 游览。我尝试了 parsekml 方法，但我无法进行任何游览。我有一个问题... javascript with Google Earth API 是否支持游览？我不想使用 fetchkml 或从任何其他 link 导入。在这里我附上了我的示例代码。有帮助吗...?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Google Earth-Practice</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <style type="text/css">@import "static/examples.css";</style>
  <style type="text/css">@import "static/prettify/prettify.css";</style>
  <script type="text/javascript" src="static/prettify/prettify.js"></script>
  <script type="text/javascript" src="http://www.google.com/jsapi?hl=en&amp;key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script>
  <script type="text/javascript">
  /* <![CDATA[ */
  var ge;
var i=1;;
var l=1;
var Excel;
var value;
  google.load("earth", "1");

  function init() {

    google.earth.createInstance('map3d', initCB, failureCB);
  }

  function initCB(instance) {
    ge = instance;
    ge.getWindow().setVisibility(true);


    // add a navigation control
    ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

    // add some layers
   // ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
   // ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);

    document.getElementById('installed-plugin-version').innerHTML =ge.getPluginVersion().toString();
  }

  function failureCB(errorCode) {
  }



function my_function()
{

return Excel.Workbooks.Open("C:/TEST.xls").ActiveSheet.Cells(l,i).Value;
}





//where l is number of rows and i are columns...
 function DrawVector()
 {

//where l is number of rows and i are columns...
//var i=1;
//var l=1;
var z=1;
var line=[];
document.getElementById('loadingImage').style.visibility='visible'; 
document.getElementById('Fly').style.visibility='visible'

Excel = new ActiveXObject("Excel.Application");
Excel.Visible = false;

do
{
    a=my_function()

    if (a!=null)
    {
    //var t=prompt("hello");
        line[z]=a;
    z++;
        i++;
    }
    else
    {
        l++;
        i=1;

        //document.write("<br />");
    }

    b = my_function()
}while(a!=null || b!=null);


    var lineStringPlacemark = ge.createPlacemark('');
    var lineString = ge.createLineString('');
    lineStringPlacemark.setGeometry(lineString);
    lineString.setExtrude(true);

    lineString.setAltitudeMode(ge.ALTITUDE_RELATIVE_TO_GROUND);

// Add LineString points


for(i=1;i<z;i=i+4)
{
var placemark = ge.createPlacemark('');

var icon = ge.createIcon('');
icon.setHref('https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Flag--Right-Chartreuse.png');
var style = ge.createStyle(''); //create a new style
style.getIconStyle().setIcon(icon);
style.getIconStyle().setScale(3.0); //apply the icon to the style
//style.getColor().set('ffffffff');
placemark.setStyleSelector(style); //apply the style to the placemark
// Set the placemark's location.  

var point = ge.createPoint('');
point.setLatitude(line[i+1]);
point.setLongitude(line[i+2]);
point.setAltitude(line[i+3]);
point.setAltitudeMode(ge.ALTITUDE_RELATIVE_TO_GROUND);
placemark.setGeometry(point);

placemark.setName(line[i]);

// Add the placemark to Earth.
ge.getFeatures().appendChild(placemark);
    lineString.getCoordinates().pushLatLngAlt(line[i+1],line[i+2],line[i+3]);

}// lineString.getCoordinates().pushLatLngAlt(38.885278,-77.701944,1900);
//  lineString.getCoordinates().pushLatLngAlt(38.769167,-77.901944,2700);


// Create a style and set width and color of line
    lineStringPlacemark.setStyleSelector(ge.createStyle(''));
    var lineStyle = lineStringPlacemark.getStyleSelector().getLineStyle();
    lineStyle.setWidth(4);
     var polyColor = lineStringPlacemark.getStyleSelector().getPolyStyle().getColor(); 
    //polyColor.set('ffffffff');
        polyColor.setA(127);
    polyColor.setB(0); 
    polyColor.setG(255);
    polyColor.setR(0);





    //lineStyle.polystyle.color = '990000ff';
    lineStyle.getColor().set('ffffffff');  // aabbggrr format
    //polystyle color = 66FFF700;
    //lineString.getPolyStyle(polystyle);// Add the feature to Earth
    ge.getFeatures().appendChild(lineStringPlacemark);





document.getElementById('loadingImage').style.visibility='hidden';




 }


  function showSun() {
    ge.getSun().setVisibility(true);
    ge.getTime().getControl().setVisibility(ge.VISIBILITY_SHOW);



  }

 function KmlView()
 {  DrawVector();
    var name='start';
    var kmlString = ''
              + '<?xml version="1.0" encoding="UTF-8"?>'
+ '<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2">'
+ '  <Document>'
+'<Camera> <altitudeMode>relativeToGround</altitudeMode>'
              + '    <longitude>-77.451111</longitude>'
              + '    <latitude>38.935278</latitude>'
              + '    <altitude>10000 </altitude>'
              + '    <heading>-105.948935</heading>'
              + '    <tilt>93</tilt>'
          + '<range>50</range>'
              + '  </Camera>'
+ '    <open>1</open>  '
+ '    <gx:Tour>     '
+ '      <name>Play me</name>     '
+ '      <gx:Playlist>   '
+ '        <gx:FlyTo>     '
+ '          <gx:duration>2.0</gx:duration>   '
+ '          <gx:flyToMode>bounce</gx:flyToMode>      '
+ '          <LookAt>    '
+ '            <longitude>-77.451111</longitude>  '   
+ '            <latitude>   38.935278</latitude> '        
+ '            <altitude>900</altitude>        '
+ '            <heading>-123.948935</heading>         '
+ '            <tilt>63.0957450</tilt>        '
+ '            <range>469.850414</range>        '
+ '            <gx:altitudeMode>relativeToGround </gx:altitudeMode>      '
+ '          </LookAt>   '
+ '        </gx:FlyTo>  '
+ '        <gx:AnimatedUpdate>    '
+ '          <gx:duration>0.0</gx:duration> '
+ '          <Update>  '
+ '            <targetHref/>    '
+ '            <Change>   '
+ '              <Placemark targetId="Fly1">    '
+ '                <gx:balloonVisibility>1</gx:balloonVisibility>      '
+ '              </Placemark>  '
+ '            </Change>    '
+ '          </Update>     '
+ '        </gx:AnimatedUpdate>    '
+ '        <gx:AnimatedUpdate>     '
+ '          <gx:duration>0.0</gx:duration>    '
+ '          <Update>       '
+ '            <targetHref/>    '
+ '            <Change>            '
+ '              <Placemark targetId="Fly1">'
+ '                <gx:balloonVisibility>0</gx:balloonVisibility>     '
+ '              </Placemark>        '
+ '            </Change>     '
+ '          </Update>       '
+ '        </gx:AnimatedUpdate>  '
+ '        <gx:FlyTo>       '
+ '          <gx:duration>20</gx:duration>       '
+ '          <gx:flyToMode>smooth</gx:flyToMode>  '
+ '          <LookAt>     '
+ '            <longitude>-77.701944</longitude>   '
+ '            <latitude>38.885278</latitude>  '
+ '            <altitude>1900</altitude>       '
+ '         <heading>-123.948935</heading>  '
+ '            <tilt>63.117317</tilt>        '
+ '            <range>792.665540</range>    '
+ '            <gx:altitudeMode>relativeToGround</gx:altitudeMode>       '
+ '          </LookAt>      '
+ '        </gx:FlyTo>         '
+ '        <gx:AnimatedUpdate> '
+ '          <gx:duration>0.0</gx:duration>  '
+ '          <Update>       '
+ '            <targetHref/>    '
+ '            <Change>         '
+ '              <Placemark targetId="Fly2">      '
+ '                <gx:balloonVisibility>1</gx:balloonVisibility>      '
+ '              </Placemark>          '
+ '            </Change>     '
+ '          </Update>        '
+ '        </gx:AnimatedUpdate> '
+ '          <gx:AnimatedUpdate>  '
+ '          <gx:duration>0.0</gx:duration>        '
+ '          <Update>     '
+ '            <targetHref/>       '
+ '            <Change>        '
+ '              <Placemark targetId="Fly2">     '
+ '                <gx:balloonVisibility>0</gx:balloonVisibility>  '
+ '              </Placemark>          '
+ '            </Change>       '
+ '          </Update>    '
+ '        </gx:AnimatedUpdate>    '
+ '        <gx:FlyTo>       '
+ '          <gx:duration>30</gx:duration>'
+ '          <gx:flyToMode>smooth</gx:flyToMode>     '
+ '          <LookAt>         '
+ '            <longitude>-77.901944</longitude>    '
+ '            <latitude>38.769167</latitude>     '
+ '            <altitude>2700</altitude>     '
+ '            <heading>-123.948935</heading> '
+ '            <tilt>63.063392</tilt>         '
+ '            <range>633.666023</range>     '
+ '            <altitudeMode>relativeToGround</altitudeMode>   '
+ '          </LookAt>   '
+ '        </gx:FlyTo>   '
+ '        <gx:AnimatedUpdate>      '
+ '          <gx:duration>0.0</gx:duration> '
+ '          <Update>     '
+ '            <targetHref/>  '
+ '            <Change>         '
+ '              <Placemark targetId="onland">       '
+ '                <gx:balloonVisibility>1</gx:balloonVisibility>  '
+ '              </Placemark>      '
+ '            </Change>       '
+ '          </Update>   '
+ '        </gx:AnimatedUpdate>    '
+ '   </gx:Playlist>     '
+ '    </gx:Tour>  '
+ '    <Placemark id="Fly1">   '
+ '      <name>   </name>    '
+ '      <description>    '
+ '           KIAD  Starting point...         </description>     '
+ '      <Point>      '
+ '        <gx:altitudeMode>relativeToGround</gx:altitudeMode>    '
+ '      </Point>   '
+ '    </Placemark>  '
+ '    <Placemark id="Fly2">     '
+ '      <name></name>  '
+ '      <description>We reached LOULU...</description> '
+ '      <Point>       '
+ '        <gx:altitudeMode>relativeToGround</gx:altitudeMode>   '
+ '      </Point> '
+ '    </Placemark> '
+ '     <Placemark id="onland">     '
+ '       <name></name>   '
+ '       <description>     '
+ '         <![CDATA[ RNDLI.   '
+ '       You<gx:balloonVisibility>1</gx:balloonVisibility>  '
+ '        Reached your destination]]>   '
+ '       </description>     '
+ '       <Point>      '
+ '       </Point>     '
+ '     </Placemark>  '
+ '        <ScreenOverlay>'
+ '     <name>Absolute Positioning: Top left</name>'
+ '     <visibility>1</visibility>'
+ '     <Icon>'
+ '       <href>https://cdn4.iconfinder.com/data/icons/32x32-free-design-icons/32/Target.png</href>'
+ '     </Icon>'
+ '     <overlayXY x="0.5" y=".5" xunits="fraction" yunits="fraction"/>'
+ '     <screenXY x="0.5" y=".5" xunits="fraction" yunits="fraction"/>'
+ '     <rotation>2.37878630116985</rotation>'
+ '     <size x=".1" y=".1" xunits="fraction" yunits="fraction"/>'
+ '   </ScreenOverlay>'
+ '       </Document>'
+ ' </kml>';
    var kmlObject = ge.parseKml(kmlString);
    ge.getFeatures().appendChild(kmlObject);
     ge.getView().setAbstractView(kmlObject.getAbstractView());
//ge.getTourPlayer().setTour(kmlObject);
  // ge.getTourPlayer().play();


   }



  function hideSun() {
    ge.getSun().setVisibility(false);

  }

  /* ]]> */
  </script>
</head>
<body onload="if(window.prettyPrint)prettyPrint();init();" bgcolor=#87CEEB>
  <h1>Google Earth -Practice</h1>
  <dl>

  </dl>
  <div style="clear: both;"></div>

  <div id="ui" style="position: relative;">
    <div id="map3d_container" style="border: 1px solid #000; width: 800px; height: 800px;">
      <div id="map3d" style="height: 100%;"></div>
    </div>

    <div id="extra-ui" style="position: absolute; left: 820px; top: 0;">
      Starting Point:<input type="text" name="fname">&nbsp;&nbsp;
  Destination Point: <input type="text" name="lname"><br><br/><br/>
  <center><input type="button"  onclick="KmlView()" value="Start"/><br/><br/></center><br/><br/>
    <form id="Fly" style="visibility:hidden">

 <input type="button" onclick="showSun()" value="Show Sun"/><br/><br/><br/>
      <input type="button" onclick="hideSun()" value="Hide Sun"/><br/><br/><br/>
      <img id="loadingImage" src="C:\Users\h118093\Downloads\Load2.gif" height="50%" width="50%" style="visibility:hidden" alt="Ready To Fly...."/>

</form>

    </div>
  </div>

</body>
</html>

如何在没有 fetchkml 的情况下使用 javascript 在 Google 地球上游览？

Answer 1

根据 Google 的地球 API 站点，通过 javascript API 支持游览，仅播放已在 KML 中编码的游览。 Google 的 Touring API 网页：https://developers.google.com/earth/documentation/touring

上述网页

Google 的文档 link 包含如何在 KML 中调用游览的示例。您在上面提供的代码只是将 KML 加载到 Google 地球插件中。您的代码不会调用游览。

您的下一步是通过该页面上显示的 ge.getTourPlayer().setTour(object) 和 ge.getTourPlayer().play() 方法正确调用游览。您应该能够利用 Google 的旅游文档网页上显示的 "Simple Tour" 示例。

我试用了您的代码，并根据 Google 的巡演网页上的信息正确编码后让它播放巡演。但是，您的 kmlString 也有一些错误。您没有关闭 /Document 和 /kml 标记。要使 "Simple Tour" 正常工作，您实际上需要完全删除 Document 标签。

[仅供参考...您知道 API 将于 2015 年 12 月 12 日 Google 关闭吗？如果您打算在今年年底之后使用它，您将需要开始寻找旅游替代方案。]

编辑答案以添加代码更改：

var kmlString = ''
+ '<?xml version="1.0" encoding="UTF-8"?>'
+ '<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2">'
//+ '  <Document>'  //<---------delete this line
:
: <clipped>
:
+ '    </gx:Tour>'
+ '</kml>'; //<---------add this line

kmlObject = ge.parseKml(kmlString);
ge.getFeatures().appendChild(kmlObject);
//ge.getView().setAbstractView(kmlObject.getAbstractView());    //<---------delete this line unless you need it for other purposes
ge.getTourPlayer().setTour(kmlObject);              //<---------add these two lines
ge.getTourPlayer().play();

Google地球APIJavascript游览动画

Google Earth API Javascript Tour animation

google-earth