mirror of
https://github.com/mapillary/mapillary-js.git
synced 2026-01-18 13:56:53 +00:00
d7417c0dde
Improve performance for tags, popups, spatial, render camera etc by avoiding costly matrix inversion for each unproject.
129 lines
4.2 KiB
HTML
129 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>MapillaryJS Popup</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-viewer-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<script type="module">
|
|
import {
|
|
Alignment,
|
|
PopupComponent as PopupComp,
|
|
TagComponent as TagComp,
|
|
Viewer,
|
|
} from '../dist/mapillary.module.js';
|
|
|
|
// Change popup point or rect based on tag geometry
|
|
function onGeometryChanged(tag) {
|
|
const popup = tagPopups[tag.id].popup;
|
|
popup.setBasicRect(tag.geometry.rect);
|
|
}
|
|
|
|
function createPopup(label) {
|
|
const popupOptions = {
|
|
float: Alignment.Top,
|
|
position: Alignment.Top,
|
|
};
|
|
const popup = new PopupComp.Popup(popupOptions);
|
|
const span = document.createElement('span');
|
|
span.innerHTML = label;
|
|
popup.setDOMContent(span);
|
|
return popup;
|
|
}
|
|
|
|
async function createTagPopups(id) {
|
|
return new Promise((resolve) => {
|
|
const amount = 1000;
|
|
const rows = Math.floor(Math.sqrt(amount));
|
|
const cols = rows;
|
|
const itemWidth = 1 / cols;
|
|
const itemHeight = 1 / rows;
|
|
const paddingX = itemWidth / 10;
|
|
const paddingY = itemHeight / 10;
|
|
const tagPopups = {};
|
|
for (let col = 0; col < cols; ++col) {
|
|
for (let row = 0; row < rows; ++row) {
|
|
const x0 = col / cols + paddingX;
|
|
const x1 = x0 + itemWidth - 2 * paddingX;
|
|
const y0 = row / rows + paddingY;
|
|
const y1 = y0 + itemHeight - 2 * paddingY;
|
|
const rect = [x0, y0, x1, y1];
|
|
const geometry = new TagComp.RectGeometry(rect);
|
|
const id = `tag-id-${row}-${col}`;
|
|
const options = { editable: false };
|
|
const tag = new TagComp.OutlineTag(id, geometry, options);
|
|
tag.on('geometrychanged', onGeometryChanged);
|
|
const popup = createPopup(id);
|
|
popup.setBasicRect(rect);
|
|
tagPopups[id] = { popup, tag };
|
|
}
|
|
}
|
|
resolve(tagPopups);
|
|
})
|
|
}
|
|
|
|
function initViewer() {
|
|
const container = document.createElement('div');
|
|
container.className = 'mly-viewer-container';
|
|
document.body.appendChild(container);
|
|
const viewerOptions = {
|
|
apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
|
|
component: {
|
|
cover: false,
|
|
popup: true,
|
|
tag: true,
|
|
},
|
|
container,
|
|
};
|
|
const viewer = new Viewer(viewerOptions);
|
|
window.addEventListener("resize", () => { viewer.resize(); });
|
|
viewer.moveTo("FnqSkFAZXjv4Uqmqd4X_NA")
|
|
.catch(error => console.error(error));
|
|
return viewer;
|
|
}
|
|
|
|
const viewer = initViewer();
|
|
|
|
const tagPopups = await createTagPopups();
|
|
const popups = Object
|
|
.keys(tagPopups)
|
|
.map(id => tagPopups[id].popup);
|
|
const tags = Object
|
|
.keys(tagPopups)
|
|
.map(id => tagPopups[id].tag);
|
|
|
|
const popupComp = viewer.getComponent('popup');
|
|
const tagComp = viewer.getComponent('tag');
|
|
|
|
const onNodeChanged = () => {
|
|
tagComp.removeAll();
|
|
tagComp.add(tags);
|
|
popupComp.removeAll();
|
|
popupComp.add(popups);
|
|
}
|
|
viewer.on('nodechanged', onNodeChanged);
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|