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

inspect vector tiles

Browse Source
This commit is contained in:
Brandon Liu
2021-12-29 20:30:22 +08:00
parent 3ff0bb3918
commit d02df6ecd7
1 changed files with 85 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
examples/inspector.html
View File

@@ -12,7 +12,7 @@
</head> </head>
<body class="sans-serif v-scroll bg-dark-gray flex"> <body class="sans-serif v-scroll bg-dark-gray flex">
<div class="w-50 vh-100 bg-light-gray pa4 flex flex-column"> <div class="w-50 vh-100 bg-light-gray pa4 flex flex-column">
<div class="f4 w-100" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"> <div class="f4 w-100 dn" id="inputPanel" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
<div class=" f4 fw5 dark-gray b--dark-gray ba4 b--dotted bw1 pa3">Drag and drop a local PMTiles file here...</div> <div class=" f4 fw5 dark-gray b--dark-gray ba4 b--dotted bw1 pa3">Drag and drop a local PMTiles file here...</div>
<div class="pv3"> <div class="pv3">
<div class="flex"> <div class="flex">
@@ -45,19 +45,97 @@
<div class="w-50 flex items-center justify-center"> <div class="w-50 flex items-center justify-center">
<div> <div>
<div id="preview_label" class="white mb2"></div> <div id="preview_label" class="white mb2"></div>
<img id="preview"></img> <div id="preview"></div>
</div> </div>
</div> </div>
<div id="tooltip" class="absolute pa1 bg-black white f6 dn">
</div>
</body> </body>
<script> <script type="module">
function loadEntry(file,row) { window.dragOverHandler = (ev) => {
ev.preventDefault();
}
let smartCompare = (a,b) => {
if (a.name === "earth") return -4
if (a.name === "water") return -3
if (a.name === "natural") return -2
if (a.name === "landuse") return -1
return 0
}
import {VectorTile} from "https://cdn.skypack.dev/@mapbox/vector-tile";
import Protobuf from "https://cdn.skypack.dev/pbf";
import {schemeSet3} from "https://cdn.skypack.dev/d3-scale-chromatic@3";
d3.select("#inputPanel").classed("dn",false);
let loadEntry = (file,format,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]}`);
let preview = d3.select("#preview").attr("src",imageUrl); d3.select("#preview").selectAll("*").remove();
if (format === "pbf") {
blob.arrayBuffer().then(a => {
let tile = new VectorTile(new Protobuf(a));
let data = [];
for (let [name,layer] of Object.entries(tile.layers)) {
let features = []
for (var i = 0; i < layer.length; i++) {
let feature = layer.feature(i);
let path = d3.path();
let geom = feature.loadGeometry();
for (let ring of geom) {
path.moveTo(ring[0].x,ring[0].y);
for (var j = 1; j < ring.length; j++) {
path.lineTo(ring[j].x,ring[j].y);
}
path.closePath();
}
features.push({path:path.toString(),type:feature.type,properties:feature.properties,id:feature.id})
}
data.push({name:name,features:features})
} }
function dropHandler(ev) { data.sort(smartCompare);
let svg = d3.select("#preview").append("svg").attr("viewBox","0 0 4096 4096").attr("width",600).attr("height",600);
let layers = svg.selectAll("g").data(data).enter().append("g").attr("color",(d,i) => { return schemeSet3[i % 12]});
let features = layers.selectAll("path").data(d => d.features).enter().append("path")
features.attr("d",d => d.path)
.attr("stroke",d => { return d.type === 2 ? "currentColor" : "" })
.attr("stroke-width",d => { return d.type === 2 ? 10 : undefined })
.attr("fill",d => { return d.type === 3 ? "currentColor" : "none" })
.attr("opacity",0.3);
features.on("mouseover", function(ev,d) {
d3.select(this).attr("color","white");
let tooltip = d3.select("#tooltip")
let rows = Object.entries(d.properties).map(a => `${a[0]}: ${a[1]}`);
rows.unshift(d3.select(this.parentNode).datum().name);
tooltip.classed("dn",false).selectAll("div")
.data(rows).enter().append("div")
.text(d => d);
})
features.on("mousemove", function(ev) {
let tooltip = d3.select("#tooltip")
.style("top",(ev.pageY+5) +"px")
.style("left",(ev.pageX+5) +"px")
})
features.on("mouseout", function(ev,d,i) {
d3.select(this).attr("color","currentColor");
let tooltip = d3.select("#tooltip")
tooltip.classed("dn",true)
.selectAll("div").remove();
})
});
} else {
d3.select("#preview").append("img").attr("src",imageUrl);
}
}
window.dropHandler = ev => {
ev.preventDefault(); ev.preventDefault();
var data = ev.dataTransfer.items; var data = ev.dataTransfer.items;
var file = data[0].getAsFile(); var file = data[0].getAsFile();
@@ -78,13 +156,10 @@
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, d); }); .attr("class","f6 pv1 dim pointer").on("click", (ev,d) => { loadEntry(file, metadata.format, 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);
}) })
} }
function dragOverHandler(ev) {
ev.preventDefault();
}
// const queryString = window.location.search; // const queryString = window.location.search;
// const urlParams = new URLSearchParams(queryString); // const urlParams = new URLSearchParams(queryString);