<!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',});
viewer.clock.shouldAnimate = true;
var saturnPosition = bmgl.Cartesian3.fromDegrees(
-95.0,
45.0,
300000.0
);
viewer.entities.add({
name: "Saturn",
position: saturnPosition,
ellipsoid: {
radii: new bmgl.Cartesian3(200000.0, 200000.0, 200000.0),
material: new bmgl.Color(0.95, 0.82, 0.49),
},
});
viewer.entities.add({
name: "Saturn's inner ring",
position: saturnPosition,
orientation: bmgl.Transforms.headingPitchRollQuaternion(
saturnPosition,
new bmgl.HeadingPitchRoll(
bmgl.Math.toRadians(30.0),
bmgl.Math.toRadians(30.0),
0.0
)
),
ellipsoid: {
radii: new bmgl.Cartesian3(400000.0, 400000.0, 400000.0),
innerRadii: new bmgl.Cartesian3(300000.0, 300000.0, 300000.0),
minimumCone: bmgl.Math.toRadians(89.8),
maximumCone: bmgl.Math.toRadians(90.2),
material: new bmgl.Color(0.95, 0.82, 0.49, 0.5),
},
});
viewer.entities.add({
name: "Saturn's outer ring",
position: saturnPosition,
orientation: bmgl.Transforms.headingPitchRollQuaternion(
saturnPosition,
new bmgl.HeadingPitchRoll(
bmgl.Math.toRadians(30.0),
bmgl.Math.toRadians(30.0),
0.0
)
),
ellipsoid: {
radii: new bmgl.Cartesian3(460000.0, 460000.0, 460000.0),
innerRadii: new bmgl.Cartesian3(415000.0, 415000.0, 415000.0),
minimumCone: bmgl.Math.toRadians(89.8),
maximumCone: bmgl.Math.toRadians(90.2),
material: new bmgl.Color(0.95, 0.82, 0.49, 0.5),
},
});
viewer.entities.add({
name: "Dome",
position: bmgl.Cartesian3.fromDegrees(-120.0, 40.0),
ellipsoid: {
radii: new bmgl.Cartesian3(200000.0, 200000.0, 200000.0),
maximumCone: bmgl.Math.PI_OVER_TWO,
material: bmgl.Color.BLUE.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "Dome with inner radius",
position: bmgl.Cartesian3.fromDegrees(-114.0, 40.0),
ellipsoid: {
radii: new bmgl.Cartesian3(250000.0, 200000.0, 150000.0),
innerRadii: new bmgl.Cartesian3(100000.0, 80000.0, 60000.0),
maximumCone: bmgl.Math.PI_OVER_TWO,
material: bmgl.Color.RED.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "Dome with top cut out",
position: bmgl.Cartesian3.fromDegrees(-108.0, 40.0),
ellipsoid: {
radii: new bmgl.Cartesian3(200000.0, 200000.0, 200000.0),
innerRadii: new bmgl.Cartesian3(100000.0, 100000.0, 100000.0),
minimumCone: bmgl.Math.toRadians(20.0),
maximumCone: bmgl.Math.PI_OVER_TWO,
material: bmgl.Color.YELLOW.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "Top and bottom cut out",
position: bmgl.Cartesian3.fromDegrees(-102.0, 40.0, 140000.0),
ellipsoid: {
radii: new bmgl.Cartesian3(200000.0, 200000.0, 200000.0),
innerRadii: new bmgl.Cartesian3(100000.0, 100000.0, 100000.0),
minimumCone: bmgl.Math.toRadians(60.0),
maximumCone: bmgl.Math.toRadians(140.0),
material: bmgl.Color.DARKCYAN.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "Bowl",
position: bmgl.Cartesian3.fromDegrees(-96.0, 39.5, 200000.0),
ellipsoid: {
radii: new bmgl.Cartesian3(200000.0, 200000.0, 200000.0),
innerRadii: new bmgl.Cartesian3(180000.0, 180000.0, 180000.0),
minimumCone: bmgl.Math.toRadians(110.0),
material: bmgl.Color.GREEN.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "Clock cutout",
position: bmgl.Cartesian3.fromDegrees(-90.0, 39.0),
ellipsoid: {
radii: new bmgl.Cartesian3(200000.0, 200000.0, 200000.0),
innerRadii: new bmgl.Cartesian3(150000.0, 150000.0, 150000.0),
minimumClock: bmgl.Math.toRadians(-90.0),
maximumClock: bmgl.Math.toRadians(180.0),
minimumCone: bmgl.Math.toRadians(20.0),
maximumCone: bmgl.Math.toRadians(70.0),
material: bmgl.Color.BLUE.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "Partial dome",
position: bmgl.Cartesian3.fromDegrees(-84.0, 38.5),
ellipsoid: {
radii: new bmgl.Cartesian3(200000.0, 200000.0, 200000.0),
minimumClock: bmgl.Math.toRadians(-90.0),
maximumClock: bmgl.Math.toRadians(180.0),
maximumCone: bmgl.Math.toRadians(90.0),
material: bmgl.Color.RED.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "Wedge",
position: bmgl.Cartesian3.fromDegrees(-102.0, 35.0, 20000.0),
orientation: bmgl.Transforms.headingPitchRollQuaternion(
bmgl.Cartesian3.fromDegrees(-102.0, 35.0, 20000.0),
new bmgl.HeadingPitchRoll(bmgl.Math.PI / 1.5, 0, 0.0)
),
ellipsoid: {
radii: new bmgl.Cartesian3(500000.0, 500000.0, 500000.0),
innerRadii: new bmgl.Cartesian3(10000.0, 10000.0, 10000.0),
minimumClock: bmgl.Math.toRadians(-15.0),
maximumClock: bmgl.Math.toRadians(15.0),
minimumCone: bmgl.Math.toRadians(75.0),
maximumCone: bmgl.Math.toRadians(105.0),
material: bmgl.Color.DARKCYAN.withAlpha(0.3),
outline: true,
},
});
viewer.entities.add({
name: "Partial ellipsoid",
position: bmgl.Cartesian3.fromDegrees(-95.0, 34.0),
ellipsoid: {
radii: new bmgl.Cartesian3(300000.0, 300000.0, 300000.0),
innerRadii: new bmgl.Cartesian3(70000.0, 70000.0, 70000.0),
minimumClock: bmgl.Math.toRadians(180.0),
maximumClock: bmgl.Math.toRadians(400.0),
maximumCone: bmgl.Math.toRadians(90.0),
material: bmgl.Color.DARKCYAN.withAlpha(0.3),
outline: true,
},
});
viewer.zoomTo(viewer.entities);
</script>
</html>
源码