-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
62 lines (50 loc) · 1.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<html>
<head>
<title>FlatGeobuf Drawing Experiment</title>
<script src="https://unpkg.com/flatgeobuf@3.22.0/dist/flatgeobuf-geojson.min.js"></script>
<script src="https://unpkg.com/json-formatter-js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-array@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-format@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-scale@4"></script>
</head>
<body>
<h1>FlatGeobuf Drawing Experiment</h1>
<p>Based on <a href="https://flatgeobuf.org/examples/leaflet/">https://flatgeobuf.org/examples/leaflet/</a></p>
<p>How fast can we draw <strong>a million</strong> points to a canvas context with FlatGeobuf?</p>
<canvas id="cnv" width="600" height="600"></canvas>
<script>
document.addEventListener("DOMContentLoaded", async () => {
const width = 600;
const height = 600;
const canvas = document.getElementById('cnv');
const ctx = canvas.getContext('2d');
const latScale = d3.scaleLinear()
.domain([-90, 90])
.range([10, height - 10])
const lonScale = d3.scaleLinear()
.domain([-180, 180])
.range([10, width - 10])
function handleHeaderMeta(headerMeta) {
const header = document.getElementById('header')
const formatter = new JSONFormatter(headerMeta, 10)
header.appendChild(formatter.render())
}
const response = await fetch("data/one_million_noindex.fgb");
console.log("Got response", response);
for await (let feature of flatgeobuf.deserialize(
response.body,
undefined,
handleHeaderMeta
)) {
const coords = feature.geometry.coordinates
ctx.fillRect(lonScale(coords[0]), latScale(coords[1]), 1, 1)
}
});
</script>
<div id="header">
<h3>Parsed header content</h3>
</div>
</body>
</html>