You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.9 KiB
57 lines
1.9 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Векторные тайлы</title>
|
|
<script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
|
|
<link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
|
|
</head>
|
|
<body>
|
|
<h1>Векторные тайлы</h1>
|
|
<ol id="tilesets-list"></ol>
|
|
<div id='map' style='width: 400px; height: 300px;'></div>
|
|
<script>
|
|
fetch("catalog.json")
|
|
.then((r) => r.json())
|
|
.then(
|
|
(tilesets) =>
|
|
(document.getElementById("tilesets-list").innerHTML = tilesets
|
|
.map((t) => {
|
|
return `
|
|
<li>
|
|
<p>URL: <a href="./${t.name}/{z}/{x}/{y}.pbf" onclick="event.preventDefault();navigator.clipboard.writeText(decodeURI(this.href))">https://vt.ru/${t.name}/{z}/{x}/{y}.pbf</a></p>
|
|
<p>Layer: <i>${JSON.parse(t.json).vector_layers[0].id}</i>
|
|
</li>
|
|
`;
|
|
})
|
|
.join(""))
|
|
);
|
|
var map = new maplibregl.Map({
|
|
container: 'map',
|
|
style: {
|
|
version: 8,
|
|
sources: {
|
|
land: {
|
|
type: "vector",
|
|
tiles: ["http://localhost:5500/land/{z}/{x}/{y}.pbf"],
|
|
maxzoom: 0
|
|
}
|
|
},
|
|
layers: [
|
|
{
|
|
id: "land-layer",
|
|
source: "land",
|
|
"source-layer": "land",
|
|
type: "fill"
|
|
}
|
|
]
|
|
}, // stylesheet location
|
|
center: [-74.5, 40], // starting position [lng, lat]
|
|
zoom: 0 // starting zoom
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|