外掛模組

外掛模組為需要特別引入額外JS的特殊模組，目前包含環境特效、粒子特效與軍事三大模組。

環境特效模組

此模組涵括如閃電、雲等高效能的環境特效，可提供開發者增加圖台的豐富性。

須先使用html裡的<script>標籤引入PGWeb3D.min.js這個JS模組，此JS放置於安裝目錄下的JS資料夾內 (C:\Program Files\PilotGaea\TileMap\js)。

閃電

LightningModule = terrainview.getModule("lightning"); // 引入閃電特效模組

LightningModule.addLightningEntity({
  position: new Geo3DPoint(120.22900665201502, 22.845749565179712, 5000.0),
  endHeight: 0.0,
  color: new ov.Color(176, 255, 255),
  minWidth: 10,
  maxWidth: 10,
  splitRate: 0.7,
  completeShowTime: 0.2,
  completeVanishTime: 0.5
});
// 新增閃電實體
// ov.LightningModule.addLightningEntity(param)
// @param {Object} param 參數
// @param {Geo3DPoint} param.position 起始坐標
// @param {Number} param.endHeight 結束高度 (預設0)
// @param {ov.Color} param.color 顏色 (預設#B0FFFF)
// @param {Number} param.minWidth 最細寬度 (預設10)
// @param {Number} param.maxWidth 最粗寬度 (預設10)
// @param {Number} param.branchMinWidth 閃電分支最細寬度 (預設1)
// @param {Number} param.branchMaxWidth 閃電分支最粗寬度 (預設1)
// @param {Number} param.completeShowTime 完全出現時間 (單位為sec，預設0.2)
// @param {Number} param.completeVanishTime 完全消失時間 (單位為sec，預設0.3)
// @param {Number} param.intervalTime 播放間隔時間 (單位為sec，預設0.5)
// @param {Number} param.splitRate 主閃電分裂機率 (預設0.3，介於0.0~1.0)
// @param {Number} param.branchSplitRate 閃電分支分裂機率 (預設0.3，介於0.0~1.0)
// @param {Number} param.branchMinGrawTimes 閃電分支最少成長次數 (預設4)
// @param {Number} param.branchMaxGrawTimes 閃電分支最大成長次數 (預設8)

LightningModule.setAllEntityTime((time - LightningStartTime) / 1000.0);
// 設定所有閃電實體經過時間
// @param {Number} time 時間

LightningModule.removeAllLightningEntity();
// 移除所有閃電實體

[info] 動手試試看：
程式碼連結：我是連結

雲(雲之結界-自選範圍)

CloudModule = terrainview.getModule("cloud"); // 引入雲特效模組

let Entity = CloudModule.addCloudEntity(param)({
  geo: result.geo,
  surfaceHeight: parseFloat(CloudSurfaceHeight.value),
  height: parseFloat(CloudHeight.value),
  color: new ov.Color(CloudColor.value),
  densityCutoff: parseFloat(CloudDensityCutoff.value),
  wind: new GeoPoint(1.0, 1.0)
});

// ov.CloudModule.addCloudEntity(param)
// @param {Object} param 參數
// @param {GeoPolygon} param.geo 範圍
// @param {Number} param.surfaceHeight 離地高
// @param {Number} param.Height 雲層高 (預設20)
// @param {GeoPoint} param.wind 風速
// @param {ov.color} param.color 顏色 (預設#FFFFFF)
// @param {Number} param.densityCutoff 剔除密度 (預設0.5)

CloudModule.removeAllCloudEntity();
// 移除所有雲實體

[info] 動手試試看：
程式碼連結：我是連結

雲(領域展開-全域覆蓋)

CloudProperty = terrainview.cloudProperty; // 引入全域雲模組

// UI設定
terrainview.enableCloud = CloudSwitch.checked;
CloudHeightValue.innerHTML = CloudHeight.value;
CloudThicknessValue.innerHTML = CloudThickness.value;
CloudDensityCutoffValue.innerHTML = CloudDensityCutoff.value;
CloudVisibleDistanceValue.innerHTML = CloudVisibleDistance.value;
CloudSamplingValue.innerHTML = CloudSampling.value;
CloudSwitch.disabled = false;
CloudHeight.disabled = false;
CloudThickness.disabled = false;
CloudDensityCutoff.disabled = false;
CloudVisibleDistance.disabled = false;
CloudSampling.disabled = false;
// 新增全域雲的特性
// @densityCutoff {Number} 剔除密度。密度愈低，雲看起來愈密集 (預設0.45，介於0 ~ 1.0)
// @height {Number} 雲層高度 (單位為公尺，預設1000，介於500 ~ 3000)
// @sampling {Number} 採樣值。其值愈大，雲看起來愈密集 (預設1.0，介於0.1 ~ 5.0)
// @thickness {Number} 雲層厚度 (預設250，介於50 ~ 1000)
// @visibleDistance {Number} 可視距離 (預設50000，介於1000 ~ 50000)
// @wind {GeoPoint} 風速 (預設 (GeoPonit(-1.0, 0.0) ))

// 綁定UI事件
CloudSwitch.addEventListener("change", function () {
    terrainview.enableCloud = this.checked;
    terrainview.updateScreen();
});

CloudHeight.addEventListener("input", function () {
    CloudProperty.height = parseFloat(this.value);
    terrainview.cloudProperty = CloudProperty;
    CloudHeightValue.innerHTML = this.value;
});

CloudThickness.addEventListener("input", function () {
    CloudProperty.thickness = parseFloat(this.value);
    terrainview.cloudProperty = CloudProperty;
    CloudThicknessValue.innerHTML = this.value;
});

CloudDensityCutoff.addEventListener("input", function () {
    CloudProperty.densityCutoff = parseFloat(this.value);
    terrainview.cloudProperty = CloudProperty;
    CloudDensityCutoffValue.innerHTML = this.value;
});

CloudVisibleDistance.addEventListener("input", function () {
    CloudProperty.visibleDistance = parseFloat(this.value);
    terrainview.cloudProperty = CloudProperty;
    CloudVisibleDistanceValue.innerHTML = this.value;
});

CloudSampling.addEventListener("input", function () {
    CloudProperty.sampling = parseFloat(this.value);
    terrainview.cloudProperty = CloudProperty;
    CloudSamplingValue.innerHTML = this.value;
})

[info] 動手試試看：
程式碼連結：我是連結

粒子特效模組

此模組涵括如爆炸、下雨、煙霧等高效能的粒子特效，可提供開發者增加圖台的豐富性。

須先使用html裡的<script>標籤引入PGWeb3DParticle.min.js這個JS模組，此JS放置於安裝目錄下的JS資料夾內 (C:\Program Files\PilotGaea\TileMap\js)。

煙霧

particleModule = terrainview.getModule("particle"); // 引入粒子特效模組

var position = new window.Geo3DPoint(120.34759, 22.5958, 10.0);
var rate = 150;
var size = 5;
var life = 5;
var minSpeed = 1;
var maxSpeed = 5;
var gravity = 0;
var weightR = 1.0;
var weightG = 1.0;
var weightB = 1.0;

let param = {
  position: position,
  rate: rate,
  size: size,
  life: life,
  minSpeed: minSpeed,
  maxSpeed: maxSpeed,
  gravity: gravity,
  rgbWeight: [weightR, weightG, weightB]
};

// 新增煙霧實體
// ov.ParticleSystemModule.addSmokeEntity(param)
// @param {Object} param 參數
// @param {Geo3DPoint} param.position 坐標
// @param {Number} param.rate 煙霧生成頻率(Hz)
// @param {Number} param.size 煙霧大小
// @param {Number} param.life 煙霧壽命(sec)
// @param {Number} param.minSpeed 煙霧上飄最慢速度(m/s)
// @param {Number} param.maxSpeed 煙霧上飄最快速度(m/s)
// @param {Number} param.gravity 重力(m/s^2)
SmokeEntity = particleModule.addSmokeEntity(param);

[info] 動手試試看：
程式碼連結：我是連結

下雨特效

particleModule = terrainview.getModule("particle"); // 引入粒子特效模組

rainEntity = particleModule.addRainEntity({         
windSpeed: new window.GeoPoint(0, 0),
// 風速(m/s)。
level: window.ENUM_RAIN.LOW                       
 // 雨勢
 // ENUM_RAIN.LOW      // 小
 // ENUM_RAIN.MEDIUM   // 中
 // ENUM_RAIN.HIGH     // 大
});

[info] 動手試試看：
程式碼連結：我是連結

爆炸效果

particleModule = terrainview.getModule("particle");

var size = 10;
var generatePeriod = 1;
var rotatePerSecond = 0;
var weightR = 1.0;
var weightG = 1.0;
var weightB = 1.0;

let param = {
  position: new window.Geo3DPoint(120.34759, 22.5967, 20),
  size: size,
  generatePeriod: generatePeriod,
  rotatePerSecond: rotatePerSecond,
  rgbWeight: [weightR, weightG, weightB]
};
// 新增爆炸實體
// ov.ParticleSystemModule.addExplosionEntity(param)
// @param {Object} param 參數
// @param {Geo3DPoint} param.position 坐標
// @param {ENUM_EXPLOSION} param.type 爆炸種類
// @param {Number} param.size 爆炸大小
// @param {Number} param.generatePeriod 爆炸週期(sec)
// @param {Number} param.rotatePerSecond 每秒旋轉角度
explosionEntity = particleModule.addExplosionEntity(param);

[info] 動手試試看：
程式碼連結：我是連結

軍事模組

此模組提供如雷達、衛星、場強分析等軍事相關模組，可提供開發者增加軍事方面的情境應用。

須先使用html裡的<script>標籤引入PGWeb3DMilitary.min.js這個JS模組，此JS模組放置於安裝目錄下的JS資料夾內 (C:\Program Files\PilotGaea\TileMap\js)。

2525B

var militaryModule = terrainview.getModule("military");
var geo = new window.GeoPoint(119,21,8000);
// 新增2525B實體
// ov.MilitaryModule.add2525BEntity(param)
// @param {Object} param 參數
// @param {GeoPoint} param.geo 坐標
// @param {Size} param.Number 標籤大小
// @param {String} param.code 2525B Code
var entity = militaryModule.add2525BEntity({
  code: "SFAPMFF---*****",
  geo: geo,
  size: 32
});

[info] 動手試試看：
程式碼連結：我是連結

雷達

var militaryModule = terrainview.getModule("military");
// 自訂2D雷達
// ov.MilitaryModule.addRadar2DEntity(param)
// @param.geo {GeoPoint} 中心點位置
// @param.radius {Number} 範圍
// @param.gridsize {Number} 網格大小
// @param.color {String} 可視範圍顏色 (預設 GLCOLOR(0,0,1))
// @param.opacity {Number} 可視範圍透明度 (預設1.0，介於0~1.0)
// @param.uncolor {String} 不可視範圍顏色 (預設 GLCOLOR(1,0,0))
// @param.unopacity {Number} 不可視範圍透明度 (預設1.0，介於0~1.0)
// @param.planecenter {Number} 方位角 (預設0°，面對正北方)
// @param.extendangle {Number} 水平展開角 (預設360°)
// @param.epsg {Number} 所輸入中心點的Epsg，若為null視為與地形相同
militaryModule.addRadar2DEntity({
  analysis: {
    geo: new window.GeoPoint(121.5, 24.5, 2000),
    gridSize: 500,
    radius: 10000,
    planeCenter: 135,
    extendAngle: 180
  }
});
// 自訂3D雷達
// ov.MilitaryModule.addRadar3DEntity(param)
// @param.geo {GeoPoint} 中心點位置
// @param.radius {Number} 範圍
// @param.gridsize {Number} 網格大小
// @param.drawColor {String} 框線顏色 (預設 GLCOLOR(0,1,1))
// @param.drawOpacity {Number} 框線透明度 (預設1.0，介於0~1.0)
// @param.fillColor {String} 面顏色 (預設 GLCOLOR(0,1,1))
// @param.fillOpacity {Number} 面透明度 (預設0.2，介於0~1.0)
// @param.planecenter {Number} 方位角 (預設0°，面對正北方)
// @param.extendangle {Number} 水平展開角 (預設0°，介於0°~90°)
// @param.startarg {Number} 垂直起始角 (預設-90°)
// @param.endarg {Number} 垂直終點角 (預設90°)
// @param.epsg {Number} 所輸入中心點的Epsg，若為null視為與地形相同
militaryModule.addRadar3DEntity({
  analysis: {
    geo: new window.GeoPoint(121, 24, 2000),
    gridsize: 500,
    radius: 10000
  }
});
// 自訂雷達動畫
// ov.MilitaryModule.addRadarAnimeEntity(param)
// @param.geo {GeoPoint} 中心點位置
// @param.radius {Number} 範圍
// @param.spheredetail {Number} 網格細節，X為水平方向，Y為垂直方向 (預設30)
// @param.color {String} 雷達外圈顏色 (預設GLCOLOR(0,0,1))
// @param.scancolor {String} 掃描顏色 (預設GLCOLOR(1,0.65,0))
// @param.opacity {Number} 雷達範圍透明度 (預設0.34，介於0~1.0)
// @param.frameopacity {Number} 雷達範圍框線透明度 (預設1，介於0~1.0)
// @param.scanopacity {Number} 掃描透明度 (預設1，介於0~1.0)
// @param.planecenter {Number} 方位角 (預設0°，面對正北方)
// @param.horzarg {Number} 水平展開角 (預設360°)
// @param.vertarg {Number} 垂直展開角 (預設180°)
// @param.epsg {Number} 所輸入中心點的Epsg，若為null視為與地形相同
militaryModule.addRadarAnimeEntity({ 
  geo: new GeoPoint(121, 24.5, 2000), 
  radius: 10000, 
  planeCenter: 45, 
  horzArg: 90, 
  vertArg: 90
});
militaryModule.addRadarAnimeEntity({
  geo: new window.GeoPoint(121, 24.7, 2000),
  radius: 10000
});

[info] 動手試試看：
程式碼連結：我是連結

空中安全路線分析

var militaryModule = terrainview.getModule("military");
let beginpos = new window.GeoPoint(121, 23, 4500);
let endpos = new window.GeoPoint(121.5, 23, 4000);
let radarpos = new window.GeoPoint(121.25, 23, 500);
let radararray = [{ Center: radarpos.ToGeoJSON(), Radius: 5000 }];
custDrawLayer.addPointEntity({
  geo: beginpos,
  absHeight: true,
  size: 12,
  label: { text: "起點" }
});
custDrawLayer.addPointEntity({
  geo: endpos,
  absHeight: true,
  size: 12,
  label: { text: "終點" }
});
custDrawLayer.addPointEntity({
  geo: radarpos,
  size: 12,
  label: { text: "雷達" }
});
militaryModule.addRadar3DEntity({
  analysis: { geo: radarpos, gridSize: 100, radius: 5000 }
});
// 新增空中安全路徑分析。
// ov.MilitaryModule.addFlightPathEntity(param)
// @param {Object} param 參數
// @param {Object} param.analysis 分析參數
// @param {GeoPoint} param.analysis.begin 起點
// @param {GeoPoint} param.analysis.end 終點
// @param {Array.<Object>} param.analysis.radars 雷達參數集合
// @param {Number} param.analysis.minHeight 最低飛行高度
// @param {Number} param.analysis.maxHeight 最高飛行高
// @param {Number} param.analysis.horzr 水平轉彎半徑
// @param {Number} param.analysis.angleOfClimb 爬升角度
// @param {Number} param.analysis.vertScale 垂直爬升難度比
// @param {Number} param.analysis.minHeightAboveGround 離地最低高度
// @param {Number} param.analysis.safeDelta 安全距離
// @param {Number} param.analysis.gridSize 分析網格大小
// @param {Number} param.analysis.demWidth 分析範圍寬度
// @param {Number} param.analysis.demHeight 分析範圍高度
// @param {HexColor} param.color 分析結果線段顏色
// @param {Number} param.size 分析結果線段寬度
// @param {Number} param.coopacityde 分析結果線段不透明度
militaryModule.addFlightPathEntity({
  analysis: { begin: beginpos, end: endpos, radars: radararray }
});

[info] 動手試試看：
程式碼連結：我是連結

場域強度分析

var militaryModule = terrainview.getModule("military");
// 新增場強。
// ov.MilitaryModule.addFieldStrengthEntity(param)
// @param {Object} param 參數
// @param {Object} param.analysis 分析參數
// @param {GeoPoint} param.analysis.geo 中心點位置
// @param {Number} param.analysis.radius 半徑
// @param {Number} param.analysis.gridSize 網格大小
// @param {Number} param.analysis.planeCenter 方位角 (預設0°，面對正北方)
// @param {Number} param.analysis.extendAngle 水平展開角 (預設360°)
// @param {Number} param.frequency 頻率
// @param {Number} param.effectiveRadiatedPower 有效輻射功率
// @param {Number} param.opacity 不透明度
// @param {Array.<Number>} param.gains 各方向增益表
// @param {Array.<Number>} param.strengthTable 強度表
// @param {Array.<Number>} param.colorTable 顏色表
// @param {Boolean} param.useViewShed 是否使用視域分析 (預設為true)
// @param {String} param.mode 分析模式 (預設為"free space loss")
// @param {Number} param.centerFieldStrength 偵蒐模式時中心點的場強值
fieldStrengthEntity = militaryModule.addFieldStrengthEntity({
  analysis: {
    geo: new window.GeoPoint(121.2347878442796, 23.427553934089445, 3000),
    radius: 100000
  }
});

[info] 動手試試看：
程式碼連結：我是連結

衛星

var militaryModule = terrainview.getModule("military");
var satelliteTLE = [
  {
    title: "NOAA 15",
    tleLine1:
      "1 25338U 98030A   20162.48758768  .00000067  00000-0  46729-4 0  9990",
    tleLine2:
      "2 25338  98.7169 187.5742 0009205 284.5943  75.4216 14.25971147147983",
    color: "#FF0000",
    entity: null
  }
];
// 自訂衛星
// ov.MilitaryModule.addSatelliteEntity(param)
// @param {String} param.tleTitle 名稱
// @param {String} param.tleLine1 TLE1
// @param {String} param.tleLine2 TLE2
// @param {Number} param.satelliteFOV 衛星視野角度 (預設45°)
// @param {String} param.icon 圖片
// @param {Number} param.iconSize 圖片大小 (預設30)
// @param {HexColor} param.satelliteColor 顏色 (預設#FF0000)
// @param {Number} param.orbitDetail 軌道圓的邊數 (預設90)
// @param {Boolean} param.showSatellite 是否顯示衛星 (預設為true)
// @param {Boolean} param.showOrbit 是否顯示軌道 (預設為true)
// @param {Boolean} param.showViewCone 是否顯示視角錐 (預設為true)
// @param {Boolean} param.showGroundLine 是否顯示落地線 (預設為true)
// @param {Boolean} param.isOrbitLoop 軌跡是否為環形 (預設為false)
// @param {Number} param.playSpeed 播放速度 (預設為1)
let title = satelliteTLE[0].title;
let tleLine1 = satelliteTLE[0].tleLine1;
let tleLine2 = satelliteTLE[0].tleLine2;
let satelliteColor = satelliteTLE[0].color;
let playSpeed = 1.0;
var param = {};
param.tleTitle = title;
param.tleLine1 = tleLine1;
param.tleLine2 = tleLine2;
param.satelliteColor = satelliteColor;
param.icon = "images/1-2-satellite-free-download-png.png";
param.playSpeed = playSpeed;
param.orbitDetail = 90;
satelliteTLE[0].entity = militaryModule.addSatelliteEntity(param);

[info] 動手試試看：
程式碼連結：我是連結