MarkerLineEntity¶
Animation without using Mapray animation engine
line_animation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MarkerLineEntity</title>
<meta property="og:description" content="Animation without using Mapray animation engine" />
<script src="https://resource.mapray.com/mapray-js/v0.9.6/mapray.min.js"></script>
<script src="https://resource.mapray.com/ui/v0.9.6/maprayui.min.js"></script>
<link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
<style>
body {margin: 0; padding: 0;}
html, body, div#mapray-container { height: 100%; }
</style>
</head>
<body>
<div id="mapray-container"></div>
</body>
</html>
<script>
class AnimationView extends maprayui.StandardUIViewer {
constructor(container, apikey, options) {
super(container, apikey, options);
this.line_Pos_Array = [{ longitude: 139.7528, latitude: 35.685175, height: 500.0 }, // 仮想パスの終点(皇居)
{ longitude: 139.745433, latitude: 35.658581, height: 500.0 }, // 仮想パスの終点(東京タワー)
{ longitude: 139.8107, latitude: 35.710063, height: 500.0 }, // 仮想パスの終点(スカイツリー)
{ longitude: 139.751891, latitude: 35.70564, height: 500.0 }, // 仮想パスの終点(東京ドーム)
{ longitude: 139.7528, latitude: 35.685175, height: 500.0 }] // 仮想パスの始点(皇居)
this.ratio_Increment = 0.15; // 毎フレームの線形補間割合増加分
this.ratio = 0.0; // 線形補間の割合
this.line_Pos_Index = 0;
this.CreateMarkerLineEntityAndAddLineStartPoint();
}
onStart(){
super.onStart();
// 初期化（経過時間、ポイント経度、緯度）
this.ratio = 0.0;
}
onUpdateFrame(delta_time) {
super.onUpdateFrame(delta_time);
// 次の線形補間の割合
this.ratio += this.ratio_Increment * delta_time;
if (this.ratio > 1.0) {
this.ratio = 0.0;
this.line_Pos_Index += 1
}
if (this.line_Pos_Index == this.line_Pos_Array.length - 1) {
this.line_Pos_Index = 0
this.viewer.scene.clearEntities();
this.CreateMarkerLineEntityAndAddLineStartPoint();
}
// 始点終点間の緯度経度高度のベクトル作成
var vec = [this.line_Pos_Array[this.line_Pos_Index + 1].longitude - this.line_Pos_Array[this.line_Pos_Index].longitude,
this.line_Pos_Array[this.line_Pos_Index + 1].latitude - this.line_Pos_Array[this.line_Pos_Index].latitude,
this.line_Pos_Array[this.line_Pos_Index + 1].height - this.line_Pos_Array[this.line_Pos_Index].height];
mapray.GeoMath.normalize3(vec, vec);
// 外積で補正方向算出
var closs_Vec = mapray.GeoMath.cross3(vec, [0, 0, 1], mapray.GeoMath.createVector3());
// 次のラインの緯度経度高度を算出
var line_Point = {longitude: (this.line_Pos_Array[this.line_Pos_Index].longitude * (1 - this.ratio) + this.line_Pos_Array[this.line_Pos_Index + 1].longitude * this.ratio) + (closs_Vec[0] * 0.02) * Math.sin(this.ratio * 180 * mapray.GeoMath.DEGREE),
latitude: ( this.line_Pos_Array[this.line_Pos_Index].latitude * ( 1 - this.ratio ) + this.line_Pos_Array[this.line_Pos_Index + 1].latitude * this.ratio ) + ( closs_Vec[1] * 0.02 ) * Math.sin( this.ratio * 180 * mapray.GeoMath.DEGREE),
height: this.line_Pos_Array[this.line_Pos_Index].height * (1 - this.ratio) + this.line_Pos_Array[this.line_Pos_Index + 1].height * this.ratio};
// 次の点を追加
this.AddLinePoint([line_Point.longitude, line_Point.latitude, line_Point.height]);
}
CreateMarkerLineEntityAndAddLineStartPoint() {
// 直線のエンティティを作成
var entity = new mapray.MarkerLineEntity(this.viewer.scene);
// 仮想パスの1点目を直線に追加
var points = [this.line_Pos_Array[0].latitude, this.line_Pos_Array[0].longitude, this.line_Pos_Array[0].height];
entity.addPoints(points);
// 線幅を設定
entity.setLineWidth(11);
//エンティティをシーンに追加
this.viewer.scene.addEntity(entity);
}
AddLinePoint(points)
{
//ラインの点を追加する
var line_Entity = this.viewer.scene.getEntity(0);
line_Entity.addPoints(points);
}
}
// Set up your access token, which can be created in Mapray Cloud.
var apikey= "<YOUR_MAPRAY_API_KEY>";
// The StandardUIView in the ui package includes mouse-based camera manipulation.
var uiviewer = new AnimationView( "mapray-container", apikey);
var lookat_position = new mapray.GeoPoint(139.7528, 35.685175, 20000);
var mlocs_to_gocs = lookat_position.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
var cam_pos = mapray.GeoMath.createVector3([0, 0, 7000]);
var cam_pos_gocs = mapray.GeoMath.transformPosition_A(mlocs_to_gocs, cam_pos, mapray.GeoMath.createVector3() );
var cam_pos_iscs = {longitude: 0, latitude:0, height:0};
mapray.GeoMath.gocs_to_iscs(cam_pos_gocs, cam_pos_iscs);
uiviewer.setCameraPosition({
longitude: cam_pos_iscs.longitude,
latitude: cam_pos_iscs.latitude,
height: cam_pos_iscs.height
});
uiviewer.setLookAtPosition({
longitude: lookat_position.longitude,
latitude: lookat_position.latitude,
height: lookat_position.height
});
</script>
Info
このサンプルコードは、<YOUR_MAPRAY_API_KEY>を、あなたのMapray CloudアカウントのAPI Keyに置き換えるまで、期待通りに動作しません。