mirror of
https://github.com/mapillary/mapillary-js.git
synced 2026-01-18 13:56:53 +00:00
146 lines
4.4 KiB
HTML
146 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>MapillaryJS Spatial</title>
|
|
<link rel="icon" href="data:,">
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
|
|
<link rel="stylesheet" href="./dist/mapillary.css" />
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#mly {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="mly"></div>
|
|
|
|
<script type="module">
|
|
import {
|
|
SpatialComponent as Spatial,
|
|
Viewer,
|
|
} from './dist/mapillary.module.js';
|
|
|
|
const viewer = new Viewer({
|
|
apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
|
|
component: { cover: false, stats: false, spatial: true },
|
|
container: "mly",
|
|
imageId: "zarcRdNFZwg3FkXNcsFeGw",
|
|
});
|
|
|
|
const spatial = viewer.getComponent("spatial");
|
|
const s = Object.assign(
|
|
{},
|
|
spatial.defaultConfiguration,
|
|
{ imagesVisible: true });
|
|
|
|
const camMode = Spatial.CameraVisualizationMode;
|
|
const none = camMode.Default;
|
|
const cluster = camMode.Cluster;
|
|
const connectedComponent = camMode.ConnectedComponent;
|
|
const sequence = camMode.Sequence;
|
|
|
|
const camModeRotation = {};
|
|
camModeRotation[none] = cluster;
|
|
camModeRotation[cluster] = connectedComponent;
|
|
camModeRotation[connectedComponent] = sequence;
|
|
camModeRotation[sequence] = none;
|
|
|
|
const posMode = Spatial.OriginalPositionMode;
|
|
const hidden = posMode.Hidden;
|
|
const flat = posMode.Flat;
|
|
const altitude = posMode.Altitude;
|
|
|
|
const posModeRotation = {};
|
|
posModeRotation[hidden] = flat;
|
|
posModeRotation[flat] = altitude;
|
|
posModeRotation[altitude] = hidden;
|
|
|
|
function toggleImages() {
|
|
s.imagesVisible = !s.imagesVisible;
|
|
if (s.imagesVisible) { viewer.activateComponent("image"); }
|
|
else { viewer.deactivateComponent("image"); }
|
|
}
|
|
|
|
function rotateCvm() {
|
|
s.cameraVisualizationMode =
|
|
camModeRotation[s.cameraVisualizationMode];
|
|
configure("cameraVisualizationMode");
|
|
}
|
|
|
|
function rotatePm() {
|
|
s.originalPositionMode =
|
|
posModeRotation[s.originalPositionMode];
|
|
configure("originalPositionMode");
|
|
}
|
|
|
|
function toggleBooleanSetting(name) {
|
|
s[name] = !s[name];
|
|
configure(name);
|
|
}
|
|
|
|
function changeSize(name, coeff) {
|
|
s[name] *= coeff;
|
|
s[name] = Math.max(0.01, Math.min(1, s[name]));
|
|
configure(name);
|
|
}
|
|
|
|
function configure(name) {
|
|
const c = {}; c[name] = s[name];
|
|
spatial.configure(c);
|
|
}
|
|
|
|
let filterIndex = 0;
|
|
const filters = [
|
|
[],
|
|
["==", "cameraType", "spherical"],
|
|
["==", "sequenceId", "s5I5m7BvYykB677MpFnOIw"],
|
|
["in", "sequenceId", "s5I5m7BvYykB677MpFnOIw", "-aC4wx-8oOkCp6SFGXoyAg"],
|
|
];
|
|
function setFilter() {
|
|
filterIndex = (filterIndex + 1) % filters.length;
|
|
viewer.setFilter(filters[filterIndex]).then(
|
|
function (n) {
|
|
console.log("filter", filters[filterIndex]);
|
|
});
|
|
}
|
|
|
|
window.document.addEventListener(
|
|
"keydown",
|
|
e => {
|
|
let name = undefined;
|
|
switch (e.key) {
|
|
case 'c': name = 'camerasVisible'; break;
|
|
case 'e': name = 'earthControls'; break;
|
|
case 'p': name = 'pointsVisible'; break;
|
|
case 't': name = 'tilesVisible'; break;
|
|
case 'i': toggleImages(); break;
|
|
case 'v': rotateCvm(); break;
|
|
case 'o': rotatePm(); break;
|
|
case 'q': changeSize('pointSize', 0.9); break;
|
|
case 'w': changeSize('pointSize', 1.1); break;
|
|
case 'a': changeSize('cameraSize', 0.9); break;
|
|
case 's': changeSize('cameraSize', 1.1); break;
|
|
case 'f': setFilter(); break;
|
|
default: break;
|
|
}
|
|
|
|
if (!!name) { toggleBooleanSetting(name); }
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|