4. Scene Operations

In the 3D scene, you can browse data conveniently in real-time, such as 2D\3D points, 2D\3D lines, surface, text, DEM, Grid, TIN, image, etc., also you can implement functionalities of fly and distance measurement. The SuperMap iClient 7C for 3D provides classes, such as the Pan, Select, MeasureArea, MeasureDistance, MeasureHeight, NullAction and PanSelec class, to implement the view operation in real time and the measure function on 3D, these classes are inherited from the SceneAction, and provide FlyingOperator for the fly operation.

Here describes with the following examples, such as full extent, pan, fly, choose the model, and distance measurement.

FlyingOperator the structure chart of the fly status class

FlyingOperator common methods

	Interface	Description
	flyTo	Flies from the current scene to the specified camera position by the specified way within the specified time.
	flyToBounds	Flies from the current scene to the specified Bounds area within the specified time.
	flyToGeometry	Flies from the current scene to the specified geometric object by the specified way within the specified time.
	play	Flies according to the specified route.
	moveTo	Moves the 3D layer with the specified index number in the 3D layer set to the location with the specified index number.
	moveToBottom	>Moves the 3D layer with the specified index number in the 3D layer set to the bottom.
	moveToTop	Moves the 3D layer with the specified index number in the 3D layer set to the top.
	moveUp	Moves the 3D layer with the specified index number in the 3D layer set up one level.
	removeAll	Removes all the layers in the layer set.
	removeAt	Removes the layers with the specified layer name or index number.

SceneAction is the parent class of the other 3D view operation classes, such as the Pan, Select, MeasureArea, MeasureDistance, MeasureHeight, NullAction, PanSelect class. The users can extend it to implement a series of operations.

ScencAction the common attributes

	Interface	Description
	name	Gets or sets the name of the interaction operation. When the users develop a sub-class SceneAction by themselves, they can customize the name of this operation.
	sceneControl	Gets or sets.
	sceneName	Gets the name of the belonged scene service.
	sceneAddress	Gets the service address of the layer set.

	Interface	Description
	flyTo	Flies from the current scene to the specified camera position by the specified way within the specified time.
	flyToBounds	Flies from the current scene to the specified Bounds area within the specified time.
	flyToGeometry	Flies from the current scene to the specified geometric object by the specified way within the specified time.
	play	Flies according to the specified route.
	moveTo	Moves the 3D layer with the specified index number in the 3D layer set to the location with the specified index number.
	moveToBottom	Moves the 3D layer with the specified index number in the 3D layer set to the bottom.
	moveToTop	Moves the 3D layer with the specified index number in the 3D layer set to the top.
	moveUp	Moves the 3D layer with the specified index number in the 3D layer set up one level.
	removeAll	Removes all the layers in the layer set.
	removeAt	Removes the layers with the specified layer name or index number.

The basic operations in the 3D scene

Fly

In the <body onLoad="onPageLoad()"> </body> of the "default.html" page, add the following code in the </div> after the scene control, add the fly control in the page:

JavaScript

JavaScript
<!--toolbar-->`<div id="toolSet" style="position: relative; top:0px; height: 5%; width: 100%; visibility: visible; display: block;">` <!--fly by setting the latitude and longitude and the height of the camera--><label style="position:relative; left: 10px;">the longitude:</label> <input id="longitude" name="longitude" type="text" value="0" style="position:relative; left:10px; width:60px; z-index:11; "/> <label style="position:relative; left: 20px;">the latitude:</label> <input id="latitude" name="latitude" type="text" value="0" style="position:relative; left:20px; width:60px; z-index:11; "/> <label style="position:relative; left: 30px;">the height:</label> <input id="altitude" name="altitude" type="text" value="500000" style="position:relative; left:30px; width:60px; z-index:11; "/> <img id="fly" alt="fly" title="fly" src="images/fly.png" style="position:relative; left:50px; width:32px; z-index:11;" onclick="fly()" onmouseover="this.style.width='36px';this.style.height='36px';this.src='images/fly_over.png'" onmouseout="this.style.width='32px';this.style.height='32px';this.src='images/fly.png'"/> </div>

<!--toolbar-->
<div id="toolSet" style="position: relative; top:0px; height: 5%; width: 100%; visibility: 
      visible; display: block;">
<!--fly by setting the latitude and longitude and the height of the camera-->
<label style="position:relative; left: 10px;">the longitude:</label>
<input id="longitude" name="longitude" type="text" value="0" style="position:relative; left:10px; 
         width:60px; z-index:11; "/>
<label style="position:relative; left: 20px;">the latitude:</label>
<input id="latitude" name="latitude" type="text" value="0" style="position:relative; left:20px; 
          width:60px; z-index:11; "/>
<label style="position:relative; left: 30px;">the height:</label>
<input id="altitude" name="altitude" type="text" value="500000" style="position:relative; left:30px; 
             width:60px; z-index:11; "/>
<img id="fly" alt="fly" title="fly" src="images/fly.png" 
     style="position:relative; left:50px; width:32px; z-index:11;"
     onclick="fly()" 
     onmouseover="this.style.width='36px';this.style.height='36px';this.src='images/fly_over.png'" 
     onmouseout="this.style.width='32px';this.style.height='32px';this.src='images/fly.png'"/>
</div>

Fill the following code in the "GettingStarted.js":

JavaScript

JavaScript
`function fly() { var longitude = document.getElementById("longitude").value; var latitude = document.getElementById("latitude").value; var altitude = document.getElementById("altitude").value; var camera = new SuperMap.Web.Realspace.Camera(longitude,latitude,altitude); scene.get_flyingOperator().flyTo(camera);` //or scene.set_camera(camera)`}`

function fly()
{
        var longitude = document.getElementById("longitude").value;
        var latitude = document.getElementById("latitude").value;
        var altitude = document.getElementById("altitude").value;
        var camera = new SuperMap.Web.Realspace.Camera(longitude,latitude,altitude);
        scene.get_flyingOperator().flyTo(camera); 
        //or scene.set_camera(camera)
}

the method scene.get_flyingOperator().flyTo(camera) means flying to a specified location with a certain speed and manner. This method has three parameters: the camera object, the fly speed and the fly mode enumeration constants, the last two parameters are optional. While the scene.get_camera(camera) will switch the scene directly to the location specified by the camera.

Full extent

Add the following code in the label represented the toolbar in the <div></div> of id="toolSet in "default.html" page, add the full extent control in the page:

JavaScript

JavaScript
<!--full extent-->`<img id="viewentire"alt="full extent" title="full extent" src="images/entire.png" style="position:relative; left:60px; width:32px; height:32px; z-index:11;" onClick="viewEntire()" onMouseOver="this.style.width='36px';this.style.height='36px';this.src='images/entire_over.png'" onMouseOut="this.style.width='32px';this.style.height='32px';this.src='images/entire.png'" />`

<!--full extent-->
<img id="viewentire"alt="full extent" title="full extent" src="images/entire.png" 
     style="position:relative; left:60px; width:32px; height:32px; z-index:11;"
     onClick="viewEntire()" 
     onMouseOver="this.style.width='36px';this.style.height='36px';this.src='images/entire_over.png'" 
     onMouseOut="this.style.width='32px';this.style.height='32px';this.src='images/entire.png'" />

add the following code in the "GettingStarted.js" to implement the full extent functionality:

JavaScript
`function viewEntire() { scene.viewEntire(); }`

Pan

Add the following code in the label represented the toolbar in the <div></div> of id="toolSet in "default.html" page, add the pan control in the page:

JavaScript

JavaScript
<!--pan-->`<img id="pan" alt="pan" title="pan" src="images/pan.png" style="position:relative;left:70px;width:32px; height:32px; z-index:11; " onClick="setPan()" onMouseOver="this.style.width='36px';this.style.height='36px';this.src='images/pan_over.png'" onMouseOut="this.style.width='32px';this.style.height='32px';this.src='images/pan.png'" />`

<!--pan-->
<img id="pan" alt="pan" title="pan" src="images/pan.png"
     style="position:relative;left:70px;width:32px; height:32px; z-index:11; "
     onClick="setPan()" 
     onMouseOver="this.style.width='36px';this.style.height='36px';this.src='images/pan_over.png'" 
     onMouseOut="this.style.width='32px';this.style.height='32px';this.src='images/pan.png'" />

Fill the following code in the "GettingStarted.js":

JavaScript
`function setPan() { var panAction = new SuperMap.Web.UI.Action3Ds.Pan(sceneControl); sceneControl.set_sceneAction(panAction); }`

Select the model (the model and vector data can be selected and highlighted, and get the ID numbers of the selected features at the same time)

Add the following code in the label represented the toolbar in the <div></div> of id="toolSet in "default.html" page, add the select control in the page:

JavaScript

JavaScript
<!--select-->`<img id="select" alt="select" title="select" src="images/select.png" style="position:relative; left:80px; width:32px; z-index:11; " onclick="setSelect()" onmouseover="this.style.width='36px';this.style.height='36px';this.src='images/select_over.png'" onmouseout="this.style.width='32px';this.style.height='32px';this.src='images/select.png'" />`

<!--select-->
<img id="select" alt="select" title="select" src="images/select.png"
     style="position:relative; left:80px; width:32px; z-index:11; "  
     onclick="setSelect()" 
     onmouseover="this.style.width='36px';this.style.height='36px';this.src='images/select_over.png'" 
     onmouseout="this.style.width='32px';this.style.height='32px';this.src='images/select.png'" />

Fill the following code in the "GettingStarted.js" to implement the select operation. Because the ID number of the selected object will be popped up after you select the object in the scene, you need to add the addEvent method in the scene control firstly, where the first parameter "objectSelected" means intercepting the status of selecting the features, the second is the user-defined function, which means that once the scene control is selected, the user-defined function selectMode is touched off. The addEvent also can intercept operations of measuring or measured distance or area. Please see the interface document of this method for the optional values of the first parameter:

JavaScript
`function setSelect() { var selectAction = new SuperMap.Web.UI.Action3Ds.Select(sceneControl); sceneControl.set_sceneAction(selectAction); sceneControl.addEvent("objectSelected", selectModel) }`

Then add the custom function selectMode in the "GettingStarted.js" to pop up the ID number of the selected object (the select operation will return a Selection3Ds object, please see the method addEvent of the scene control about the parameters returned from the interception event):

JavaScript

JavaScript
`function selectModel (selection3Ds) { var selection3DCount = selection3Ds.length; for(var i=0; i<selection3DCount; i++) { var selectCount = selection3Ds[i].get_count(); for(var j=0; j<selectCount; j++) { var selection3D = selection3Ds[i]; var layer3D = scene.get_layer3Ds().get_item(selection3D.get_layer3D().get_name()); var selectObjectName = layer3D.findFeature3DByID(selection3D.get_item(j)).get_name(); alert("The ID of this object: "+selection3D.get_item(j)+"\n"+selectObjectName); } } }`

function selectModel (selection3Ds)
{
        var selection3DCount = selection3Ds.length;
        for(var i=0; i<selection3DCount; i++)
        {
                var selectCount = selection3Ds[i].get_count();
                for(var j=0; j<selectCount; j++)
                {
                        var selection3D = selection3Ds[i];
                        var layer3D = scene.get_layer3Ds().get_item(selection3D.get_layer3D().get_name());
                        var selectObjectName = layer3D.findFeature3DByID(selection3D.get_item(j)).get_name();
                        alert("The ID of this object: "+selection3D.get_item(j)+"\n"+selectObjectName);
                }
        }
}

The effect after running:
Figure1 Prompt the ID number after selected the model

Distance measurement

Add the following code in the label represented the toolbar in the <div></div> of id="toolSet in "default.html" page, add the distance measurement control in the page:

JavaScript

JavaScript
<!--distance measurement-->`<img id="refresh" alt="measurement" title="measurement" src="images/measure_distance.png" style="position:relative; left:90px; width:32px; height:32px; z-index:11; " onclick="measureDistance()" onmouseover="this.style.width='36px';this.style.height='36px'; this.src='images/measure_distance_over.png'" onmouseout="this.style.width='32px';this.style.height='32px';this.src='images/measure_distance.png'" />`

<!--distance measurement-->
<img id="refresh" alt="measurement" title="measurement" src="images/measure_distance.png" 
     style="position:relative; left:90px; width:32px; height:32px; z-index:11; "  
     onclick="measureDistance()" 
     onmouseover="this.style.width='36px';this.style.height='36px';
                                                this.src='images/measure_distance_over.png'" 
     onmouseout="this.style.width='32px';this.style.height='32px';this.src='images/measure_distance.png'" />

Fill the following code in the "GettingStarted.js" to select the distance measurement operation. Like the select operation, you need to add the method addEvent to intercept the end status of the distance measurement to the scene control, which is represented by the "measureDistanceFinished". When the measurement operation is end, the user-defined function disFinished is touched off:

JavaScript

JavaScript
`function measureDistance() { var measureDAction = new SuperMap.Web.UI.Action3Ds.MeasureDistance(sceneControl); sceneControl.set_sceneAction(measureDAction); sceneControl.addEvent("measureDistanceFinished", disFinished); }`

function measureDistance()
{
        var measureDAction = new SuperMap.Web.UI.Action3Ds.MeasureDistance(sceneControl);
        sceneControl.set_sceneAction(measureDAction);
        sceneControl.addEvent("measureDistanceFinished", disFinished);
}

Then add the user-defined function disFinished to the "GettingStarted.js" to pop up the total distance after implemented the distance measurement (the measurement operation will return a total distance parameter dTotalDis, please see the addEvent method of the scene control about the parameters returned by the interception event):

JavaScript
`function disFinished(dTotalDis) { alert("the total distance:" + dTotalDis + "meters"); }`

4. Scene Operations

Overview

FlyingOperator the structure chart of the fly status class

FlyingOperator common methods

ScencAction the common attributes

The basic operations in the 3D scene