Add import TMS tiles (directory/zip) and tif formatter

This commit is contained in:
parent e39361bd81
commit a5de6f5c91
6 changed files with 127 additions and 19 deletions

View file

@ -26,6 +26,7 @@ type IncomingMessage = FixMessage | StatusMessage;
type AppConfig = {
tiles_url: string;
tiles_url_tms?: string;
ws_url: string;
gnss_source: string;
};
@ -80,6 +81,8 @@ export default function App() {
min_zoom: 10,
max_zoom: 16,
tile_format: "png",
scheme: "xyz" as "xyz" | "tms",
source_format: "geotiff" as "geotiff" | "mbtiles" | "tms" | "xyz",
});
const [sliceStatus, setSliceStatus] = useState<string>("idle");
@ -191,7 +194,12 @@ export default function App() {
);
const tileUrl =
config && `${backendBase.replace(/\/+$/, "")}${config.tiles_url || "/tiles/{z}/{x}/{y}.png"}`;
config &&
`${backendBase.replace(/\/+$/, "")}${
sliceParams.scheme === "tms"
? config.tiles_url_tms || "/tiles/tms/{z}/{x}/{y}.png"
: config.tiles_url || "/tiles/{z}/{x}/{y}.png"
}`;
return (
<div className="layout">
@ -230,7 +238,7 @@ export default function App() {
<section className="panel map-panel">
{tileUrl ? (
<MapContainer center={defaultCenter} zoom={13} scrollWheelZoom className="map">
<TileLayer url={tileUrl} attribution="Local tiles" />
<TileLayer url={tileUrl} attribution="Local tiles" tms={sliceParams.scheme === "tms"} />
{positions.length > 0 && (
<>
<Polyline positions={positions} pathOptions={{ color: "#7dd3fc", weight: 5, opacity: 0.9 }} />
@ -268,6 +276,8 @@ export default function App() {
min_zoom: Number(sliceParams.min_zoom),
max_zoom: Number(sliceParams.max_zoom),
tile_format: sliceParams.tile_format,
scheme: sliceParams.scheme,
source_format: sliceParams.source_format,
}),
})
.then((r) => (r.ok ? r.json() : r.json().then((j) => Promise.reject(j.detail || r.status))))
@ -309,6 +319,33 @@ export default function App() {
</div>
{selectedFileName && <small className="muted">Файл: {selectedFileName}</small>}
</label>
<label className="field">
<span>Схема тайлов</span>
<select
value={sliceParams.scheme}
onChange={(e) => setSliceParams((p) => ({ ...p, scheme: e.target.value as "xyz" | "tms" }))}
>
<option value="xyz">XYZ (Y сверху, Leaflet)</option>
<option value="tms">TMS (Y снизу)</option>
</select>
</label>
<label className="field">
<span>Формат исходника</span>
<select
value={sliceParams.source_format}
onChange={(e) =>
setSliceParams((p) => ({
...p,
source_format: e.target.value as "geotiff" | "mbtiles" | "tms" | "xyz",
}))
}
>
<option value="geotiff">GeoTIFF/растровый TIFF</option>
<option value="mbtiles">MBTiles (растровый)</option>
<option value="tms">Папка TMS</option>
<option value="xyz">Папка XYZ</option>
</select>
</label>
<label className="field">
<span>Папка тайлов (опц.)</span>
<input
@ -339,13 +376,12 @@ export default function App() {
/>
</label>
<label className="field">
<span>Формат</span>
<span>Формат тайлов (сейчас поддерживается PNG)</span>
<select
value={sliceParams.tile_format}
onChange={(e) => setSliceParams((p) => ({ ...p, tile_format: e.target.value }))}
>
<option value="png">png</option>
<option value="jpeg">jpeg</option>
</select>
</label>
<div className="field actions">
@ -362,6 +398,8 @@ export default function App() {
min_zoom: 10,
max_zoom: 16,
tile_format: "png",
scheme: "xyz",
source_format: "geotiff",
})
}
>