mirror of
https://github.com/mapillary/mapillary-js.git
synced 2026-01-18 13:56:53 +00:00
116 lines
4.1 KiB
HTML
116 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>MapillaryJS Markers Debug Page</title>
|
|
<meta charset='utf-8'>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
|
|
<script src='dist/mapillary.js'></script>
|
|
<link rel='stylesheet' href='dist/mapillary.min.css' />
|
|
<style>
|
|
body { margin: 0; padding: 0; }
|
|
html, body { width: 100%; height: 100%; }
|
|
#viewer { width: 100%; height: 100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id='viewer'></div>
|
|
<script>
|
|
const mly = new Mapillary.Viewer(
|
|
'viewer',
|
|
'QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh',
|
|
null,
|
|
{
|
|
component: {
|
|
cover: false,
|
|
marker: true,
|
|
stats: false,
|
|
},
|
|
});
|
|
|
|
const createTimes = [];
|
|
const addTimes = [];
|
|
const batchSize = 1000;
|
|
let markerCount = 0;
|
|
|
|
const markerComponent = mly.getComponent("marker");
|
|
|
|
// Log performance results
|
|
const logTimes = function() {
|
|
const totalCreateTime = createTimes
|
|
.reduce(function(acc, val) { return acc + val; }, 0);
|
|
|
|
const totalAddTime = addTimes
|
|
.reduce(function(acc, val) { return acc + val; }, 0);
|
|
|
|
console.log("Markers added:", markerCount);
|
|
console.log("Batch size:", batchSize);
|
|
console.log("Total create time:", totalCreateTime.toFixed(2));
|
|
console.log("Average batch create time:", (totalCreateTime / createTimes.length).toFixed(2));
|
|
console.log("Average marker create time:", (totalCreateTime / createTimes.length / batchSize).toFixed(4));
|
|
console.log("Total add time:", totalAddTime.toFixed(2));
|
|
console.log("Average batch add time:", (totalAddTime / addTimes.length).toFixed(2));
|
|
console.log("Average marker add time:", (totalAddTime / addTimes.length / batchSize).toFixed(4));
|
|
};
|
|
|
|
// Create markers in a bounding box with center at latLon
|
|
const createRandomMarkers = function(start, count, latLon) {
|
|
const getRandomUniform = function(min, max) {
|
|
return Math.random() * (max - min) + min;
|
|
};
|
|
|
|
const t0 = window.performance.now();
|
|
const boxWidth = 0.1;
|
|
|
|
const minLat = latLon.lat - boxWidth / 2;
|
|
const maxLat = latLon.lat + boxWidth / 2;
|
|
const minLon = latLon.lon - boxWidth / 2;
|
|
const maxLon = latLon.lon + boxWidth / 2;
|
|
|
|
const markers = [];
|
|
for (let i = start; i < start + count; i++) {
|
|
const lat = getRandomUniform(minLat, maxLat);
|
|
const lon = getRandomUniform(minLon, maxLon);
|
|
|
|
const marker = new Mapillary.MarkerComponent.SimpleMarker(
|
|
i.toString(), { lat: lat, lon: lon, }, { interactive: true });
|
|
|
|
markers.push(marker);
|
|
}
|
|
|
|
createTimes.push(window.performance.now() - t0);
|
|
|
|
return markers;
|
|
};
|
|
|
|
// Add markers to component in batch
|
|
const addMarkers = function(markers) {
|
|
const t0 = window.performance.now();
|
|
markerComponent.add(markers);
|
|
addTimes.push(window.performance.now() - t0);
|
|
};
|
|
|
|
// Start creating and adding markers when node has been set
|
|
mly.moveToKey('6Zhtztzt67fWmdd4OYH44w')
|
|
.then(
|
|
function(n) {
|
|
let intervalId = window.setInterval(function() {
|
|
const markers = createRandomMarkers(markerCount, batchSize, n.latLon);
|
|
addMarkers(markers);
|
|
|
|
markerCount += batchSize;
|
|
|
|
if (markerCount >= 1e6) {
|
|
window.clearInterval(intervalId);
|
|
logTimes();
|
|
}
|
|
},
|
|
5);
|
|
},
|
|
function(e) { console.error(e); });
|
|
|
|
window.addEventListener('resize', function() { mly.resize(); });
|
|
</script>
|
|
</body>
|
|
</html>
|