2. 程式人生 > >supermap三維場景基本操作程式碼

supermap三維場景基本操作程式碼

阿新 • • 發佈：2019-02-12

四、三維場景基本操作

概述

在三維場景中可以很方便地對二維\三維點、二維\三維線、面、文字、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 + "米");
}

相關推薦

supermap三維場景基本操作程式碼

四、三維場景基本操作 全部摺疊 全部展開 概述 在三維場景中可以很方便地對二維\三維點、二維\三維線、面、文字、DEM、Grid、TIN、影像等資料進行三維實時瀏覽，並且可以進行飛行、距離量算等功能。在SuperMap iClient3D 8C for Plugin中提供

VTK修煉之道7_三維場景基本要素:光照

1.VTK中的光照長得什麼樣？ 劇場裡有各式各樣的燈光，三維渲染場景中也一樣，可以有多個光照存在。光照和相機是三維渲染場景必備的因素，如果沒有指定，vtkRenderer會自動地建立預設的光照和相機。VTK裡用類vtkLight來表示渲染場景中的光照。與現實中的燈光類似

VTK修煉之道8_三維場景基本要素:相機

1.VTK中相機原理及控制屬性 觀眾的眼睛就好比三維渲染場景中的相機，VTK則是用vtkCamera類來表示三維渲染場景中的相機。vtkCamera負責把三維場景投影到二維平面，如螢幕、影象等。下

golang 三維向量相關操作

port package bsp panic pan multi val new fun package vector import ( "math" "fmt" )// 三維向量：(x,y,z) type Vector3 struct { X

二維幾何基本操作

相等 etc end n) pre 極角排序 nec 計算 投影 劉汝佳白皮書模板 #include<bits/stdc++.h> using namespace std; const double PI=acos(-1); const int INF=1&l

圖片播放器(二)：framebuffer基本操作程式碼

display###############     fb.c                             &

Pointnet&Pointnet++點雲上的深度學習及其在三維場景理解中的應用

  轉化為柵格資料，使用CNN提取特徵 使用點雲的原生資料對特徵進行端到端的提取     螢幕剪輯的捕獲時間: 2018/11/17 21:36   設計的演算法和網路對點雲需要滿

3vftp(三維主機)通用破解程式碼

這個網站倒是很好，100m空間，可是唯獨就是有廣告，這個辦法也是我偶然發現的 將下面這句html複製進你的網頁最底部 在</div></body></html>之後緊接著放置下面這句html原始碼， <!-- BY:Moreal 3vdo廣告通殺

基於傾斜影像的城市三維場景重建

一致性 匹配 性問題 重建 稀疏 紋理映射 針對 實時 時間 （１）在三維表面模型構建方面，首先根據低空傾斜影像的特點，將提取基於像方的仿射不變特征角點加入到ＰＭＶＳ的初始稀疏種子點集，改善密集匹配的約束與引導過程；接著，通過實時優化調整原始ＰＭＶＳ算法密集匹配中的面片法向

三維場景中路徑動畫處理動畫物體如何旋轉的理論

1、考慮兩向量是否平行或者其中一個向量為零向量，那麼叉乘的結果如何？ 解析：如果兩向量a、b平行或者任意一個為零向量，那麼a ^ b = 0;（^為叉乘符號）。叉乘對零向量的解釋為：零向量平行於任意其

三維裝箱問題Java程式碼的簡單實現過程（程式碼）

　　兩年前發了篇關於三維裝箱的日記，許諾過要分享程式碼的，結果一直沒發，後來居然忘記了。一直有人加我QQ來的，這幾年都用微信了，直到最近才發現這個問題， 　　千萬不要輕易許諾別人什麼，否則事後真的很難兌現，兩年前的欠下的程式碼，今天，還了罷。為了我寫了好久的，腦力不夠了，空

【演算法與資料結構專場】BitMap演算法基本操作程式碼實現

上篇我們講了BitMap是如何對資料進行儲存的，沒看過的可以看一下【演算法與資料結構專場】BitMap演算法介紹 這篇我們來講一下BitMap這個資料結構的程式碼實現。 回顧下資料的儲存原理 一個二進位制位對應一個非負數n，如果n存在，則對應的二進位制位的值為1，否則為0。這個時候，我們的第一個問題：我們在

MongoDB基礎教程系列--第三篇 MongoDB基本操作（二）

1、集合操作 1.1、建立集合 MongoDB 用 db.createCollection(name, options) 方法建立集合。 格式 1 db.createCollection(name, options) 其中

基於three.js/WebGL的免費開源三維場景編輯器ShadowEditor

基於three.js的線上3D場景編輯器，使用mongodb儲存3D模型和場景資料。   原始碼1：https://github.com/tengge1/ShadowEditor 原始碼2：https://gitee.com/tengge1/ShadowEditor 線上演示：https:/

關於shell及運維的基本操作

運維工作： ======================================================== CDN：內容分發系統。快取，每個城市，放置一份程式碼。 負載均衡： 1、不同的請求，nginx代理，請求不同的伺服器。 2、

【技術貼】ArcGIS Runtime for Xamarin 使用SPK構建逼真的三維場景

ArcGIS Runtime for Xamarin 使用SPK構建逼真的三維場景 SPK是一個重要的三維格式，SPK基於開源標準I3S，ArcGIS Runtime 很好的支援了SPK，這樣可以讓桌面端，移動端都能體驗到逼真炫酷，流暢的三維場景。 ArcGIS

三維場景的渲染優化

一  如何進行有效的效能評測 　  對於任何一個3D應用程式來說，追求場景畫面真實感是一個無止盡的目標，其結果就是讓我們的場景越來越複雜，模型更加精細，這必然給圖形硬體帶來極大的負荷以致於無法達到實時繪製幀率。因此，渲染優化是必不可少的。在渲染優化之前，我們需要對應用程式

一維碼（條形碼）&二維碼&三維碼基本原理

一維碼（條形碼） 一維條碼即指條碼條和空的排列規則，常用的一維碼的碼制包括：EAN碼、39碼、交叉25碼、UPC碼、128碼、93碼，ISBN碼，及Codabar（庫德巴碼）等。 條碼是由一組規則排列的條、空以及對應的字元組成的標記，“條”指對光線反射率較低的部分，“空”指對光線反射

c語言單鏈表的基本操作(程式碼)

c語言實現單鏈表的基本操作：建立、列印、刪除、插入、逆序。僅供學習之用還需不斷完善,有待讀者自己研究 #include <stdio.h> #include <stdlib.h> typedef struct stu { int data; /

ArcGIS Runtime SDK for .NET (WPF)實現三維場景

實現三維場景準備工作三維地圖被稱為場景。為在ArcGIS中實現三維場景展示，首先需安裝Esri公司ArcGIS_Runtime_SDK_DotNet_100_2_1地圖SDK。並在專案中引用Esri.ArcGISRuntime.dll。建立三維場景您可以使用XAML在設計時定