<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel='stylesheet' />
<script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<body>
<div id="container"></div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
</body>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', {
terrainId: 'bigemap.9af15d8e',
mapId: 'bigemap.zhongkexingtu',
vrButton: true,
});
// Click the VR button in the bottom right of the screen to switch to VR mode.
viewer.scene.globe.enableLighting = true;
viewer.scene.globe.depthTestAgainstTerrain = true;
// Follow the path of a plane. See the interpolation Sandcastle example.
bmgl.Math.setRandomNumberSeed(3);
var start = bmgl.JulianDate.fromDate(new Date(2015, 2, 25, 16));
var stop = bmgl.JulianDate.addSeconds(
start,
360,
new bmgl.JulianDate()
);
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = bmgl.ClockRange.LOOP_STOP;
viewer.clock.multiplier = 1.0;
viewer.clock.shouldAnimate = true;
function computeCirclularFlight(lon, lat, radius) {
var property = new bmgl.SampledPositionProperty();
var startAngle = bmgl.Math.nextRandomNumber() * 360.0;
var endAngle = startAngle + 360.0;
var increment =
(bmgl.Math.nextRandomNumber() * 2.0 - 1.0) * 10.0 + 45.0;
for (var i = startAngle; i < endAngle; i += increment) {
var radians = bmgl.Math.toRadians(i);
var timeIncrement = i - startAngle;
var time = bmgl.JulianDate.addSeconds(
start,
timeIncrement,
new bmgl.JulianDate()
);
var position = bmgl.Cartesian3.fromDegrees(
lon + radius * 1.5 * Math.cos(radians),
lat + radius * Math.sin(radians),
bmgl.Math.nextRandomNumber() * 500 + 1800
);
property.addSample(time, position);
}
return property;
}
var longitude = 104.111;
var latitude = 31.1110;
var radius = 0.03;
var modelURI =
"/templates/glb/bmglBalloon.glb";
var entity = viewer.entities.add({
availability: new bmgl.TimeIntervalCollection([
new bmgl.TimeInterval({
start: start,
stop: stop,
}),
]),
position: computeCirclularFlight(longitude, latitude, radius),
model: {
uri: modelURI,
minimumPixelSize: 64,
},
});
entity.position.setInterpolationOptions({
interpolationDegree: 2,
interpolationAlgorithm: bmgl.HermitePolynomialApproximation,
});
// Set initial camera position and orientation to be when in the model's reference frame.
var camera = viewer.camera;
camera.position = new bmgl.Cartesian3(0.25, 0.0, 0.0);
camera.direction = new bmgl.Cartesian3(1.0, 0.0, 0.0);
camera.up = new bmgl.Cartesian3(0.0, 0.0, 1.0);
camera.right = new bmgl.Cartesian3(0.0, -1.0, 0.0);
viewer.scene.postUpdate.addEventListener(function (scene, time) {
var position = entity.position.getValue(time);
if (!bmgl.defined(position)) {
return;
}
var transform;
if (!bmgl.defined(entity.orientation)) {
transform = bmgl.Transforms.eastNorthUpToFixedFrame(position);
} else {
var orientation = entity.orientation.getValue(time);
if (!bmgl.defined(orientation)) {
return;
}
transform = bmgl.Matrix4.fromRotationTranslation(
bmgl.Matrix3.fromQuaternion(orientation),
position
);
}
// Save camera state
var offset = bmgl.Cartesian3.clone(camera.position);
var direction = bmgl.Cartesian3.clone(camera.direction);
var up = bmgl.Cartesian3.clone(camera.up);
// Reset the camera state to the saved state so it appears fixed in the model's frame.
bmgl.Cartesian3.clone(offset, camera.position);
bmgl.Cartesian3.clone(direction, camera.direction);
bmgl.Cartesian3.clone(up, camera.up);
bmgl.Cartesian3.cross(direction, up, camera.right);
});
//設置相機位置
viewer.camera.setView( {
destination : bmgl.Cartesian3.fromDegrees( 104.153, 31.089, 30000 )
} );
// Add a few more balloons flying with the one the viewer is in.
var numBalloons = 12;
for (var i = 0; i < numBalloons; ++i) {
var balloonRadius =
(bmgl.Math.nextRandomNumber() * 2.0 - 1.0) * 0.01 + radius;
var balloon = viewer.entities.add({
availability: new bmgl.TimeIntervalCollection([
new bmgl.TimeInterval({
start: start,
stop: stop,
}),
]),
position: computeCirclularFlight(
longitude,
latitude,
balloonRadius
),
model: {
uri: modelURI,
minimumPixelSize: 64,
},
});
balloon.position.setInterpolationOptions({
interpolationDegree: 2,
interpolationAlgorithm: bmgl.HermitePolynomialApproximation,
});
}
</script>
</html>
源碼