mirrors/PMTiles
1
0
Fork 0
mirror of https://github.com/protomaps/PMTiles.git synced 2026-02-04 10:51:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

PMTiles web inspector uses pako for compressed vector tiles [#26]

Browse Source
This commit is contained in:
Brandon Liu
2022-01-23 13:31:38 +08:00
parent fb4aa544d9
commit 7eea0bb8a3
1 changed files with 60 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
examples/inspector.html
View File

@@ -69,19 +69,23 @@
import {VectorTile} from "https://cdn.skypack.dev/@mapbox/vector-tile"; import {VectorTile} from "https://cdn.skypack.dev/@mapbox/vector-tile";
import Protobuf from "https://cdn.skypack.dev/pbf"; import Protobuf from "https://cdn.skypack.dev/pbf";
import {schemeSet3} from "https://cdn.skypack.dev/d3-scale-chromatic@3"; import {schemeSet3} from "https://cdn.skypack.dev/d3-scale-chromatic@3";
import pako from "https://cdn.skypack.dev/pako";
d3.select("#inputPanel").classed("dn",false); d3.select("#inputPanel").classed("dn",false);
let loadEntry = (file,format,row) => { let loadEntry = async (file,format,compression,row) => {
var blob = file.slice(row[3],row[3]+row[4]); var blob = file.slice(row[3],row[3]+row[4]);
var imageUrl = window.URL.createObjectURL(blob); var imageUrl = window.URL.createObjectURL(blob);
d3.select("#preview_label").text(`${row[0]} ${row[1]} ${row[2]}`); d3.select("#preview_label").text(`${row[0]} ${row[1]} ${row[2]}`);
d3.select("#preview").selectAll("*").remove(); d3.select("#preview").selectAll("*").remove();
if (format === "pbf") { if (format === "pbf") {
blob.arrayBuffer().then(a => { var a = await blob.arrayBuffer();
if (compression === "gzip") {
a = pako.inflate(a);
}
let tile = new VectorTile(new Protobuf(a)); let tile = new VectorTile(new Protobuf(a));
let data = []; let data = [];
for (let [name,layer] of Object.entries(tile.layers)) { for (let [name,layer] of Object.entries(tile.layers)) {
let features = [] let features = [];
for (var i = 0; i < layer.length; i++) { for (var i = 0; i < layer.length; i++) {
let feature = layer.feature(i); let feature = layer.feature(i);
let path = d3.path(); let path = d3.path();
@@ -141,7 +145,6 @@
tooltip.classed("dn",true) tooltip.classed("dn",true)
.selectAll("div").remove(); .selectAll("div").remove();
}) })
});
} else { } else {
d3.select("#preview").append("img").attr("src",imageUrl); d3.select("#preview").append("img").attr("src",imageUrl);
} }
@@ -168,7 +171,7 @@
entries.push(pmtiles.parseEntry(entries_view,i)); entries.push(pmtiles.parseEntry(entries_view,i));
} }
let row = d3.select("#root_entries").selectAll("tr").data(entries).enter().append("tr") let row = d3.select("#root_entries").selectAll("tr").data(entries).enter().append("tr")
.attr("class","f6 pv1 dim pointer").on("click", (ev,d) => { loadEntry(file, metadata.format, d); }); .attr("class","f6 pv1 dim pointer").on("click", (ev,d) => { loadEntry(file, metadata.format, metadata.compression, d); });
row.selectAll("td").data(d => d).enter().append("td").text(d => d); row.selectAll("td").data(d => d).enter().append("td").text(d => d);
}) })
} }