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

visualize vector point layers

Browse Source
This commit is contained in:
Brandon Liu
2021-12-29 21:06:33 +08:00
parent 998848614e
commit fb4aa544d9
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
examples/inspector.html
View File

@@ -14,13 +14,13 @@
<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 dn" id="inputPanel" 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">
<input placeholder="PMTiles file url (not yet implemented)" class="flex-grow-1 f6"/> <input placeholder="PMTiles file url (not yet implemented)" class="flex-grow-1 f6"/>
<button class="ml3 link bg-white dim ba pointer">Inspect</button> <button class="ml3 link bg-white dim ba pointer">Inspect</button>
</div> </div>
</div> </div>
</div> --> </div>
<div class="fw5 f6 mt2">spec version: <span id="spec_version">?</span></div> <div class="fw5 f6 mt2">spec version: <span id="spec_version">?</span></div>
<div class="fw5 f6 mt2">metadata length: <span id="metadata_length">?</span></div> <div class="fw5 f6 mt2">metadata length: <span id="metadata_length">?</span></div>
<div id="metadata" class="f6"></div> <div id="metadata" class="f6"></div>
@@ -61,7 +61,9 @@
if (a.name === "water") return -3 if (a.name === "water") return -3
if (a.name === "natural") return -2 if (a.name === "natural") return -2
if (a.name === "landuse") return -1 if (a.name === "landuse") return -1
if (a.name === "places") return 1
return 0 return 0
} }
import {VectorTile} from "https://cdn.skypack.dev/@mapbox/vector-tile"; import {VectorTile} from "https://cdn.skypack.dev/@mapbox/vector-tile";
@@ -84,6 +86,14 @@
let feature = layer.feature(i); let feature = layer.feature(i);
let path = d3.path(); let path = d3.path();
let geom = feature.loadGeometry(); let geom = feature.loadGeometry();
if (feature.type === 1) {
for (let ring of geom) {
for (let pt of ring) {
path.arc(pt.x,pt.y,20,0, 2*Math.PI);
}
}
} else {
for (let ring of geom) { for (let ring of geom) {
path.moveTo(ring[0].x,ring[0].y); path.moveTo(ring[0].x,ring[0].y);
for (var j = 1; j < ring.length; j++) { for (var j = 1; j < ring.length; j++) {
@@ -91,6 +101,7 @@
} }
path.closePath(); path.closePath();
} }
}
features.push({path:path.toString(),type:feature.type,properties:feature.properties,id:feature.id}) features.push({path:path.toString(),type:feature.type,properties:feature.properties,id:feature.id})
} }
data.push({name:name,features:features}) data.push({name:name,features:features})
@@ -105,8 +116,9 @@
features.attr("d",d => d.path) features.attr("d",d => d.path)
.attr("stroke",d => { return d.type === 2 ? "currentColor" : "" }) .attr("stroke",d => { return d.type === 2 ? "currentColor" : "" })
.attr("stroke-width",d => { return d.type === 2 ? 10 : undefined }) .attr("stroke-width",d => { return d.type === 2 ? 10 : undefined })
.attr("fill",d => { return d.type === 3 ? "currentColor" : "none" }) .attr("fill",d => { return d.type === 2 ? "none" : "currentColor" })
.attr("opacity",0.3); .attr("fill-opacity",d => { d.type === 3 ? 1 : 0.5 })
.attr("stroke-opacity",0.5);
features.on("mouseover", function(ev,d) { features.on("mouseover", function(ev,d) {
d3.select(this).attr("color","white"); d3.select(this).attr("color","white");