Skip to main content

Controlling camera

const html = `
<style>
html,body {
margin: 0;
width: 350px;
background: white;
}
#wrapper {
height: 100%;
padding: 12px;
box-sizing: border-box;
}
input {
width: 60px;
}
</style>

<div id="wrapper">
<p>lng: <input type="number" id="lng" value="139.78" />°</p>
<p>lat: <input type="number" id="lat" value="35.68" />°</p>
<p>height: <input type="number" id="height" value="10000" /> m</p>
<p>heading: <input type="number" id="heading" value="0" step="0.1"/></p>
<p>pitch: <input type="number" id="pitch" value="-1.5" step="0.1"/></p>
<p>roll:(work for fly to) <input type="number" id="roll" value="0" step="0.1"/></p>
<p>range:(work for look at) <input type="number" id="range" value="10000" /> m</p>
<p>duration: <input type="number" id="duration" value="2" /> s</p>
<p><button id="fly">Fly to</button> <button id="look">Look at</button></p>
</div>

<script>
const getValues = () => ({
lng: parseFloat(document.getElementById("lng").value||0),
lat: parseFloat(document.getElementById("lat").value||0),
height: parseFloat(document.getElementById("height").value||0),
heading: parseFloat(document.getElementById("heading").value||0),
pitch: parseFloat(document.getElementById("pitch").value||0),
roll: parseFloat(document.getElementById("roll").value||0),
range: parseFloat(document.getElementById("range").value||0),
duration: parseFloat(document.getElementById("duration").value||0),
});

document.getElementById("fly").addEventListener("click", () => {
parent.postMessage({ fly: getValues() }, "*");
});

document.getElementById("look").addEventListener("click", () => {
parent.postMessage({ look: getValues() }, "*");
});
</script>
`;

reearth.ui.show(html);

reearth.on("message", msg => {
if (msg.fly) {
reearth.camera.flyTo({
lat: msg.fly.lat, // degrees
lng: msg.fly.lng, // degrees
height: msg.fly.height, // meters
heading: msg.fly.heading, // radians
pitch: msg.fly.pitch, // radians
roll: msg.fly.roll, // radians
}, {
duration: msg.fly.duration // seconds
});
} else if (msg.look) {
reearth.camera.lookAt({
lat: msg.look.lat, // degrees
lng: msg.look.lng, // degrees
height: msg.look.height, // meters
heading: msg.look.heading, // radians
pitch: msg.look.pitch, // radians
range: msg.look.range, // meters
}, {
duration: msg.look.duration // seconds
});
}
});