1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105 | <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
html, body, div#mapray-container { margin: 0; padding: 0; height: 100%; }
</style>
</head>
<body>
<div id="mapray-container"></div>
</body>
</html>
<script>
class CustomViewer extends maprayui.StandardUIViewer {
constructor( container, accessToken, options ) {
super( container, accessToken, options );
const pinEntity = new mapray.PinEntity( this.viewer.scene );
pinEntity.addPin( new mapray.GeoPoint( 139.699985, 35.690777, 40 ), { id: "pin", size: 40, bg_color: [1, 0, 0] });
this.viewer.scene.addEntity( pinEntity );
const pinEntry = pinEntity.getEntry( "pin" );
// Create linear curve.
const curve1 = new mapray.animation.KFLinearCurve( mapray.animation.Type.find( "number" ) );
const curve2 = new mapray.animation.KFLinearCurve( mapray.animation.Type.find( "vector3" ) );
curve1.setKeyFrames([
mapray.animation.Time.fromNumber( 0 ), 10.0,
mapray.animation.Time.fromNumber( 1 ), 25.0,
mapray.animation.Time.fromNumber( 2 ), 40.0,
]);
const keyframes2 = [
mapray.animation.Time.fromNumber( 0 ), [ 0.0, 1.0, 0.0 ],
mapray.animation.Time.fromNumber( 1 ), [ 0.0, 0.0, 1.0 ],
mapray.animation.Time.fromNumber( 2 ), [ 1.0, 0.0, 0.0 ],
];
for ( let t = 0; t <= 3; ++t ) {
keyframes2.push(
mapray.animation.Time.fromNumber( 2.5 + t ), [ 1.0, 1.0, 1.0 ],
mapray.animation.Time.fromNumber( 3.0 + t ), [ 1.0, 0.0, 0.0 ],
);
}
curve2.setKeyFrames( keyframes2 );
// Create updater.
this.totalTime = 0;
this.isAnimationStart = false;
this.updater = new mapray.animation.Updater();
// Bind "size" and "bg_color" param to updater and curve.
pinEntry.animation.bind( "size", this.updater, curve1 );
pinEntry.animation.bind( "bg_color", this.updater, curve2 );
}
/** @override */
onUpdateFrame( delta_time ) {
super.onUpdateFrame( delta_time );
if ( this.isAnimationStart ) {
this.totalTime += delta_time;
this.updater.update( mapray.animation.Time.fromNumber( this.totalTime ) );
}
}
/** @override */
onMouseDown( point, event ) {
super.onMouseDown( point, event );
this.totalTime = 0;
}
startAnimation() {
this.totalTime = 0;
this.isAnimationStart = true;
console.log( "start animation" );
}
}
// Set up your Organization Token, which can be created in Mapray Cloud.
const accessToken = "<YOUR_MAPRAY_ACCESS_TOKEN>";
const uiviewer = new CustomViewer( "mapray-container", accessToken, {
dem_provider: new mapray.StandardDemProvider( {
prefix: "https://tiles.mapray.com/dem/",
headers: { Authorization: "Bearer " + accessToken }
} )
} );
uiviewer.setCameraPosition({
longitude: 139.697475,
latitude: 35.682494,
height: 420
});
uiviewer.setLookAtPosition({
longitude: 139.699985,
latitude: 35.690777,
height: 35
});
uiviewer.startAnimation();
</script>
|