船艦點位展示Widget

本章將說明船艦點位展示Widget的使用方式。

[info] 小提示：

SandBox連結：https://codesandbox.io/s/widget-ship-sample-l7v39h?file=/Script/main.js

[info] 小提示：

構成本Widget使用之Function：
ov.TerrainView.addCustomLayer
ov.TerrainView.removeAllEntity
ov.CustomLayer.addGLTFEntity
ov.CustomLayer.addPushpinEntity

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

index.html：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>BaseMapWidget</title>
        <script src="PGWeb3D.min.js"></script>
    </head>
    <body>
        <div id="MyMap" style="width:100%;height:100%;position:absolute;top:0;left:0"></div>
        <script src="main.js"></script>
    </body>
</html>

將Widget初始化加進我們撰寫好的main.js中。

main.js：

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

//在使用其他圖層前必須要先讀入地形 其他圖層的新增都會在callback中
var param = {
  url: "http://127.0.0.1:8080",
  identifier: "範例地形圖",
  callback: openCallback,
  urlTemplate: "https://sample.pilotgaea.com.tw/Oview.aspx?{URL}"
};
terrainview.openTerrain(param);

function openCallback(result) {
  terrainview.setBaseLayer({
    url: "BING_MAP",
    identifier: "IMAGE"
  });

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

  LyrAPI1 = terrainview.addCustomLayer({
    layername: "LyrAPI1"
  });
  //預設開啟船艦點位展示Widget
  ShipPtWidget();
}

function ShipPtWidget() {
  var ShipList = [
    {
      Name: "帆船",
      ModelAngle: 225,
      src: "ShipModel/boat_48.glb",
      COG: 20,
      Scale: 1,
      zScale: 0.8,
      Pos: new window.Geo3DPoint(119.5721, 23.56496, 0)
    },
    {
      Name: "漁船",
      ModelAngle: 180,
      src: "ShipModel/fishing_boat.glb",
      COG: 134,
      Scale: 0.025,
      zScale: 1,
      Pos: new window.Geo3DPoint(119.57352, 23.56559, 0)
    },
    {
      Name: "客輪",
      ModelAngle: 70,
      src: "ShipModel/ferry_concept.glb",
      COG: 51,
      Scale: 0.025,
      zScale: 1,
      Pos: new window.Geo3DPoint(119.57178, 23.56389, 0)
    }
  ];

  for (i = 0; i < ShipList.length; i++) {
    var Name = ShipList[i].Name;
    var ModelSrc = ShipList[i].src;
    var Pos = ShipList[i].Pos;
    var Scale = ShipList[i].Scale;
    var COG = ShipList[i].COG;
    var ModelAngle = ShipList[i].ModelAngle;
    var zScale = ShipList[i].zScale;
    LyrAPI1.addGLTFEntity({
      src: ModelSrc,
      position: Pos,
      scale: Scale,
      zScale: zScale,
      rotate: { x: 0, y: 1, z: 0, w: ModelAngle + COG }
    });

    LyrAPI1.addPushpinEntity({
      geo: Pos,
      size: 20,
      absHeight: false,
      pullUpY: 16,
      pullUpYIsWorldSize: true,
      text: Name
    });
  }

  //馬公漁港
  const pos = new window.Geo3DPoint(119.571, 23.55965, 150);
  const up = new Geo3DPoint({
    x: 0.12351633533189085,
    y: 0.3953696908560778,
    z: 0.9473652142184981
  });
  const v = new Geo3DPoint({
    x: 0.3654944598674774,
    y: 0.8740219473838806,
    z: -0.32015544176101685
  });
  const camera = new window.ov.Camera(pos, v, up);
  terrainview.gotoCamera(camera, false);
}

到目前為止，我們已成功將船艦點位展示Widget加入圖台中。

船艦點位展示Widget使用教學

初始化Widget