<!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>
<script src='./templates/bmgl-header.js'></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#toolbar {
position: absolute;
background-color: white;
opacity: .8;
}
</style>
<body>
<div id="container" class="fullSize">
<div id="slider"></div>
</div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
<div id="toolbar"></div>
</body>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer("container", {
shouldAnimate: true,
mapId: 'bigemap.zhongkexingtu',
});
var statusDisplay = document.createElement("div");
var fuelDisplay = document.createElement("div");
var czmlPath = "/offline_data/";
var vehicleEntity;
// Add a blank CzmlDataSource to hold our multi-part entity/entities.
var dataSource = new bmgl.CzmlDataSource();
viewer.dataSources.add(dataSource);
// This demo shows how a single path can be broken up into several CZML streams.
var partsToLoad = [
{
url: "MultipartVehicle_part1.czml",
range: [0, 4000],
requested: false,
loaded: false,
}
];
function updateStatusDisplay() {
var msg = "";
partsToLoad.forEach(function (part) {
msg += part.url + " - ";
if (part.loaded) {
msg += "Loaded.<br/>";
} else if (part.requested) {
msg += "Loading now...<br/>";
} else {
msg += "Not needed yet.<br/>";
}
});
statusDisplay.innerHTML = msg;
}
// Helper function to mark a part as requested, and process it into the dataSource.
function processPart(part) {
part.requested = true;
updateStatusDisplay();
dataSource.process(czmlPath + part.url).then(function () {
part.loaded = true;
updateStatusDisplay();
// Follow the vehicle with the camera.
if (!viewer.trackedEntity) {
viewer.trackedEntity = vehicleEntity = dataSource.entities.getById(
"Vehicle"
);
}
});
}
// Load the first part up front.
processPart(partsToLoad[0]);
// Load a new section before the clock naturally gets there.
// Note this can't predict when a user may fast-forward to it.
var preloadTimeInSeconds = 100;
viewer.clock.onTick.addEventListener(function (clock) {
// This example uses time offsets from the start to identify which parts need loading.
var timeOffset = bmgl.JulianDate.secondsDifference(
clock.currentTime,
clock.startTime
);
// Filter the list of parts to just the ones that need loading right now.
// Then, process each part that needs loading.
partsToLoad
.filter(function (part) {
return (
!part.requested &&
timeOffset >= part.range[0] - preloadTimeInSeconds &&
timeOffset <= part.range[1]
);
})
.forEach(function (part) {
processPart(part);
});
if (vehicleEntity) {
var fuel = vehicleEntity.properties.fuel_remaining.getValue(
clock.currentTime
);
if (bmgl.defined(fuel)) {
fuelDisplay.textContent = "Fuel: " + fuel.toFixed(2) + " gal";
}
}
});
// Add a reset button, for convenience.
Sandcastle.addToolbarButton("Reset demo", function () {
// Put things back to the starting position.
viewer.clock.currentTime = viewer.clock.startTime;
viewer.clock.shouldAnimate = true;
partsToLoad.forEach(function (part) {
part.requested = false;
part.loaded = false;
});
dataSource.entities.removeAll();
processPart(partsToLoad[0]);
});
// Show the status display below the reset button.
statusDisplay.style.background = "rgba(42, 42, 42, 0.7)";
statusDisplay.style.padding = "5px 10px";
document.getElementById("toolbar").appendChild(statusDisplay);
// Show a multi-part custom property being read from CZML.
fuelDisplay.style.background = "rgba(42, 42, 42, 0.7)";
fuelDisplay.style.padding = "5px 10px";
fuelDisplay.style.marginTop = "5px";
document.getElementById("toolbar").appendChild(fuelDisplay);
</script>
</html>