<!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://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
</head>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#toolbox {
position: absolute;
top: 50px;
left: 50px;
}
</style>
<body>
<div id="container"></div>
<select name="guanyuan" id="toolbox" onchange="aa()">
<option value="Fixed lighting" onclick="aa()" onselect="selectFixed()">
固定照明
</option>
<option value="Moonlight" onselect="selectMoonlight()">夜晚</option>
<option value="Sunlight" onselect="selectSunlight()">白天</option>
<option value="Customcolor" onselect="selectCustomcolor()">黃昏</option>
</select>
<script>
bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
var viewer = new bmgl.Viewer("container", {
mapId: "bigemap.dc-satellite",
timeline: true,
});
function aa() {
let val = document.querySelector("#toolbox").value;
switch (val) {
case "Fixed lighting":
selectFixed();
break;
case "Flashlight":
selectFlashlight();
break;
case "Moonlight":
selectMoonlight();
break;
case "Sunlight":
selectSunlight();
break;
case "Customcolor":
selectCustomcolor();
break;
}
}
var scene = viewer.scene;
scene.globe.enableLighting = true;
var scratchIcrfToFixed = new bmgl.Matrix3();
var scratchMoonPosition = new bmgl.Cartesian3();
var scratchMoonDirection = new bmgl.Cartesian3();
function getMoonDirection(result) {
result = bmgl.defined(result) ? result : new bmgl.Cartesian3();
var icrfToFixed = scratchIcrfToFixed;
var date = viewer.clock.currentTime;
if (
!bmgl.defined(
bmgl.Transforms.computeIcrfToFixedMatrix(date, icrfToFixed)
)
) {
bmgl.Transforms.computeTemeToPseudoFixedMatrix(date, icrfToFixed);
}
var moonPosition = bmgl.Simon1994PlanetaryPositions.computeMoonPositionInEarthInertialFrame(
date,
scratchMoonPosition
);
bmgl.Matrix3.multiplyByVector(icrfToFixed, moonPosition, moonPosition);
var moonDirection = bmgl.Cartesian3.normalize(
moonPosition,
scratchMoonDirection
);
return bmgl.Cartesian3.negate(moonDirection, result);
}
var directionalLight = new bmgl.DirectionalLight({
direction: new bmgl.Cartesian3(
0.2454278300540191,
0.8842635425193919,
0.39729481195458805
),
});
var flashlight = new bmgl.DirectionalLight({
direction: scene.camera.directionWC, // Updated every frame
});
var moonLight = new bmgl.DirectionalLight({
direction: getMoonDirection(), // Updated every frame
color: new bmgl.Color(0.9, 0.925, 1.0),
intensity: 0.5,
});
var sunLight = new bmgl.SunLight();
var customColorLight = new bmgl.DirectionalLight({
direction: new bmgl.Cartesian3(
-0.2454278300540191,
0.8842635425193919,
0.39729481195458805
),
color: bmgl.Color.fromCssColorString("#deca7c"),
});
scene.preRender.addEventListener(function (scene, time) {
if (scene.light === flashlight) {
scene.light.direction = bmgl.Cartesian3.clone(
scene.camera.directionWC,
scene.light.direction
);
} else if (scene.light === moonLight) {
scene.light.direction = getMoonDirection(scene.light.direction);
}
});
viewer.entities.add({
position: bmgl.Cartesian3.fromRadians(
-2.1463338399937277,
0.6677959688982861,
32.18991401746337
),
model: {
uri: "./model/bmglBalloon.glb",
scale: 7.0,
},
});
viewer.entities.add({
position: bmgl.Cartesian3.fromRadians(
-2.14633449752228,
0.667796065242357,
24.47647034111423
),
cylinder: {
length: 8.0,
topRadius: 2.0,
bottomRadius: 2.0,
material: bmgl.Color.WHITE,
},
});
viewer.entities.add({
position: bmgl.Cartesian3.fromRadians(
-2.1463332294173365,
0.6677959755384729,
26.2876064083145
),
ellipsoid: {
radii: new bmgl.Cartesian3(2.5, 2.5, 2.5),
material: bmgl.Color.WHITE.withAlpha(0.5),
},
});
function setTime(iso8601) {
var currentTime = bmgl.JulianDate.fromIso8601(iso8601);
var endTime = bmgl.JulianDate.addDays(
currentTime,
2,
new bmgl.JulianDate()
);
viewer.clock.currentTime = currentTime;
viewer.timeline.zoomTo(currentTime, endTime);
}
function reset() {
// Set scene defaults
scene.light = sunLight;
scene.globe.dynamicAtmosphereLighting = true;
scene.globe.dynamicAtmosphereLightingFromSun = false;
setTime("2020-01-09T23:00:39.018261982600961346Z");
}
viewer.scene.camera.setView({
destination: new bmgl.Cartesian3(
-2729490.8390059783,
-4206389.878855597,
3928671.2763356343
),
orientation: new bmgl.HeadingPitchRoll(
2.2482480507178426,
-0.20084951548781982,
0.002593933673552762
),
endTransform: bmgl.Matrix4.IDENTITY,
});
function selectFixed() {
reset();
scene.light = directionalLight;
console.log(1);
}
function selectFlashlight() {
reset();
scene.light = flashlight;
scene.globe.dynamicAtmosphereLighting = false;
}
function selectMoonlight() {
reset();
scene.light = moonLight;
scene.globe.dynamicAtmosphereLightingFromSun = true;
setTime("2020-01-10T05:29:41.17946898164518643Z");
}
function selectSunlight() {
reset();
}
function selectCustomcolor() {
reset();
scene.light = customColorLight;
}
</script>
</body>
</html>