<!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 href='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' 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', { mapId: 'bigemap.zhongkexingtu' });
var czml = [
{
id: "document",
name: "CZML Model",
version: "1.0",
clock: {
interval: "2015-01-01T00:00:00Z/2015-01-01T00:00:20Z",
currentTime: "2015-01-01T00:00:00Z",
multiplier: 20,
},
},
{
id: "model",
position: {
cartographicDegrees: [-77, 37, 0],
},
viewFrom: {
cartesian: [4.3, 0.1, 2.6],
},
model: {
gltf: "/templates/glb/bmgl_Man.glb",
runAnimations: false,
nodeTransformations: {
Skeleton_arm_joint_L__3_: {
rotation: {
epoch: "2015-01-01T00:00:00Z",
unitQuaternion: [
0,
-0.23381920887303329,
-0.6909886782144156,
-0.0938384854833712,
0.6775378681547408,
10,
-0.4924076887347565,
-0.6304934596091216,
0.20657864059632378,
0.563327551886459,
20,
-0.23381920887303329,
-0.6909886782144156,
-0.0938384854833712,
0.6775378681547408,
],
},
},
Skeleton_arm_joint_R__2_: {
rotation: {
unitQuaternion: [
-0.2840422631464792,
-0.40211904424847345,
0.25175867757399086,
0.7063888981321548,
],
},
},
},
},
},
];
var viewer = new bmgl.Viewer("container", {
shouldAnimate: true,
mapId: 'bigemap.zhongkexingtu'
});
var dataSourcePromise = viewer.dataSources.add(
bmgl.CzmlDataSource.load(czml)
);
dataSourcePromise
.then(function (dataSource) {
viewer.trackedEntity = dataSource.entities.getById("model");
})
.otherwise(function (error) {
window.alert(error);
});
</script>
</html>
源码