SkylineGlobe 的 TerraExplorer Pro里面，给我们提供了一个Timespan Tags工具，通过这个工具，我们可以设置ProjectTree任务组对象的生命周期；
然后通过调用Time Slider工具，既可以控制这些对象的显示或者隐藏。
在这个功能的实现过程中，主要使用到了ProjectTree接口中的SetGroupStartTime和SetGroupEndTime方法；
以及TimeSpan接口中的Start和End属性的设置；
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ToolTitle</title> <link rel="StyleSheet" href="../Style.css" type="text/css"> <link rel="stylesheet" type="text/css" media="all" href="./jscalendar/skins/aqua/theme.css" title="Aqua" /> <style> .MenuButton { height: 78px; width: 65px; margin: 5px; white-space: normal; } .MenuButtonHighlight { color: Red; font-weight: bold; } .tableHeader {background-color:Silver} </style> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="border: 0; overflow: auto;" id="Body" onload="Init()"> <!-- onclick="bHide=true;HideOptionsNow()" > --> <table border="0" width="100%" cellspacing="0" cellpadding="2"> <tr> <td id="TopAreaTD" height="50px" width="100%" valign="middle" style="background-color: #CAD8E2"> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="12px"></td> <td width="55px"><img alt="find" src="TimeStampIcon.gif" /></td> <td id="TitleTD" align="center" class="s12b i18n">ToolName</td> <td valign="top" align="right" id="CloseHelpTd"><img src="../CommonImg/help.gif" border="0" class="i18n" alt="help" title="help" onclick="DisplayHelpPopup6(SGLang.i18nFile('help.html'),SGLang.i18n('help'))" style="cursor: pointer;"></td> </tr> </table> </td> </tr> <tr height="1px"> <td style="background-repeat: repeat-x;" background="../CommonImg/separator.gif"> </td> </tr> <tr> <td> <br /> </td> </tr> </table> <table> <tr class="s8"> <td colspan="2"> <table border="0" cellspacing="0" cellpadding="1" bgcolor="#ffffff" class="s8"> <tr class='TableOtherLine'> <td align="top" class="s8b i18n">Text15</td> <td align="left"> <select id="Select1" size="1" style="z-index: 1;"> <option value="0" class="i18n" selected>Text16</option> </select> </td> </tr> <tr class="s8"> <td align="top" class="s8b i18n"> Text1 </td> <td align="left"> <input type="text" name="date" id="start_date_c" readonly="1" /> <img alt="start" src="./jscalendar/img.gif" id="start_trigger_c" style="cursor: pointer; border: 0px;" title="Start Date and Time" onmouseover="this.style.background='red';" onmouseout="this.style.background=''" /> </td> </tr> <tr class='TableOtherLine'> <td align="top" class="s8b i18n"> Text2 </td> <td align="left"> <input type="text" name="date" id="end_date_c" readonly="1" /> <img alt="End" src="./jscalendar/img.gif" id="end_trigger_c" style="cursor: pointer; border: 0px;" title="End Date and Time" onmouseover="this.style.background='red';" onmouseout="this.style.background=''" /> </td> </tr> <tr class="s8"> <td align="top" class="s8b i18n">Text11</td> <td align="left"> <select id="handleSubGroups" size="1" style="z-index: 1;"> <option value="0" class="i18n" selected>Text12</option> <option value="1" class="i18n" >Text13</option> </select> </td> </tr> </table> </td> </tr> <tr class="s8"> <td colspan="2"> <button id="groupButton" class="MenuButton" onclick="SelectGroupObjects(1)"> <img src="group.gif" /><br /> <span class="i18n">Text5</span></button> <button id="cleanButton" class="MenuButton" onclick="SelectGroupObjects(2)"> <img src="clean.gif" /><br /> <span class="i18n">Text8</span></button> </td> </tr> <tr> <td> <span id="resultLine"></span> <table border=1 id="objectsTable"> </table> </td> </tr> </table> <object id="SGWorld" classid="CLSID:3a4f91b0-65a8-11d5-85c1-0001023952c1"> </object> </body> <script language="javascript" src="../ToolsCommon.js"></script> <!-- import the calendar script --> <script type="text/javascript" src="./jscalendar/calendar.js"></script> <script type="text/javascript"> //------------------- // load lang file for calendar (function() { document.write("<script language='javascript' src='./jscalendar/calendar-lang.js'></"+"script>"); var code = SGLang.getCode(); document.write("<script language='javascript' src='./jscalendar/" + code + "/calendar-lang.js'></"+"script>"); })(); </script> <script type="text/javascript" src="./jscalendar/calendar-setup.js"></script> <script language="jscript"> var startTime; var endTime; var objectsTableContent; var numObjects; var deltaTime; // Init function Init() { SGWorld.Window.ShowControls(SGWorld.Window.GetControls() | 64); // Turn on the time control Reset(0, 0); } //-------------- // Reset function Reset(FirstTime, FromMouseInputMode) { $("#groupButton").removeClass("MenuButtonHighlight"); $("#cleanButton").removeClass("MenuButtonHighlight"); SGWorld.ProjectTree.EnableRedraw(1); SGWorld.Window.HideMessageBarText(); numObjects = 0; } //----------- // SelectGroupObjects function SelectGroupObjects(action) { var parentNode = SGWorld.ProjectTree.GetNextItem(0, 10); if (parentNode == 0 || !(SGWorld.ProjectTree.IsGroup(parentNode))) { alert(SGLang.i18n("Text69")); return; } startTime = Date.parseDate($("#start_date_c").val(),"%b %e, %Y %H:%M").getTime(); endTime = Date.parseDate($("#end_date_c").val(),"%b %e, %Y %H:%M").getTime(); if (action == 1 && (isNaN(startTime) || isNaN(endTime))) { alert(SGLang.i18n("Text6")); return; } $("#objectsTable").html(""); objectsTableContent = ""; $(event.srcElement).addClass("MenuButtonHighlight"); SGWorld.Window.ShowMessageBarText(SGLang.i18n("Text7"), -1); SGWorld.Window.ShowControls(SGWorld.Window.GetControls() | 64); // Turn on the time control SGWorld.ProjectTree.EnableRedraw(0); searchLeaf(parentNode, 0, 0); deltaTime = (endTime - startTime) / numObjects; searchLeaf(parentNode, action, 0); if (action == 1) $("#resultLine").html(SGLang.i18n("Text9") + numObjects + " <a onclick='showResultTable("+parentNode+");'><u>" + SGLang.i18n("Text10") + "</u></a>"); Reset(0, 0); } //-------------- //showResultTable function showResultTable(parentNode) { objectsTableContent = "<h1 style='100%;text-align:center'>" + SGLang.i18n("Text14") + "</h1><style>td { border:solid 1px black;padding-left:5px;padding-right:5px;font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; }</style><table style='100%;height:100%' cellspacing=0 cellpadding=1><tr style='background-color:#3F5875;color:white;text-align:center' ><td >" + SGLang.i18n("Text70") + "</td> <td>" + SGLang.i18n("Text1") + "</td><td>" + SGLang.i18n("Text71") + "</td><td>" + SGLang.i18n("Text2") + "</td></tr>"; searchLeaf(parentNode, 3, 0); objectsTableContent += "<tr style='height:100%'><td colspan='4' /></tr></table>"; var rowCount = $(objectsTableContent).find("tr").length; var resultPopup = SGWorld.Creator.CreatePopupMessage(SGLang.i18n("Text14"), "", 50, 50, 550, Math.min(400, rowCount * 20 + 100), -1); resultPopup.InnerHTML = objectsTableContent; resultPopup.AllowDrag = true; resultPopup.AllowResize = true; SGWorld.Window.ShowPopup(resultPopup); //$("#objectsTable").append(objectsTableContent); } //------------------- // searchGeometries function searchLeaf(parentNode, action, level) { var node = SGWorld.ProjectTree.GetNextItem(parentNode, 11); SGWorld.ProjectTree.SetGroupStartTime(parentNode, 0); SGWorld.ProjectTree.SetGroupEndTime(parentNode, 0); while (node != -1 && node != 0) { if (!SGWorld.ProjectTree.IsLayer(node)) { if (SGWorld.ProjectTree.IsGroup(node)) { searchLeaf(node, action, level + 1); if (action == 1 && level == 0 && $("#handleSubGroups").attr("value")=="1") startTime += deltaTime if (action == 0 && level == 0 && $("#handleSubGroups").attr("value") == "1") numObjects++; } else { var Object = SGWorld.ProjectTree.GetObject(node); if (Object != null) { switch (action) { case 0: // count objects if (level == 0 || $("#handleSubGroups").attr("value") == "0") numObjects++; break; case 1: // Set time SetTimes(Object); if (level == 0 || $("#handleSubGroups").attr("value") == "0") startTime += deltaTime break; case 2: // Clean CleanTimes(Object); break; case 3: // Get time GetTimes(Object); break; } } } } node = SGWorld.ProjectTree.GetNextItem(node, 13); } } //------------- // SetTimes function SetTimes(Object) { try { Object.TimeSpan.Start = startTime; Object.TimeSpan.End = startTime + deltaTime; } catch (e) {} } //------------- // SetTimes function GetTimes(Object) { //try //{ if (!Object.TimeSpan) return; var objStartDate = new Date(Object.TimeSpan.Start) var objEndDate = new Date(Object.TimeSpan.End) var objDeltaDateDays = Math.floor((objEndDate.getTime() - objStartDate.getTime()) / 86400000); var objDeltaDatehours = Math.floor((objEndDate.getTime() - objStartDate.getTime()) / 3600000) - (objDeltaDateDays * 24); var objDeltaDateMin = (objEndDate.getTime() - objStartDate.getTime()) / 60000 - (objDeltaDatehours * 60) - (objDeltaDateDays * 1440); objDeltaDateMin = Math.floor((objDeltaDateMin + .005) * 100) / 100; startTimeStr = objStartDate.toDateString() + " " +prettyDate(objStartDate); // objStartDate.getHours() + ":" + objStartDate.getMinutes() endTimeStr = objEndDate.toDateString() + " " + prettyDate(objEndDate); //objEndDate.getHours() + ":" + (objEndDate.getMinutes())? objEndDate.getMinutes() objectsTableContent += "<tr><td >" + Object.TreeItem.Name + "</td> <td>" + startTimeStr + "</td><td>" +objDeltaDateDays+"d " + objDeltaDatehours + "h " + objDeltaDateMin + "m </td><td>" + endTimeStr + "</td></tr>"; //} //catch (e) {} } function prettyDate(date) { var Hours = date.getHours() + ""; if (Hours.length == 1) Hours = "0"+Hours; var minutes = date.getMinutes() + ""; if (minutes.length == 1) minutes = "0"+minutes; return Hours+":"+minutes; } //------------- // CleanTimes function CleanTimes(Object) { try { Object.TimeSpan.Start = 0; Object.TimeSpan.End = 0; } catch (e) {} } //---------------- Calendar.setup({ inputField: "start_date_c", // id of the input field ifFormat: "%b %e, %Y %H:%M", // format of the input field button: "start_trigger_c", // trigger for the calendar (button ID) align: "Tl", // alignment (defaults to "Bl") showsTime: true, // will display a time selector singleClick: true }); Calendar.setup({ inputField: "end_date_c", // id of the input field ifFormat: "%b %e, %Y %H:%M", // format of the input field button: "end_trigger_c", // trigger for the calendar (button ID) align: "Tl", // alignment (defaults to "Bl") showsTime: true, // will display a time selector singleClick: true }); </script> </html>