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

decompress vector tile preview correctly

Browse Source
This commit is contained in:
Brandon Liu
2022-07-06 23:52:53 +08:00
parent 12aa521b46
commit 419ae06a6e
2 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/src/Inspector.tsx
View File

@@ -142,7 +142,7 @@ const StyledFeatureProperties = styled("div", {
right: 0, right: 0,
bottom: 0, bottom: 0,
backgroundColor: "$black", backgroundColor: "$black",
padding: "$1" padding: "$1",
}); });
const FeatureProperties = (props: { feature: Feature }) => { const FeatureProperties = (props: { feature: Feature }) => {
@@ -168,13 +168,21 @@ const FeatureProperties = (props: { feature: Feature }) => {
); );
}; };
const VectorPreview = (props: { file: PMTiles; entry: Entry }) => { const VectorPreview = (props: {
file: PMTiles;
entry: Entry;
tileType: TileType;
}) => {
let [layers, setLayers] = useState<Layer[]>([]); let [layers, setLayers] = useState<Layer[]>([]);
let [selectedFeature, setSelectedFeature] = useState<Feature | null>(null); let [selectedFeature, setSelectedFeature] = useState<Feature | null>(null);
useEffect(() => { useEffect(() => {
let fn = async (entry: Entry) => { let fn = async (entry: Entry) => {
let view = await props.file.source.getBytes(entry.offset, entry.length); let view = await props.file.source.getBytes(entry.offset, entry.length);
if (props.tileType == TileType.MVT_GZ) {
view = new DataView(inflate(new Uint8Array(view.buffer)).buffer);
}
let tile = new VectorTile( let tile = new VectorTile(
new Protobuf( new Protobuf(
new Uint8Array(view.buffer, view.byteOffset, view.byteLength) new Uint8Array(view.buffer, view.byteOffset, view.byteLength)
@@ -285,8 +293,14 @@ function Inspector(props: { file: PMTiles }) {
let tilePreview = <div></div>; let tilePreview = <div></div>;
if (selectedEntry && tileType) { if (selectedEntry && tileType) {
if (tileType === TileType.MVT) { if (tileType === TileType.MVT || tileType === TileType.MVT_GZ) {
tilePreview = <VectorPreview file={props.file} entry={selectedEntry} />; tilePreview = (
<VectorPreview
file={props.file}
entry={selectedEntry}
tileType={tileType}
/>
);
} else { } else {
tilePreview = <RasterPreview file={props.file} entry={selectedEntry} />; tilePreview = <RasterPreview file={props.file} entry={selectedEntry} />;
} }

2
app/src/MaplibreMap.tsx
View File

@@ -116,7 +116,7 @@ function MaplibreMap(props: { file: PMTiles }) {
let initStyle = async () => { let initStyle = async () => {
if (map) { if (map) {
let metadata = await props.file.metadata(); let metadata = await props.file.metadata();
let bounds = metadata.bounds.split(','); let bounds = metadata.bounds.split(",");
map.fitBounds([ map.fitBounds([
[+bounds[0], +bounds[1]], [+bounds[0], +bounds[1]],
[+bounds[2], +bounds[3]], [+bounds[2], +bounds[3]],