mirror of
https://github.com/mapillary/mapillary-js.git
synced 2026-01-18 13:56:53 +00:00
132 lines
4.2 KiB
HTML
132 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>MapillaryJS Marker</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 {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#mly {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="mly"></div>
|
|
|
|
<script type="module">
|
|
import {
|
|
MarkerComponent as Marker,
|
|
Viewer,
|
|
} from './dist/mapillary.module.js';
|
|
|
|
const mly = new Viewer({
|
|
apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
|
|
component: { cover: false, marker: true },
|
|
container: "mly",
|
|
});
|
|
|
|
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 lngLat
|
|
const createRandomMarkers = function (start, count, lngLat) {
|
|
const getRandomUniform = function (min, max) {
|
|
return Math.random() * (max - min) + min;
|
|
};
|
|
|
|
const t0 = window.performance.now();
|
|
const boxWidth = 0.1;
|
|
|
|
const minLat = lngLat.lat - boxWidth / 2;
|
|
const maxLat = lngLat.lat + boxWidth / 2;
|
|
const minLng = lngLat.lng - boxWidth / 2;
|
|
const maxLng = lngLat.lng + boxWidth / 2;
|
|
|
|
const markers = [];
|
|
for (let i = start; i < start + count; i++) {
|
|
const lat = getRandomUniform(minLat, maxLat);
|
|
const lng = getRandomUniform(minLng, maxLng);
|
|
|
|
const marker = new Marker.SimpleMarker(
|
|
i.toString(),
|
|
{ lat: lat, lng: lng, },
|
|
{ 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 image has been set
|
|
mly.moveTo("6Zhtztzt67fWmdd4OYH44w")
|
|
.then(
|
|
function (n) {
|
|
let intervalId = window.setInterval(function () {
|
|
const markers = createRandomMarkers(markerCount, batchSize, n.lngLat);
|
|
addMarkers(markers);
|
|
|
|
markerCount += batchSize;
|
|
|
|
if (markerCount >= 1e6) {
|
|
window.clearInterval(intervalId);
|
|
logTimes();
|
|
}
|
|
},
|
|
5);
|
|
},
|
|
function (e) { console.error(e); });
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|