mirror of
https://github.com/mapillary/mapillary-js.git
synced 2026-01-18 13:56:53 +00:00
2b2ed31c4f
Add option for visualizing the original position altitude instead of flat lines. Deprecate positionsVisible property. Add altitude property to fill interface and node class.
143 lines
4.5 KiB
HTML
143 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Spatial data</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
|
|
<link rel="stylesheet" href="dist/mapillary.min.css" />
|
|
<script src="dist/mapillary.js"></script>
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#mly {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="mly"></div>
|
|
|
|
<script>
|
|
const viewer = new Mapillary.Viewer({
|
|
apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
|
|
component: { cover: false, stats: false, spatialData: true },
|
|
container: "mly",
|
|
imageKey: "zarcRdNFZwg3FkXNcsFeGw",
|
|
});
|
|
|
|
window.addEventListener("resize", function () { viewer.resize(); });
|
|
|
|
const spatial = viewer.getComponent("spatialData");
|
|
const s = Object.assign(
|
|
{},
|
|
spatial.defaultConfiguration,
|
|
{ imagesVisible: true });
|
|
|
|
const camMode = Mapillary.SpatialDataComponent.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 = Mapillary.SpatialDataComponent.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("imagePlane"); }
|
|
else { viewer.deactivateComponent("imagePlane"); }
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
var filterIndex = 0;
|
|
var filters = [
|
|
[],
|
|
["==", "fullPano", true],
|
|
["==", "sequenceKey", "s5I5m7BvYykB677MpFnOIw"],
|
|
["in", "sequenceKey", "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>
|