mirror of
https://github.com/mapillary/mapillary-js.git
synced 2026-01-18 13:56:53 +00:00
1d4c7c48ee
Filter spatial cameras based on graph filter function. Emit filter function from graph service. Use threejs layer for interactive object filtering.
126 lines
3.9 KiB
HTML
126 lines
3.9 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 mode = Mapillary.SpatialDataComponent.CameraVisualizationMode;
|
|
const none = mode.Default;
|
|
const cluster = mode.Cluster;
|
|
const connectedComponent = mode.ConnectedComponent;
|
|
const sequence = mode.Sequence;
|
|
|
|
const modeRotation = {};
|
|
modeRotation[none] = cluster;
|
|
modeRotation[cluster] = connectedComponent;
|
|
modeRotation[connectedComponent] = sequence;
|
|
modeRotation[sequence] = none;
|
|
|
|
function toggleImages() {
|
|
s.imagesVisible = !s.imagesVisible;
|
|
if (s.imagesVisible) { viewer.activateComponent("imagePlane"); }
|
|
else { viewer.deactivateComponent("imagePlane"); }
|
|
}
|
|
|
|
function rotateCvm() {
|
|
s.cameraVisualizationMode = modeRotation[s.cameraVisualizationMode];
|
|
configure("cameraVisualizationMode");
|
|
}
|
|
|
|
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 'o': name = 'positionsVisible'; break;
|
|
case 't': name = 'tilesVisible'; break;
|
|
case 'i': toggleImages(); break;
|
|
case 'v': rotateCvm(); 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>
|