0
Я пытаюсь реализовать тур API Google Earth в javascript. Я попробовал метод parsekml, но я не смог совершить какой-либо тур. У меня есть один вопрос ... Является ли javascript с поддержкой API Google Earth API? Я не хочу использовать fetchkml или импортировать из любой другой ссылки. Здесь я приложил свой пример кода. Любая помощь...?Google Earth API Javascript Tour animation
<!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&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">
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>
Как сделать тур на Google Earth с помощью JavaScript без fetchkml?
Спасибо за ваш ответ ... я уже прошли через данную ссылку. Я не хочу импортировать какой-либо файл kml в две мои программы. Потому что он запускает только статический тур. Мне нужно динамическое выполнение. Например, если пользователь дает какие-либо два места, он будет совершать экскурсии по этим местам. Можете ли вы помочь мне в этом сценарии? – Santhakumar
@Santhakumar Ваш код в порядке, но неполный (и ваш KML нуждается в исправлении). Вам просто нужно добавить две строки сразу после «ge.getFeatures(). AppendChild (kmlObject);» лайн, чтобы ваш тур играл как есть без загрузки внешнего файла KML: «ge.getTourPlayer(). setTour (kmlObject);» "ge.getTourPlayer(). Play();". Затем избавьтесь от тега «Document» в вашем KML и добавьте тег «/ kml» в конце. Это ТОЧНО, что вам говорит эта страница. Я уже несколько раз запускал свой мини-тур. – cybermike
@Santhakumar Создание динамического должно быть довольно простым, вы просто упрощаете определение турне в строке с начальным lat, lng и заканчиваете lat, lng, как указано пользователем, создайте новую строку, выгрузите предыдущий встроенный KML , загрузите новый встроенный KML, а затем скажите плагину, чтобы он играл в новый тур с этими двумя отсутствующими командами, которые вы оставили. – cybermike