v0.0.1
This commit is contained in:
254
web/screenshot.html
Normal file
254
web/screenshot.html
Normal file
@@ -0,0 +1,254 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="/lib/components/leaflet/leaflet.css" />
|
||||
<script src="/lib/components/leaflet/leaflet.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="/lib/components/geoman/leaflet-geoman.css" />
|
||||
<script src="/lib/components/geoman/leaflet-geoman.min.js"></script>
|
||||
|
||||
<script src="/lib/components/turf.min.js" defer></script>
|
||||
|
||||
<script src="/lib/components/qrcode.min.js"></script>
|
||||
<style>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
|
||||
|
||||
* {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
font-family: "Roboto", sans-serif;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
outline: none;
|
||||
}
|
||||
#content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#content > #title {
|
||||
width: calc(100% - 30px);
|
||||
min-height: 120px;
|
||||
background: rgb(255 255 255 / 51%);
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
align-items: center;
|
||||
color: #333;
|
||||
}
|
||||
#content > #title > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
#content > #title > h1 {
|
||||
font-size: 65px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
min-width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
#content > #title > div > h2 {
|
||||
font-size: 45px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
#content > #title > div > h3 {
|
||||
font-size: 38px;
|
||||
font-weight: 500;
|
||||
margin: 0px 0 10px 0;
|
||||
}
|
||||
|
||||
#qrcode {
|
||||
position: absolute;
|
||||
bottom: 160px;
|
||||
left: 20px;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.line-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 150px;
|
||||
width: 10px;
|
||||
height: calc(100% - 150px);
|
||||
background: rgb(255 255 255 / 51%);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.line-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 150px;
|
||||
width: 10px;
|
||||
height: calc(100% - 150px);
|
||||
background: rgb(255 255 255 / 51%);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.line-bottom {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 0;
|
||||
width: calc(100% - 20px);
|
||||
height: 150px;
|
||||
background: rgb(255 255 255 / 51%);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<div id="title">
|
||||
<div>
|
||||
<h3>Картка плану території</h3>
|
||||
<h2 id="address"></h2>
|
||||
</div>
|
||||
<h1 id="number"></h1>
|
||||
</div>
|
||||
|
||||
<div id="qrcode"></div>
|
||||
|
||||
<div class="line-left"></div>
|
||||
<div class="line-right"></div>
|
||||
<div class="line-bottom"></div>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
<script>
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
|
||||
let center = {
|
||||
lat: urlParams.get("lat") ?? 49.589443,
|
||||
lng: urlParams.get("lng") ?? 25.5812376,
|
||||
};
|
||||
let zoom = urlParams.get("zoom") ?? 19;
|
||||
let type = urlParams.get("type") ?? "homestead";
|
||||
let wayIds = urlParams.get("wayId") ?? "396982388";
|
||||
let address = urlParams.get("address") ?? "Житловий район";
|
||||
let number = urlParams.get("number") ?? 36;
|
||||
|
||||
let map = L.map("map", {
|
||||
renderer: L.canvas(),
|
||||
center,
|
||||
zoom,
|
||||
zoomControl: false,
|
||||
});
|
||||
let layer = L.tileLayer("https://tm.rozenrod.com/webp/{z}/{x}/{y}.webp", {
|
||||
maxZoom: 20,
|
||||
minZoom: 15,
|
||||
tms: true,
|
||||
}).addTo(map);
|
||||
|
||||
window.onload = async function () {
|
||||
if (type && wayIds) {
|
||||
new QRCode(document.getElementById("qrcode"), {
|
||||
text: `https://www.google.com/maps/search/?api=1&query=${center.lat},${center.lng}`, // Ваша ссылка
|
||||
width: 130,
|
||||
height: 130,
|
||||
correctLevel: QRCode.CorrectLevel.L, // Минимальный уровень коррекции (меньше деталей)
|
||||
version: 5,
|
||||
});
|
||||
|
||||
let wayId = wayIds.split(",");
|
||||
|
||||
console.log(wayId);
|
||||
|
||||
for (let i = 0; i < wayId.length; i++) {
|
||||
const element = wayId[i];
|
||||
let geo = await getOSM(element);
|
||||
|
||||
let coords = [];
|
||||
geo[0].forEach((feature) =>
|
||||
coords.push([feature.lat, feature.lng])
|
||||
);
|
||||
|
||||
let centerPoint = turf.centerOfMass(turf.polygon([coords]));
|
||||
console.log(centerPoint);
|
||||
|
||||
if (!urlParams.get("lat")) {
|
||||
map.setView(
|
||||
[
|
||||
centerPoint.geometry.coordinates[0],
|
||||
centerPoint.geometry.coordinates[1],
|
||||
],
|
||||
urlParams.get("zoom") ?? 17
|
||||
);
|
||||
document.getElementById("qrcode").innerHTML = "";
|
||||
new QRCode(document.getElementById("qrcode"), {
|
||||
text: `https://www.google.com/maps/search/?api=1&query=${centerPoint.geometry.coordinates[0]},${centerPoint.geometry.coordinates[1]}`, // Ваша ссылка
|
||||
width: 130,
|
||||
height: 130,
|
||||
});
|
||||
}
|
||||
|
||||
if (type == "house") {
|
||||
document.getElementById("address").innerText = address;
|
||||
document.getElementById("number").innerText = "T" + number;
|
||||
L.polygon(geo, {
|
||||
color: "#a12121",
|
||||
fillColor: "#c12525",
|
||||
fillOpacity: 0.4,
|
||||
}).addTo(map);
|
||||
} else if (type == "homestead") {
|
||||
document.getElementById("address").innerText = address;
|
||||
document.getElementById("number").innerText = "H" + number;
|
||||
L.polygon(geo, {
|
||||
color: "#a12121",
|
||||
fillColor: "#c12525",
|
||||
radius: 500,
|
||||
fillOpacity: 0.3,
|
||||
dashArray: "20, 15",
|
||||
dashOffset: "20",
|
||||
}).addTo(map);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function getOSM(wayId) {
|
||||
const overpassUrl = `https://overpass-api.de/api/interpreter?data=[out:json];way(${wayId});(._;>;);out;`;
|
||||
|
||||
return await fetch(overpassUrl)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
const nodes = new Map();
|
||||
|
||||
data.elements.forEach((el) => {
|
||||
if (el.type === "node") {
|
||||
nodes.set(el.id, { lat: el.lat, lng: el.lon });
|
||||
}
|
||||
});
|
||||
|
||||
const way = data.elements.find((el) => el.type === "way");
|
||||
if (way) {
|
||||
const coordinates = way.nodes.map((nodeId) =>
|
||||
nodes.get(nodeId)
|
||||
);
|
||||
console.log("Координаты точек:", coordinates);
|
||||
|
||||
return [coordinates];
|
||||
} else {
|
||||
console.log("Way не найден!");
|
||||
}
|
||||
})
|
||||
.catch((error) => console.error("Ошибка запроса:", error));
|
||||
}
|
||||
|
||||
layer.on("load", () => {
|
||||
window.status = "ready";
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user