supermap三维场景基本操作代码

其他 2018-06-21 16:14:37 阅读次数: 4

四、三维场景基本操作

概述

在三维场景中可以很方便地对二维\三维点、二维\三维线、面、文本、DEM、Grid、TIN、影像等数据进行三维实时浏览，并且可以进行飞行、距离量算等功能。在SuperMap iClient3D 8C for Plugin中提供了Pan、Select、MeasureArea、MeasureDistance、MeasureHeight、NullAction、PanSelec类来实现对三维的实时浏览操作及量算功能，它们都继承自SceneAction ，并且提供了FlyingOperator来进行飞行操作。

下面以全幅显示、漫游、飞行、选择模型、距离量算为例予以说明。

FlyingOperator 飞行状态类结构图

FlyingOperator 飞行状态类结构图

FlyingOperator 常用方法

  接口 说明
公共方法 flyTo 在指定的时间内，以指定的方式从当前场景飞行至指定的相机位置。
公共方法 flyToBounds 在指定的时间内，从当前场景飞行至指定的 Bounds 区域。
公共方法 flyToGeometry 在指定的时间内，以指定的方式从当前场景飞行至指定的几何对象。
公共方法 play 按照指定路线飞行。
公共方法 moveTo 将三维图层集合中指定索引号的三维图层移动到指定索引号位置。
公共方法 moveToBottom 将三维图层集合中指定索引号的三维图层移动到底层。
公共方法 moveToTop 将三维图层集合中指定索引号的三维图层移动到顶层。
公共方法 moveUp 将三维图层集合中指定索引号的三维图层向上移动一层。
公共方法 removeAll 删除图层集合中的所有图层。
公共方法 removeAt 删除指定图层名称或索引号的图层。

SceneAction 结构图

SceneAction是其他三维浏览操作类Pan、Select、MeasureArea、MeasureDistance、MeasureHeight、NullAction、PanSelect的父类。用户可以对SceneAction进行扩展，实现一系列的操作。

SceneAction 结构图

ScencAction 常用属性

  接口 说明
公共属性 name 获取或设置交互操作的名称。当用户自行开发一个SceneAction子类时，可自定义该操作的名称。
公共属性 sceneControl 获取或。
公共属性 sceneName 获取所属场景服务的名称。
公共属性 sceneAddress 获取图层集合的服务地址。

SceneAction 常用方法

  接口 说明
公共方法 flyTo 在指定的时间内，以指定的方式从当前场景飞行至指定的相机位置。
公共方法 flyToBounds 在指定的时间内，从当前场景飞行至指定的 Bounds 区域。
公共方法 flyToGeometry 在指定的时间内，以指定的方式从当前场景飞行至指定的几何对象。
公共方法 play 按照指定路线飞行。
公共方法 moveTo 将三维图层集合中指定索引号的三维图层移动到指定索引号位置。
公共方法 moveToBottom 将三维图层集合中指定索引号的三维图层移动到底层。
公共方法 moveToTop 将三维图层集合中指定索引号的三维图层移动到顶层。
公共方法 moveUp 将三维图层集合中指定索引号的三维图层向上移动一层。
公共方法 removeAll 删除图层集合中的所有图层。
公共方法 removeAt 删除指定图层名称或索引号的图层。

三维场景基本操作

  • 飞行
    • 在 “default.html” 页面的 <body onload="onPageLoad()"> </body>中，场景控件后加入以下代码，在页面中添加飞行控件：
    • JavaScript 拷贝代码 
      <!--工具条-->
<div id="toolSet" style="position: relative; top:0px; height: 5%; width: 100%; visibility: 
      visible; display: block;">
<!--通过设定经纬度和相机高度进行飞行-->
<label style="position:relative; left: 10px;">经度：</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;">纬度：</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;">高度：</label>

<input id="altitude" name="altitude" type="text" value="500000" style="position:relative; left:30px; 

             width:60px; z-index:11; "/>
<img id="fly" alt="飞行" title="飞行" 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>
    • 在 “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); 
        //或者scene.set_camera(camera)
}

  • scene.get_flyingOperator().flyTo(camera) 方法即以一定速度和方式飞行到指定地点。该方法有三个参数：第一个是相机对象，第二个和第三个参数为可选参数，分别为飞行速度和飞行方式枚举常量。而 scene.get_camera(camera) 会将场景直接切换到相机指定位置。

  • 全幅显示
    • 在 “default.html” 页面中 id="toolSet" 的 <div></div>表示工具条的标签中加入以下代码，在页面添加全幅显示控件：
    • JavaScript 拷贝代码 
      <!--全幅显示-->
<img id="viewentire"alt="全幅显示" title="全幅显示" 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'" />
    • 在 “GettingStarted.js” 中填入以下代码，实现全幅显示功能：
    • JavaScript 拷贝代码 
      function viewEntire()
{
        scene.viewEntire();
}
  • 漫游
    • 在 “default.html” 页面中 id="toolSet" 的 <div></div> 表示工具条的标签中加入以下代码，在页面中添加漫游控件：
    • JavaScript 拷贝代码 
      <!--漫游-->
<img id="pan" alt="漫游" title="漫游" 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'" />
    • 在 “GettingStarted.js” 中填入以下代码：
    • JavaScript 拷贝代码 
      function setPan()
{
        var panAction = new SuperMap.Web.UI.Action3Ds.Pan(sceneControl);
        sceneControl.set_sceneAction(panAction);
}
  • 选择模型（模型和矢量数据可以被选中并高亮显示，还能获取被选中地物的 ID 号）
    • 在 “default.html” 页面中 id="toolSet" 的 <div></div> 表示工具条的标签中加入以下代码，在页面中添加选择控件：
    • JavaScript 拷贝代码 
      <!--选择-->
<img id="select" alt="选择" title="选择" 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'" />
    • 在 “GettingStarted.js” 中填入以下代码，实现选择操作。由于要在场景中选择对象后弹出选中对象的 ID 号，因此首先在场景控件中添加 addEvent 方法，该方法中第一个参数 “objectSelected” 表示侦听选中地物完成状态，第二个参数为用户自定义函数。也就是说一旦场景控件发生选择操作后触发 selectMode 自定义函数。addEvent 还可以侦听距离量算、面积量算中或者结束后的操作，第一个参数可选值请参见该方法的接口文档：
    • JavaScript 拷贝代码 
      function setSelect()
{
        var selectAction = new SuperMap.Web.UI.Action3Ds.Select(sceneControl);
        sceneControl.set_sceneAction(selectAction); 
        sceneControl.addEvent("objectSelected", selectModel)
}
    • 然后在 “GettingStarted.js” 中加入selectMode 自定义函数，实现 弹出选中对象的 ID 号（选择操作会返回一个 Selection3Ds 对象，关于侦听事件传回的参数请参见场景控件的 addEvent 方法）：
    • 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("该地物的ID为： "+selection3D.get_item(j)+"\n"+selectObjectName);
                }
        }
}
    • 运行后的效果：
    • 选择模型

      图1 选中模型后提示模型 ID 号

  • 距离量算
    • 在 “default.html” 页面中 id="toolSet" 的 <div></div> 表示工具条的标签中加入以下代码，在页面中添加量算控件：
    • JavaScript 拷贝代码 
      <!--距离量算-->
<img id="refresh" alt="量算" title="量算" 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'" />
    • 在 “GettingStarted.js” 中填入以下代码，实现选择距离量算操作。与选择操作类似，也需要在场景控件中添加 addEvent 方法侦听距离量算结束状态，由"measureDistanceFinished" 表示。当量算操作结束后触发 disFinished 自定义函数：
    • JavaScript 拷贝代码 
      function measureDistance()
{
        var measureDAction = new SuperMap.Web.UI.Action3Ds.MeasureDistance(sceneControl);
        sceneControl.set_sceneAction(measureDAction);
        sceneControl.addEvent("measureDistanceFinished", disFinished);
}
    • 然后在 “GettingStarted.js” 中加入disFinished 自定义函数，实现 距离量算结束后弹出总距离（量算操作会返回一个 dTotalDis 总距离参数，关于侦听事件传回的参数请参见场景控件的 addEvent 方法）：
    • JavaScript 拷贝代码 
      function disFinished(dTotalDis)
{
        alert("总距离：" + dTotalDis + "米");
}

猜你喜欢

转载自blog.csdn.net/u010763324/article/details/54405837
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022