Overview

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 the structure chart of the fly status class

 FlyingOperator common methods

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

SceneAction diagram

ScencAction the common attributes

  Interface Description
Public property 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.
Public property sceneControl Gets or sets.
Public property sceneName Gets the name of the belonged scene service.
Public property sceneAddress Gets the service address of the layer set.
  Interface Description
Public method flyTo Flies from the current scene to the specified camera position by the specified way within the specified time.
Public method flyToBounds Flies from the current scene to the specified Bounds area within the specified time.
Public method flyToGeometry Flies from the current scene to the specified geometric object by the specified way within the specified time.
Public method play Flies according to the specified route.
Public method moveTo Moves the 3D layer with the specified index number in the 3D layer set to the location with the specified index number.
Public method moveToBottom Moves the 3D layer with the specified index number in the 3D layer set to the bottom.
Public method moveToTop Moves the 3D layer with the specified index number in the 3D layer set to the top.
Public method moveUp Moves the 3D layer with the specified index number in the 3D layer set up one level.
Public method removeAll Removes all the layers in the layer set.
Public method 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   
      <!--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="../../../assets/images/GettingStarted/iServer_iClient_Start/Realspace_Start/img/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='../../../assets/images/GettingStarted/iServer_iClient_Start/Realspace_Start/img/fly_over.png'" 
     onmouseout="this.style.width='32px';this.style.height='32px';this.src='../../../assets/images/GettingStarted/iServer_iClient_Start/Realspace_Start/img/fly.png'"/>
      </div>
    • Fill the following code in the "GettingStarted.js":
    • 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)
}

  • 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   
      <!--full extent-->
<img id="viewentire"alt="full extent" title="full extent" src="../../../assets/images/GettingStarted/iServer_iClient_Start/Realspace_Start/img/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='../../../assets/images/GettingStarted/iServer_iClient_Start/Realspace_Start/img/entire_over.png'" 
     onMouseOut="this.style.width='32px';this.style.height='32px';this.src='../../../assets/images/GettingStarted/iServer_iClient_Start/Realspace_Start/img/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   
      <!--pan-->
<img id="pan" alt="pan" title="pan" src="../../../assets/images/GettingStarted/iServer_iClient_Start/Realspace_Start/img/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='../../../assets/images/GettingStarted/iServer_iClient_Start/Realspace_Start/img/pan_over.png'" 
     onMouseOut="this.style.width='32px';this.style.height='32px';this.src='../../../assets/images/GettingStarted/iServer_iClient_Start/Realspace_Start/img/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   
      <!--select-->
<img id="select" alt="select" title="select" src="../../../assets/images/GettingStarted/iServer_iClient_Start/Realspace_Start/img/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='../../../assets/images/GettingStarted/iServer_iClient_Start/Realspace_Start/img/select_over.png'" 
     onmouseout="this.style.width='32px';this.style.height='32px';this.src='../../../assets/images/GettingStarted/iServer_iClient_Start/Realspace_Start/img/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   
      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:
    • Select Model

      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   
      <!--distance measurement-->
<img id="refresh" alt="measurement" title="measurement" src="../../../assets/images/GettingStarted/iServer_iClient_Start/Realspace_Start/img/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='../../../assets/images/GettingStarted/iServer_iClient_Start/Realspace_Start/img/measure_distance_over.png'" 
           onmouseout="this.style.width='32px';this.style.height='32px';this.src='../../../assets/images/GettingStarted/iServer_iClient_Start/Realspace_Start/img/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   
      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");
}