mirror of
https://github.com/mapillary/mapillary-js.git
synced 2025-12-08 17:35:55 +00:00
276 lines
9.3 KiB
HTML
276 lines
9.3 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 {
|
|
CameraControls,
|
|
CameraVisualizationMode,
|
|
OriginalPositionMode,
|
|
PointVisualizationMode,
|
|
Viewer,
|
|
} from "/dist/mapillary.module.js";
|
|
import { accessToken } from "/doc-src/.access-token/token.js";
|
|
|
|
const imageId = "780299919518360";
|
|
|
|
let cameraControls = CameraControls.Earth;
|
|
let spatialActive = true;
|
|
const viewer = new Viewer({
|
|
accessToken,
|
|
cameraControls,
|
|
component: { cover: false, spatial: spatialActive },
|
|
container: "mly",
|
|
});
|
|
|
|
viewer.moveTo(imageId).catch((error) => console.error(error));
|
|
|
|
const spatial = viewer.getComponent("spatial");
|
|
viewer.on("click", (event) => {
|
|
spatial
|
|
.getFrameIdAt(event.pixelPoint)
|
|
.then((id) => console.log("Clicked frame:", id));
|
|
});
|
|
|
|
function randomColor() {
|
|
return `hsl(${Math.floor(360 * Math.random())}, 100%, 75%)`;
|
|
}
|
|
|
|
const colors = new Set();
|
|
viewer.on("image", (event) => {
|
|
const clusterId = event.image.clusterId;
|
|
if (colors.has(clusterId)) {
|
|
return;
|
|
}
|
|
colors.add(clusterId);
|
|
spatial.configureClusterColor(clusterId, randomColor());
|
|
});
|
|
|
|
const s = Object.assign({}, spatial.defaultConfiguration, {
|
|
imagesVisible: true,
|
|
});
|
|
|
|
const rotateCvm = (function () {
|
|
const camMode = CameraVisualizationMode;
|
|
const hidden = camMode.Hidden;
|
|
const homogeneous = camMode.Homogeneous;
|
|
const cluster = camMode.Cluster;
|
|
const connectedComponent = camMode.ConnectedComponent;
|
|
const sequence = camMode.Sequence;
|
|
const manual = camMode.Manual;
|
|
const camModeRotation = {};
|
|
camModeRotation[hidden] = homogeneous;
|
|
camModeRotation[homogeneous] = cluster;
|
|
camModeRotation[cluster] = connectedComponent;
|
|
camModeRotation[connectedComponent] = sequence;
|
|
camModeRotation[sequence] = manual;
|
|
camModeRotation[manual] = hidden;
|
|
|
|
return function () {
|
|
s.cameraVisualizationMode =
|
|
camModeRotation[s.cameraVisualizationMode];
|
|
configure("cameraVisualizationMode");
|
|
};
|
|
})();
|
|
|
|
const rotatePm = (function () {
|
|
const posMode = OriginalPositionMode;
|
|
const hidden = posMode.Hidden;
|
|
const flat = posMode.Flat;
|
|
const altitude = posMode.Altitude;
|
|
const posModeRotation = {};
|
|
posModeRotation[hidden] = flat;
|
|
posModeRotation[flat] = altitude;
|
|
posModeRotation[altitude] = hidden;
|
|
|
|
return function () {
|
|
s.originalPositionMode =
|
|
posModeRotation[s.originalPositionMode];
|
|
configure("originalPositionMode");
|
|
};
|
|
})();
|
|
|
|
const rotateCc = (function () {
|
|
const custom = CameraControls.Custom;
|
|
const earth = CameraControls.Earth;
|
|
const street = CameraControls.Street;
|
|
const camControlsRotation = {};
|
|
camControlsRotation[street] = custom;
|
|
camControlsRotation[custom] = earth;
|
|
camControlsRotation[earth] = street;
|
|
|
|
return function () {
|
|
cameraControls = camControlsRotation[cameraControls];
|
|
viewer.setCameraControls(cameraControls);
|
|
};
|
|
})();
|
|
|
|
const rotatePvm = (function () {
|
|
const hidden = PointVisualizationMode.Hidden;
|
|
const original = PointVisualizationMode.Original;
|
|
const cluster = PointVisualizationMode.Cluster;
|
|
const manual = PointVisualizationMode.Manual;
|
|
const pvmRotation = {};
|
|
pvmRotation[hidden] = original;
|
|
pvmRotation[original] = cluster;
|
|
pvmRotation[cluster] = manual;
|
|
pvmRotation[manual] = hidden;
|
|
|
|
return function () {
|
|
s.pointVisualizationMode =
|
|
pvmRotation[s.pointVisualizationMode];
|
|
configure("pointVisualizationMode");
|
|
};
|
|
})();
|
|
|
|
const setFilter = (function () {
|
|
let filterIndex = 0;
|
|
const filters = [
|
|
[],
|
|
["==", "cameraType", "spherical"],
|
|
["==", "sequenceId", "s5I5m7BvYykB677MpFnOIw"],
|
|
[
|
|
"in",
|
|
"sequenceId",
|
|
"s5I5m7BvYykB677MpFnOIw",
|
|
"-aC4wx-8oOkCp6SFGXoyAg",
|
|
],
|
|
];
|
|
|
|
return function () {
|
|
filterIndex = (filterIndex + 1) % filters.length;
|
|
viewer.setFilter(filters[filterIndex]).then(function (n) {
|
|
console.log("filter", filters[filterIndex]);
|
|
});
|
|
};
|
|
})();
|
|
|
|
function resetManualColor() {
|
|
for (const clusterId of colors.keys()) {
|
|
spatial.configureClusterColor(clusterId, randomColor());
|
|
}
|
|
}
|
|
|
|
window.document.addEventListener("keydown", (e) => {
|
|
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
|
|
return;
|
|
}
|
|
|
|
let name = undefined;
|
|
switch (e.key) {
|
|
case "t":
|
|
name = "cellsVisible";
|
|
break;
|
|
case "i":
|
|
toggleImages();
|
|
break;
|
|
case "l":
|
|
toggleSpatial();
|
|
break;
|
|
case "c":
|
|
rotateCvm();
|
|
break;
|
|
case "e":
|
|
viewer.reset();
|
|
break;
|
|
case "o":
|
|
rotatePm();
|
|
break;
|
|
case "r":
|
|
rotateCc();
|
|
break;
|
|
case "p":
|
|
rotatePvm();
|
|
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;
|
|
case "m":
|
|
resetManualColor();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
if (!!name) {
|
|
toggleBooleanSetting(name);
|
|
}
|
|
});
|
|
|
|
function toggleImages() {
|
|
s.imagesVisible = !s.imagesVisible;
|
|
if (s.imagesVisible) {
|
|
viewer.activateComponent("image");
|
|
} else {
|
|
viewer.deactivateComponent("image");
|
|
}
|
|
}
|
|
|
|
function toggleSpatial() {
|
|
spatialActive = !spatialActive;
|
|
if (spatialActive) {
|
|
viewer.activateComponent("spatial");
|
|
} else {
|
|
viewer.deactivateComponent("spatial");
|
|
}
|
|
}
|
|
|
|
function toggleBooleanSetting(name) {
|
|
s[name] = !s[name];
|
|
configure(name);
|
|
}
|
|
|
|
function changeSize(name, coeff) {
|
|
s[name] *= coeff;
|
|
s[name] = Math.max(1e-3, Math.min(1, s[name]));
|
|
configure(name);
|
|
}
|
|
|
|
function configure(name) {
|
|
const c = {};
|
|
c[name] = s[name];
|
|
spatial.configure(c);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|