第1页 / 共7页
第2页 / 共7页
第3页 / 共7页
第4页 / 共7页
第5页 / 共7页
第6页 / 共7页
第7页 / 共7页
STK-X Tutorials-HTML.pdf
STK X Tutorial – HTML
Send commands to STK X
Add Zoom In/Out to the Map control
Respond to events raised by STK X
Add map picking
Set STK X properties
STK X Tutorial – HTML
In this exercise you will gain hands-on experience using STK X to embed STK
functionality in an HTML interface.
CONTENTS
SEND COMMANDS TO STK X ....................................................................................1
ADD ZOOM IN/OUT TO THE MAP CONTROL ................................................................3
RESPOND TO EVENTS RAISED BY STK X ....................................................................3
ADD MAP PICKING..................................................................................................5
SET STK X PROPERTIES ..........................................................................................6
Send commands to STK X
1) Create a new HTML file in your preferred editor. Name the file index.htm and give
it the title STK X HTML Tutorial Example. You may also want to configure a
background color for aesthetics.
STK X HTML Tutorial Example
2) Move to the body of the HTML page. Insert the following object tag to add the Map
control to the HTML page
3) Repeat with the following two lines to add the Globe control to the HTML page.
4) Add a button to the page to load a scenario. The onClick handler requests that a
new scenario be loaded when the button is pressed.
Tutorial')"
class="submit">
5) Open the page in Internet Explorer. The Map and Globe controls will be visible.
6) You can click the New Scenario button to generate a new scenario. Depending on
your security settings, a warning may appear concerning the STK X controls. Click
Yes to allow the controls to execute.
7) The Map and Globe controls will switch to the scenario display.
8) With the mouse you can control the Globe window.
STK X Tutorial – HTML
2
Add Zoom In/Out to the Map control
1) Add the following code to the HTML page under the previous code. Name the
buttons Zoom in and Zoom out. These buttons will control the zoom on the Map
window through their on-click handlers.
2) Re-load the Web page in Internet Explorer. Click the New Scenario button. Click the Zoom In button. Use the mouse to define the zoom area in the Map control. You can zoom out by clicking the Zoom Out button. Respond to events raised by STK X 1) You will now add a script to the HTML page to respond to events coming from the STK X controls. In the section of the document, add the following: 2) Re-load the Web page in Internet Explorer. Double-click the Map window. The notification message will appear. STK X Tutorial – HTML 3
2) Re-load the Web page in Internet Explorer. Click the New Scenario button. Click the Zoom In button. Use the mouse to define the zoom area in the Map control. You can zoom out by clicking the Zoom Out button. Respond to events raised by STK X 1) You will now add a script to the HTML page to respond to events coming from the STK X controls. In the section of the document, add the following: 2) Re-load the Web page in Internet Explorer. Double-click the Map window. The notification message will appear. STK X Tutorial – HTML 3
3) You can use the same approach to hook up to the Globe control events.
4) You are now going to respond to STK X application events. In the body of the HTML
page, add the following object definition under the Globe control definition:
5) Add the following function in the script block previously defined in the head of the
page:
Sub stkxApp_onScenarioNew(scName)
msgbox "New Scenario created."
End Sub
6) Re-load the page in Internet Explorer. Click the New Scenario button. The
message box will be displayed as a result of the event.
STK X Tutorial – HTML
4
Add map picking
1) Return to the HTML editor. Add the text in bold as shown below to create a
“coordinates” division. You will use this division to show the current coordinates as
reported by the globe’s picker function.
…