<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title> GESR-AirControl (c) Peter Holzknecht </title>
<style type="text/css">
.labels
{
color: red;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
width: 40px;
border: 2px solid black;
white-space: nowrap;
</style>
<script type="text/javascript">
var flag = 0;
var map;
var poly;
var marker;
var LiveMarker = null;
var distanceFlight = null;
var LatLiveStorage;
var LonLiveStorage;
var LatStart;
var LonStart;
var Lat11 = 0;
var Lon11 = 0;
var Strecke = 0;
//**********************************************
//* Start-Position anzeigen *
//**********************************************
function Update()
{
var Lat = document.mainframe.Latitude.value; // Startposition Latitude
var Lon = document.mainframe.Longitude.value; // Startposition Longitude
LatStart = Lat;
LonStart = Lon;
var latlng = new google.maps.LatLng(Lat, Lon);
map.panTo(new google.maps.LatLng(Lat,Lon)); // Springe zur Startposition
//********************************************
//* Den Marker auf die Start-Position setzen *
//********************************************
var marker = new google.maps.Marker // Marker auf die Startposition setzen
(
{
position: latlng,
map: map,
icon: 'green.png',
title:"GESR-START-POSITION"
}
);
//*********************************************
//* Den Radius um die Start-Position zeichnen *
//*********************************************
//document.mainframe.DistanceRadius.value = 100000;
var DistanceRadius = parseFloat(document.mainframe.DistanceRadius.value);
if (flag == 0) // Den Kreis nur einmal zeichnen
{
var GESRmaxEntfernung = // Definition des Kreises
{
strokeColor: "#FF0000", // Farbe des Kreisrandes
strokeOpacity: 0.8, // Durchsichtigkeit des Kreisrandes
strokeWeight: 2, // Strichstärke des Kreisrandes
fillColor: "#00CC00", // Farbe des gefüllten Kreises
fillOpacity: 0.1, // Durchsichtigkeit des Kreises
clickable: false,
map: map,
center: latlng, // Wo soll der Kreis gezeichnet werden?
editable: true,
radius: DistanceRadius // Radius in Meter
}
GESRCircle = new google.maps.Circle(GESRmaxEntfernung); // Zeichne den Kreis um die Startposition
flag = 1;
}
//***********************************************************************
// Die Flugroute gemäss gewünschtem Flugplan einzeichen *
//***********************************************************************
var lineSymbol = {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW};
var polyOptions = // Definition der Flugstrecke, die gezeichnet werden soll
{
strokeColor: '#00FF00',
strokeOpacity: 0.8,
strokeWeight: 2,
icons: [{ // Pfeil ans Ende der Polyline setzen
icon: lineSymbol,
offset: '100%'
}],
editable: true // Die Polyline editierbar machen
}
poly = new google.maps.Polyline(polyOptions); // Zeichne die nächste Verbindung des Flugplanes
poly.setMap(map);
google.maps.event.addListener(map,'click',addLatLng); // Setze den nächsten Punkt des Flugplanes
autoUpdate(); // Live-Position anzeigen
}
function addLatLng(event)
{
var path = poly.getPath();
path.push(event.latLng);
var PosLatLng = event.latLng;
var PosLat = PosLatLng.lat();
var PosLng = PosLatLng.lng();
//document.mainframe.MarkerUpdate.value = 5; // Nur für Testzwecke
switch (document.mainframe.MarkerUpdate.value) // Farben des Markers auf Grund der Waypoint-Eigenschaft festlegen
{
case "1": image ='gruen.png'; // Ready for take of
break;
case "2": image ='rot.png'; // Landung
break;
case "3": image ='gelb.png'; // POI
break;
case "4": image ='rosa.png'; // Position go home
break;
case "5": image ='grau.png'; // Set home position
break;
case "6": image ='blau.png'; // Waypoint
break;
default: image ='blau.png';
};
// Hier die Bestimmung der Waypoint-Koordinaten rein
var marker_Waypoint = new google.maps.Marker(
{
position: event.latLng,
icon: image,
title: 'Waypoint ' + path.getLength(),
draggable: true,
map: map
});
document.mainframe.LatitudePosMarker.value = PosLat; // Übergabe der Flugplan-Koordinaten an die Webseite
document.mainframe.LongitudePosMarker.value = PosLng;
}
//************************************************************************
//* Automatische Anzeige der Startposition *
//************************************************************************
function SeiteUpdaten()
{
if(document.mainframe.SeitenUpdate.value == 1)
{
Update();
interval = setInterval(SeiteUpdaten,0);
document.mainframe.SeitenUpdate.value = 0;
}
}
//************************************************************************
//* Live-Position und die dazugehörigen Features anzeigen *
//************************************************************************
function autoUpdate()
{
document.mainframe.LatitudePos.value = 52.12345; // Beide Zeilen müssen hier wieder raus
document.mainframe.LongitudePos.value = 9.12345;
document.mainframe.drawingAirPlane.value = 1; // Muss wieder hier nach der Testung wieder raus
document.mainframe.drawingAirDistance.value = 1; // Muss wieder hier nach der Testung wieder raus
var AirDistance = parseFloat(document.mainframe.drawingAirDistance.value);
var drawingAirPlane = parseFloat(document.mainframe.drawingAirPlane.value);
var LatLive = parseFloat(document.mainframe.LatitudePos.value);
var LonLive = parseFloat(document.mainframe.LongitudePos.value);
var newPoint = new google.maps.LatLng(LatLive,LonLive);
// Berechnung der Entfernung zwischen Start- und Liveposition
var Umrechnung = 3.141592653589793/180; // Notwendig für die Umwandlung in Radiant
var Lat1 = document.mainframe.Latitude.value*Umrechnung; // Latitude Startposition in Radiant
var Lon1 = document.mainframe.Longitude.value*Umrechnung; // Longitude Startposition in Radiant
var Lat2 = document.mainframe.LatitudePos.value*Umrechnung; // Latitude Liveposition in Radiant
var Lon2 = document.mainframe.LongitudePos.value*Umrechnung; // Longitude Liveposition in Radiant
var r = 6371; //Erdradius in Km
var d = Math.abs((Math.acos(Math.sin(Lat1)*Math.sin(Lat2)+Math.cos(Lat1)*Math.cos(Lat2)*Math.cos(Lon2-Lon1))*6371)*1000); // Entfernung in Meter
//------------------- Verbindunglinie LivePos zur HomePos ---------------------------
var HomeLineCoordinates =
[
new google.maps.LatLng(LatLive, LonLive),
new google.maps.LatLng(LatStart,LonStart)
]
var HomeLineSymbol =
{
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var polyOptions =
{
path: HomeLineCoordinates,
strokeColor: "#FFFF00", // gelb
strokeOpacity: 0.8,
strokeWeight: 1.5,
icons: [{
icon: HomeLineSymbol,
offset: '100%'
}],
geodesic: true,
map: map
}
//------------------------ Flugrichtung anzeigen ------------------------------------------
var zoomLevel = map.getZoom();
var DeltaLon = 0.004;
var DeltaLat = 0.004;
DeltaLon = DeltaLon / zoomLevel;
DeltaLat = DeltaLat / zoomLevel;
if (LonLive > LonLiveStorage && LatLive > LatLiveStorage)
{
DeltaLon = 1 * DeltaLon;
DeltaLat = 1 * DeltaLat;
};
if (LonLive < LonLiveStorage && LatLive > LatLiveStorage)
{
DeltaLon = (-1) * DeltaLon;
DeltaLat = 1 * DeltaLat;
};
if (LonLive < LonLiveStorage && LatLive < LatLiveStorage)
{
DeltaLon = (-1) * DeltaLon;
DeltaLat = (-1) * DeltaLat;
};
if (LonLive > LonLiveStorage && LatLive < LatLiveStorage)
{
DeltaLon = 1 * DeltaLon;
DeltaLat = (-1) * DeltaLat;
};
var FlyLineCoordinates =
[
new google.maps.LatLng(LatLiveStorage,LonLiveStorage),
new google.maps.LatLng(LatLive + DeltaLat, LonLive + DeltaLon)
]
var FlyLineSymbol =
{
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var FlyLineOptions =
{
path: FlyLineCoordinates,
strokeColor: "#FFFFFF", // weiß
strokeOpacity: 0.8,
strokeWeight: 1.5,
icons: [{
icon: FlyLineSymbol,
offset: '100%'
}],
map: map
};
//------------- Linien löschen und wieder neu zeichnen ---------------
if (LoeschFlag == 1)
{
HomeLine.setMap(null);
FlyLine.setMap(null);
LoeschFlag = 0;
}
else
{
HomeLine = new google.maps.Polyline(polyOptions);
FlyLine = new google.maps.Polyline(FlyLineOptions);
LoeschFlag = 1;
}
//-----------------------------------------------------------------------------------------
if (d <= 3) // Modell befindet sich ganz in der Nähe des Startpunktes
{
document.mainframe.Funktion.value = 1;
}
if (d >= parseFloat(document.mainframe.DistanceRadius.value)) // Model befindet sich ausserhalb des Aktionsradius
{
document.mainframe.Funktion.value = 2;
}
document.mainframe.AirDistance.value = d; // Übergabe der Entfernung an die WEB-Seite
//document.mainframe.DistanceRadius.value = 400; // Das hier wieder raus.Dieser Wert muss aus dem Hauptprogramm übergeben werden.
var d2 = Math.abs((Math.acos(Math.sin(Lat11)*Math.sin(Lat2)+Math.cos(Lat11)*Math.cos(Lat2)*Math.cos(Lon2-Lon11))*6371)*1000);// Geflogene Gesamtstrecke in Meter berechnen
// Gesamt geflogene Strecke bestimmen
document.mainframe.Gesamtstrecke.value += d2;//Strecke; //Übergabe der Gesamtstrecke an die Webseite
if (d <= parseFloat(document.mainframe.DistanceRadius.value)) // Befindet sich das Modell innerhalb des Sicherheits-Radius?
{
if (LiveMarker != null) // Marker immer auf die Live-Position legen
{
LiveMarker.setPosition(newPoint); // Live-Marker already created ==> Move it
if (drawingAirPlane == 1) // Soll die Flugstrecke mitgezeichnet werden?
{
var flightPlanCoordinates =
[
new google.maps.LatLng(LatLiveStorage, LonLiveStorage), // Koordinaten der zwei Punkte festlegen,
new google.maps.LatLng(LatLive, LonLive) // zwischen denen gezeichnet werden soll.
];
var flightPath = new google.maps.Polyline // Definition der Polyline
(
{
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 1.5
}
);
LatLiveStorage = LatLive; // Latitude für Polyline zwischen speichern
LonLiveStorage = LonLive; // Longitude für Polyline zwischen speichern
Lat11 = Lat2;
Lon11 = Lon2;
flightPath.setMap(map); // Geflogene Strecke einzeichnen.
};
}
else
{
LiveMarker = new google.maps.Marker // Live-Marker does nost exist ==> Create it
(
{
position: newPoint,
map: map,
draggable: true,
title: "GESR-Dis.: " + d + "m",
icon: 'red.png'
}
);
};
};
map.setCenter(newPoint); // Center the map on the new position
setTimeout(autoUpdate,50); // Rufe die Funktion autoUpdate immer wieder auf
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
<center>
<form name="mainframe" action="" >
<input type="text" name="StartFlag" size=11>
<input type="text" name="Latitude" size=11>
<input type="text" name="Longitude" size=11>
<input type="text" name="LatitudePos" size=11>
<input type="text" name="LongitudePos" size=11>
<input type="text" name="LatitudePosMarker" size=11>
<input type="text" name="LongitudePosMarker" size=11>
<input type="text" name="StartPositionFlag" sinze=11>
<input type="text" name="drawingAirPlane" sinze=11>
<input type="text" name="drawingAirDistance" sinze=11>
<input type="text" name="AirDistance" sinze=11>
<input type="text" name="DistanceRadius" sinze=11>
<input type="text" name="Funktion" size=11>
<input type="text" name="Gesamtstrecke" size=11>
<input type="text" name = "SeitenUpdate" size = 11>
<input type="text" name = "MarkerUpdate" size = 11>
</form>
<script type="text/javascript">
var StartFlag = document.mainframe.StartFlag.value;
var Zaehler = 1;
while (StartFlag != 1 && Zaehler <= 10000) // Warten auf das GPS-Signal
{
//setTimeout(Update,1000);
Zaehler++;
}
if (document.mainframe.StartFlag.value != 0)
{
setTimeout(Update,500); // Setze die neuen Koordinaten
}
</script>
</center>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript" src="../src/markerwithlabel.js"></script>
<script src="http://www.google.com/uds/api?ffile=uds.js&v=3.0" type=text/javascript"></script>
<script src="http://www.google.com/uds/solutions/lacalsearch/gmlocalsearch.js" type="text/javascript"></script>
<script type="text/javascript">
//********************************
//* Deklarationen *
//********************************
var zoomfaktor = 20;
var Lat = 54.550242; //document.mainframe.Latitude.value;
var Lon = 10.002566; //document.mainframe.Longitude.value;
document.mainframe.SeitenUpdate.value = 0; // Defaultwert setzen
var interval;
var LoeschFlag = 0;
//****************************************
//* Die komplette Map erzeugen *
//****************************************
function initialize()
{
var latlng = new google.maps.LatLng(Lat, Lon);
//**************************************
//* Die Map anzeigen *
//**************************************
document.mainframe.Funktion.value = 0;
var myOptions =
{
zoom: zoomfaktor,
center: latlng,
mapTypeControl: false,
draggableCursor: 'auto', // Aussehen des Cursors
draggingCursor: 'move' ,
disableDoubleClickZoom: false,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//********************************************
//* Den Marker für die Home-Position setzen *
//********************************************
var marker = new google.maps.Marker
(
{
position: latlng,
map: map,
icon: 'home.png',
title:"GESR-HOME"
}
);
//************************************************************************
//* Infofenster GESR-Heimat mit Koordinaten-Angabe *
//************************************************************************
var infoWindow = new google.maps.InfoWindow(
{
content: 'GESR-home landing field' + "<br/>Lat: " + Lat + "°" + "<br/>Lon: " + Lon + "°"
});
infoWindow.open(map, marker);
//*************************************************************************
//* Ist die Startposition gesetzt? Wenn ja, dann weiter machen *
//*************************************************************************
interval = setInterval(SeiteUpdaten,500);
}
</script>
</body>
</html>
