使用一个在 Bluemix 上构建的飞行状态和跟踪应用程序来跟踪空中交通（3）

look_w

第 4 步. 将应用程序推送到                                Bluemix 服务器

• 使用 Cloud Foundry CLI cf 推送命令将已创建好的 WAR 项目从 Eclipse 项目推送到                                                Bluemix。在本例中，<application name>                                                是您的应用程序的惟一名称：

  1	cf  push  <application name>  -p  c:\<path>\newflightapp.war

  
  
  
  
• 看到成功消息后，登录到您的 Bluemix 仪表板。可以单击所显示的链接 (http://<application                                        name>.mybluemix.net/) 来验证新应用程序。

您还可以采用其他替代方法来管理应用程序并将它部署到 Bluemix。有关的更多信息，请参阅   和   文档。
开发班机状态和跟踪应用程序班机跟踪应用程序代码包含一个 Java™ 类，它使用了一个来自   API 服务的 XML 提要。该 API 实时或近实时地返回正在接近某个特定机场的班机的列表。该服务返回的 XML                                响应代码包含班机坐标、飞机时速、起飞机场和到达机场等数据。该数据是使用了一个 DOM 解析器来解析的，然后将检索的数据的一部分格式化为 JSON 输出。在一个                                JavaServer Pages (JSP) 文件中，这些 JSON 数据用于创建用户界面，以便使用 JQuery 和 Google Maps API                                显示班机在地图上的位置。
以下是它的工作原理。  API 服务提供一个服务 URL，后者需要以参数形式传递一个 FlightStats 应用程序 ID                                和应用程序密钥。该 ID 和密钥是在注册后分配的惟一值。基于用户对机场的单击或选择，机场代码被附加到该 URL 上的：
https://api.flightstats.com/flex/flightstatus/{protocol}/v2/{format}/airport/tracks/{Airportcode}/arr?appId=<yourId>&appKey=<yourKey>                                …./ maxFlights=10
flightstat.java 文件（位于 Eclipse 中导入的项目的 src 文件夹中）包含                                        flightQ(String ac) 方法。此方法接受机场编码作为参数，并将该编码附加到 URL 形成一个有效的 URL。通过传递参数                                maxFlights=10，该 URL 将响应中的随机班机数量限制为 10：

1 2 3

URL url = new     URL("https://api.flightstats.com/flex/flightstatus/rest/v2/xml/airport/tracks/"+ac+"/arr?     appId=<yourId>&appKey=<yourkey>&includeFlightPlan=false&maxPositions=1&maxFlights=10");

API 响应包含到达选定机场的 10 架班机的详细信息。此响应 XML 可使用一个 DOM 解析器来读取，而且可以通过遍历此 XML 来获取其元素：

1 2 3 4 5 6 7 8

URLConnection conn = url.openConnection(); DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); DocumentBuilder builder = factory.newDocumentBuilder(); Document doc = builder.parse(conn.getInputStream()); NodeList nodes = doc.getElementsByTagName("flightTrack"); buffer.append("[");   for (int i = 0; i < nodes.getLength(); i++) {     Element element = (Element) nodes.item(i);

XML 响应中的元素是使用 StringBuffer 附加的，可用于创建一个由 flightQ(String ac)                                方法返回的 JSON 格式的数据输出。这个 JSON 格式的数据片段显示了一架班机：

1 2 3 4 5 6 7 8 9 10

{ "flightNumber": "AA10", "lat": 36.0161, "lon": -107.2828, "description": "<b>Flight Number: AA10</b><br/>                 <b>Departure Airport Code: LAX</b> <br>                 <b>Arrival Airport Code: JFK</b></br>                 <br>Speed : 584 miles/hour</br>                 <br>Longitude : -107.2828  Latitude : 36.0161</br>" }

WebContent 文件夹包含 JSP 文件 flightTrack.jsp，后者使用 JQuery 函数                                        $(document).on 来创建 Google Map 用户界面。然后，它调用了                                        initialize() 方法，该方法将 Google Map 的中心设为北纬 40 度和西经 30 度，缩放级别为 3。地图显示在                                        <div> id "map_canvas" 上。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$(document).on("pageinit", "#map_page", function() {         initialize();     });     function initialize() {                   directionsDisplay = new google.maps.DirectionsRenderer();         var mapCenter = new google.maps.LatLng(40.00, -30.00);         var myOptions = {             zoom : 3,             mapTypeId : google.maps.MapTypeId.ROADMAP,             center : mapCenter         } map = new google.maps.Map(document.getElementById('map_canvas'),                 myOptions);

在 JSP 代码中，调用 flightQ(String ac) 会返回分配给 JavaScript 变量的 JSON 格式的字符串数据。使用                                Google Maps API 循环处理该数据，以便在地图上标记每架班机的位置。参见下一个示例。（有关的更多信息，请参阅   站点上的相关文档和示例代码。）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

...... flightstat f = new flightstat(); String json = f.flightQ(aircode); ....... var markers = <%=json%>; ....... Var gmarkers = []; for (i = 0; i < markers.length; i++) {     var data = markers     var myLatlng = new google.maps.LatLng(data.lat, data.lon);     var marker = new google.maps.Marker({         position : myLatlng,         map : map,         title : data.flightNumber     });     (function(marker, data) {     //Attaching a click event to the current marker     google.maps.event.addListener(               marker,"click",             function(e){                infoWindow.setContent(data.description);                   for ( var j = 0; j < gmarkers.length; j++) {             gmarkers[j]             .setIcon('http://google.com/mapfiles/ms/micons/red-dot.png');                }                 marker.setIcon('airplane_tourism.png');                 infoWindow.open(map, marker);              });     gmarkers.push(marker);     })(marker, data);       } }

班机坐标数据（纬度和经度）用于在 Google Maps                                上标记班机的位置。我们添加了一个单击事件来显示飞机的时速、班机编号，以及到达和目标机场。例如，此屏幕显示了用户单击地图上表示当前班机位置的红色标记图标时的班机详细信息。
下图概述了 Bluemix 飞行状态和跟踪应用程序。