2-25 地景特效編繪Widget

[info] 小提示：

程式碼連結：https://doc-3dgdp.colife.org.tw/samplecode/#src/testweb/widget-scenebuilder-sample/

注意事項

編輯工具
- 模型預覽
  - 開啟模型預覽功能可查看模型外觀、模型檔案大小及模型的三角面數。（面數多的模型會佔用較多的系統資源）
  - 開啟模型預覽功能後可使用滑鼠滾輪來縮放模型大小，並使用滑鼠左鍵拖曳來旋轉模型。
- 模型引用
  - 模型URL需為可公開存取之網域。
  - 模型名稱不能重複;若沒設置，預設是檔案名稱。
  - 引用成功後可在模型物件下拉式選單中選取。
- 設置單一模型
  - 模型設置完成後可點擊模型呼叫屬性視窗查看及編修模型屬性，修改後點擊"套用"按鈕即可查看修改結果。
  - 開啟連續設置功能後，可連續設置多個模型，設置完成後點擊"停止連續設置"按鈕來停止連續設置模式。
- 區域設置
  - 點擊"區域設置"按鈕後，可設置模型的顯示區域，單擊滑鼠左鍵來設置區域，雙擊滑鼠左鍵來完成區域設置。
  - 完成區域設置後會根據模型間距在區域內自動排列模型。
  - 開啟進階設定功能可顯示及調整在進行區域設置時的模型隨機參數，讓生成效果更自然。
    - 開啟隨機功能後，進行區域設置時會根據已開啟的隨機參數來生成模型。
    - 開啟位移功能後，進行區域設置時會根據設定的位移參數來調整模型座標。
      - 最小 X 軸位移：模型在 X 軸上的最小位移倍率。
      - 最大 X 軸位移：模型在 X 軸上的最大位移倍率。
      - 最小 Y 軸位移：模型在 Y 軸上的最小位移倍率。
      - 最大 Y 軸位移：模型在 Y 軸上的最大位移倍率。
      - 實際位移幅度為最小位移倍率與最大位移倍率之間的隨機值並乘上模型間距。
      - 例如：最小 X 軸位移為 -0.5，最大 X 軸位移為 0.5，模型間距為 10，則模型在 X 軸上的位移範圍為 -5 至 5，即模型會基於預設的座標隨機往西或往東移動最多 5 公尺。
      - 同理，Y 軸位移也是如此，Y 為正值則往北移動，Y 為負值則往南移動。
    - 開啟旋轉功能後，進行進行區域設置時會根據設定的旋轉參數來旋轉模型角度。
      - 最小旋轉角度：模型的最小旋轉角度。
      - 最大旋轉角度：模型的最大旋轉角度。
      - 旋轉角度為最小旋轉角度與最大旋轉角度之間的隨機值。
      - 旋轉方向為順時針旋轉。
    - 開啟尺寸功能後，進行區域設置時會根據設定的尺寸參數來縮放模型大小。
      - 最小縮放倍率：模型的最小縮放倍率。
      - 最大縮放倍率：模型的最大縮放倍率。
      - 縮放倍率為最小縮放倍率與最大縮放倍率之間的隨機值。
      - 縮放方向為模型的中心點，若模型檔案本身的中心點不在模型的底部，則縮放後模型可能會有部份陷入地面。
  - 區域設置模式產生的模型無法個別設置屬性，如需個別設置屬性，請使用單一模型設置功能。
  - 若區域設置的結果僅有一個模型，則該模型會自動設置為單一模型，仍可使用屬性視窗來編修模型屬性。
清單
- 編輯場景
  - 在編輯工具中設置的模型會在編輯場景清單中顯示。
    - 可點擊"眼睛"圖示來開啟或關閉模型的顯示。
    - 可點擊"標記"圖示移動到模型所在的位置。
    - 可點擊"叉叉"圖示來刪除模型。
  - 點擊"匯出"按鈕後可將編輯場景清單中的所有模型匯出成一個JSON檔案。
- 匯入場景
  - 點擊"匯入"按鈕可匯入使用此Widget編輯並匯出的JSON檔，將編輯好的場景匯入至圖臺中。
  - 匯入的場景會顯示在匯入場景清單中。
    - 匯入的場景會將不同的模型分類為子場景，可像在編輯場景清單中那樣切換顯示、移動到模型所在的位置及刪除模型。
    - 場景列可以一次可以同時操作所有子場景。
  - 匯入的場景無法進行編修。

Widget初始化須依賴核心生成的div，所以需要寫在地形開啟後的CallBack中。

這裡先撰寫一個最基本的圖台。

index.html：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <!--引入js-->
    <!-- <script src="../../PGWebJS/13.0/PGWeb3D.min.js"></script> -->
    <script src="./PGWeb3D.min.js"></script>
    <script src="../../../js/config.js"></script>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link
      rel="stylesheet"
      type="text/css"
      href="../../PGWebJS/13.0/css/PGWeb3D.css"
    />
    <script src="https://widgets.colife.org.tw/widget/3dgdp.scene-builder-widget.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://widgets.colife.org.tw/widget/3dgdp.scene-builder-widget.css" />


</head>

<body>
    <div id="MyMap" style="width:100%;height:100%;position:absolute;top:0;left:0"></div>

    <script src="./js/main.js"></script>
</body>

</html>

main.js：

var terrainview = new ov.TerrainView("MyMap");


// 開源底圖資源集合
const baseLayerResource = {
  bing_i: { url: "BING_MAP", identifier: "IMAGE" },
  bing_v: { url: "BING_MAP", identifier: "VECTOR" },
  bing_vi: { url: "BING_MAP", identifier: "VECTOR_IMAGE" },
  nlsc_e: { url: `https://wmts.nlsc.gov.tw/wmts`, identifier: "EMAP" },
  nlsc_eg: { url: `https://wmts.nlsc.gov.tw/wmts`, identifier: "EMAP01" },
  nlsc_p: { url: `https://wmts.nlsc.gov.tw/wmts`, identifier: "PHOTO2" },
  osm: { url: "OSM", identifier: "" },
};

//在使用其他圖層前必須要先讀入地形 其他圖層的新增都會在callback中
terrainview.openTerrain(
  {
    url: MAPSERVER.URL,
    identifier: "範例地形圖",
    callback: openCallback,
  }
);

function openCallback(result) {
  //設定底圖
  terrainview.setBaseLayer(baseLayerResource.bing_i);

  //設定初始位置
  let initialPos = new GeoPoint(120.785841, 23.404883, 515000.0013822634);
  let initialV = new Geo3DPoint(0, 0, -1);
  let initialUp = new Geo3DPoint(0, 1, 0);
  let initialCamera = new ov.Camera(initialPos, initialV, initialUp);
  terrainview.gotoCamera(initialCamera, false);

  var SceneBuilder = new window.ov.Widget.SceneBuilderWidget({
    view: terrainview
  });
}

到目前為止，我們已成功將地景特效編繪Widget加入圖台中。

地景特效編繪Widget使用教學

注意事項

初始化Widget