255 lines
7.2 KiB
HTML
255 lines
7.2 KiB
HTML
<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://sheep-service.com/map/{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>
|