731 lines
36 KiB
JavaScript
731 lines
36 KiB
JavaScript
let map, houseGroup, entransePolygonsGroup, entranseNumPolygonsGroup, splitPolygonsGroup, RectangleGroup;
|
||
let numApartments = 1;
|
||
let mode = '';
|
||
|
||
|
||
const Constructor = {
|
||
info: {
|
||
type: null,
|
||
group_id: null,
|
||
title: null,
|
||
number: null,
|
||
points: [],
|
||
points_number: [],
|
||
point_icons: [],
|
||
geo: [],
|
||
osm_id: [],
|
||
settlement: [],
|
||
description: null,
|
||
entrance: [],
|
||
apartments: {},
|
||
zoom: null
|
||
},
|
||
init: async () => {
|
||
let html = await fetch('/lib/pages/constructor/index.html').then((response) => response.text());
|
||
app.innerHTML = html;
|
||
|
||
map = "";
|
||
map = "";
|
||
houseGroup = "";
|
||
entransePolygonsGroup = "";
|
||
entranseNumPolygonsGroup = "";
|
||
splitPolygonsGroup = "";
|
||
RectangleGroup = "";
|
||
numApartments = 1;
|
||
|
||
Constructor.apartments.init();
|
||
|
||
document.querySelectorAll('input[name="info-type"]').forEach(radio => {
|
||
radio.addEventListener('change', event => {
|
||
console.log(`Выбран: ${event.target.value}`);
|
||
Constructor.info.type = event.target.value;
|
||
|
||
let detailsInfo_number = document.getElementById('details-info-number');
|
||
let detailsInfo_osm = document.getElementById('details-info-osm');
|
||
let detailsInfo_number_title = document.getElementById('info-number-title');
|
||
let detailsInfo_osm_title = document.getElementById('info-osm-title');
|
||
|
||
let detailsMap_title = document.getElementById('details-map-title');
|
||
let detailsMap_buttons_entranse = document.getElementById('details-map-buttons-entranse');
|
||
let detailsMap_buttons_homestead = document.getElementById('details-map-buttons-homestead');
|
||
let detailsMap_button = document.getElementById('map-form-button');
|
||
|
||
|
||
let detailsArea = document.getElementById('details-area');
|
||
|
||
switch (event.target.value) {
|
||
case 'points':
|
||
detailsInfo_number.style.display = "none";
|
||
detailsInfo_osm.style.display = "none";
|
||
detailsInfo_number_title.removeAttribute("required");
|
||
detailsInfo_osm_title.removeAttribute("required");
|
||
|
||
detailsMap_title.innerHTML = "<span>Крок 2.</span> Створення точок на карті"
|
||
detailsMap_buttons_entranse.style.display = "none";
|
||
detailsMap_buttons_homestead.style.display = "none";
|
||
detailsMap_button.innerText = "Зберегти";
|
||
|
||
detailsArea.style.display = "none";
|
||
break;
|
||
|
||
case 'homestead':
|
||
detailsInfo_number.style.display = "";
|
||
detailsInfo_osm.style.display = "";
|
||
detailsInfo_number_title.setAttribute("required", "");
|
||
detailsInfo_osm_title.setAttribute("required", "");
|
||
|
||
detailsMap_title.innerHTML = "<span>Крок 2.</span> Створення житлових територій"
|
||
detailsMap_buttons_entranse.style.display = "none";
|
||
detailsMap_buttons_homestead.style.display = "";
|
||
detailsMap_button.innerText = "Зберегти";
|
||
|
||
detailsArea.style.display = "none";
|
||
break;
|
||
|
||
default:
|
||
detailsInfo_number.style.display = "";
|
||
detailsInfo_osm.style.display = "";
|
||
detailsInfo_number_title.setAttribute("required", "");
|
||
detailsInfo_osm_title.setAttribute("required", "");
|
||
|
||
detailsMap_title.innerHTML = "<span>Крок 2.</span> Створення підʼїздів"
|
||
detailsMap_buttons_entranse.style.display = "";
|
||
detailsMap_buttons_homestead.style.display = "none";
|
||
detailsMap_button.innerText = "Далі";
|
||
|
||
detailsArea.style.display = "";
|
||
break;
|
||
}
|
||
});
|
||
});
|
||
|
||
document.getElementById("info-form").addEventListener("submit", function (event) {
|
||
event.preventDefault();
|
||
|
||
let details_map = document.getElementById("details-map");
|
||
details_map.removeAttribute("disabled");
|
||
details_map.open = true;
|
||
|
||
const infoForm = document.getElementById("info-form");
|
||
let osm = () => {
|
||
const a = document.getElementById("info-osm-title").value;
|
||
const b = a.replace(/\s+/g, "").split(',')
|
||
|
||
return b;
|
||
}
|
||
|
||
Constructor.info.type = infoForm.querySelector('input[name="info-type"]:checked').value;
|
||
Constructor.info.title = document.getElementById("info-address-title").value;
|
||
Constructor.info.number = document.getElementById("info-number-title").value;
|
||
Constructor.info.settlement = document.getElementById("info-settlement-title").value;
|
||
Constructor.info.group_id = Number(document.getElementById("info-group-title").value);
|
||
Constructor.info.osm_id = osm();
|
||
|
||
Constructor.osm.init();
|
||
|
||
Constructor.osm.setMap();
|
||
})
|
||
|
||
document.getElementById("map-form").addEventListener("submit", async function (event) {
|
||
event.preventDefault();
|
||
|
||
let details_area = document.getElementById("details-area");
|
||
details_area.removeAttribute("disabled");
|
||
details_area.open = true;
|
||
|
||
switch (Constructor.info.type) {
|
||
case 'points':
|
||
|
||
break;
|
||
|
||
case 'homestead':
|
||
await Constructor.api.setPack();
|
||
break;
|
||
|
||
default:
|
||
let details_area = document.getElementById("details-area");
|
||
details_area.removeAttribute("disabled");
|
||
details_area.open = true;
|
||
break;
|
||
}
|
||
})
|
||
|
||
document.getElementById("area-form").addEventListener("submit", async function (event) {
|
||
event.preventDefault();
|
||
|
||
await Constructor.api.setPack();
|
||
})
|
||
},
|
||
apartments: {
|
||
init: () => {
|
||
let listArea = document.getElementById('list-area');
|
||
listArea.innerHTML = ``;
|
||
|
||
for (const key in Constructor.info.apartments) {
|
||
const element = Constructor.info.apartments[key];
|
||
const pos = Constructor.info.entrance.map(e => e.editor_id).indexOf(key);
|
||
console.log(element);
|
||
|
||
let listArea = document.getElementById('list-area');
|
||
listArea.innerHTML += `
|
||
<div class="block-area" id="block-area-${key}">
|
||
<h3>${Constructor.info.entrance[pos].title}</h3>
|
||
<button class="addFloors" title="Додати поверх" type="button" onclick="Constructor.apartments.addFloors('${key}')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg></button>
|
||
|
||
<div id="area-${key}"></div>
|
||
</div>
|
||
`;
|
||
|
||
element.sort((a, b) => a.floors_number - b.floors_number);
|
||
|
||
let uniqueFloors = [...new Set(element.map(obj => obj.floors_number))];
|
||
|
||
for (let i = 0; i < uniqueFloors.length; i++) {
|
||
let num = uniqueFloors[i];
|
||
|
||
let areaBlock = document.getElementById(`area-${key}`);
|
||
|
||
let div = document.createElement('div');
|
||
div.className = "block-apartments-floors";
|
||
div.id = `floors-${key}-${num}`
|
||
div.innerHTML = `
|
||
<button class="addApartment" id="buttonApartment-${key}-${num}" title="Додати квартиру" type="button" onclick="Constructor.apartments.addApartment('${key}', '${num}')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg></button>
|
||
`;
|
||
|
||
areaBlock.prepend(div);
|
||
}
|
||
|
||
element.sort((a, b) => b.title - a.title);
|
||
|
||
for (let i = 0; i < element.length; i++) {
|
||
const apartment = element[i];
|
||
let num = apartment.floors_number;
|
||
|
||
let floorsBlock = document.getElementById(`floors-${key}-${apartment.floors_number}`);
|
||
|
||
let div = document.createElement('div');
|
||
div.className = "block-apartments-number";
|
||
div.id = `block-apartments-${key}-${apartment.editor_id}`
|
||
div.innerHTML = `
|
||
<input type="text" value="${apartment.title}" id="apartament-${key}-${apartment.editor_id}" onchange="Constructor.apartments.editApartment('${key}','${apartment.editor_id}')">
|
||
<button type="button" onclick="Constructor.apartments.deleteApartment('${key}','${apartment.editor_id}')">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg>
|
||
</button>
|
||
`;
|
||
|
||
floorsBlock.prepend(div);
|
||
}
|
||
|
||
element.sort((a, b) => b.floors_number - a.floors_number);
|
||
}
|
||
},
|
||
editNum: (element) => {
|
||
numApartments = Number(element.value);
|
||
},
|
||
addFloors: (area) => {
|
||
let areaBlock = document.getElementById(`area-${area}`);
|
||
|
||
let uniqueFloors = [...new Set(Constructor.info.apartments[area].map(obj => obj.floors_number))];
|
||
let new_floors = uniqueFloors.length + 1;
|
||
let new_id = makeid(5);
|
||
|
||
let div = document.createElement('div');
|
||
div.className = "block-apartments-floors";
|
||
div.id = `floors-${area}-${new_floors}`
|
||
div.innerHTML = `
|
||
<h2>Поверх ${new_floors}</h2>
|
||
<div class="block-apartments-number" id="block-apartments-${area}-${new_id}">
|
||
<input type="text" value="${numApartments}" id="apartament-${area}-${new_id}" onchange="Constructor.apartments.editApartment('${area}', '${new_id}')">
|
||
<button type="button" onclick="Constructor.apartments.deleteApartment('${area}', '${new_id}')">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg>
|
||
</button>
|
||
</div>
|
||
<button class="addApartment" id="buttonApartment-${area}-${new_floors}" title="Додати квартиру" type="button" onclick="Constructor.apartments.addApartment('${area}', '${new_floors}')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg></button>
|
||
`
|
||
|
||
areaBlock.prepend(div);
|
||
|
||
Constructor.info.apartments[area].push({
|
||
editor_id: new_id,
|
||
entrance_id: null,
|
||
apartment_number: Constructor.info.apartments[area].length,
|
||
title: numApartments,
|
||
floors_number: new_floors
|
||
});
|
||
|
||
numApartments++;
|
||
|
||
let next_apartment_title = document.getElementById('next-apartment-title');
|
||
next_apartment_title.value = numApartments;
|
||
|
||
},
|
||
addApartment: (area, floors) => {
|
||
let new_id = makeid(5);
|
||
|
||
Constructor.info.apartments[area].push({
|
||
editor_id: new_id,
|
||
entrance_id: null,
|
||
apartment_number: Constructor.info.apartments[area].length,
|
||
title: numApartments,
|
||
floors_number: Number(floors)
|
||
})
|
||
|
||
let floorsBlock = document.getElementById(`floors-${area}-${floors}`);
|
||
document.getElementById(`buttonApartment-${area}-${floors}`).remove();
|
||
|
||
floorsBlock.innerHTML += `
|
||
<div class="block-apartments-number" id="block-apartments-${area}-${new_id}">
|
||
<input type="text" value="${numApartments}" id="apartament-${area}-${new_id}" onchange="Constructor.apartments.editApartment('${area}', '${new_id}')">
|
||
<button type="button" onclick="Constructor.apartments.deleteApartment('${area}', '${new_id}')">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg>
|
||
</button>
|
||
</div>
|
||
`;
|
||
floorsBlock.innerHTML += `<button class="addApartment" id="buttonApartment-${area}-${floors}" title="Додати квартиру" type="button" onclick="Constructor.apartments.addApartment('${area}', '${floors}')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg></button>`
|
||
|
||
numApartments++;
|
||
|
||
let next_apartment_title = document.getElementById('next-apartment-title');
|
||
next_apartment_title.value = numApartments;
|
||
},
|
||
editApartment: (area, apartament) => {
|
||
let input = document.getElementById(`apartament-${area}-${apartament}`);
|
||
input.setAttribute("value", input.value);
|
||
|
||
const pos = Constructor.info.apartments[area].map(e => e.editor_id).indexOf(apartament);
|
||
|
||
info.apartments[area][pos].title = input.value;
|
||
},
|
||
deleteApartment: (area, apartament) => {
|
||
document.getElementById(`block-apartments-${area}-${apartament}`).remove();
|
||
const pos = Constructor.info.apartments[area].map(e => e.editor_id).indexOf(apartament);
|
||
Constructor.info.apartments[area].splice(pos, 1);
|
||
|
||
numApartments--;
|
||
let next_apartment_title = document.getElementById('next-apartment-title');
|
||
next_apartment_title.value = numApartments;
|
||
}
|
||
},
|
||
osm: {
|
||
init: () => {
|
||
let center = { lat: 49.5629016, lng: 25.6145625 };
|
||
let zoom = 19;
|
||
|
||
let googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
|
||
maxZoom: 20,
|
||
minZoom: 15,
|
||
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
|
||
});
|
||
|
||
let osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
maxZoom: 19,
|
||
minZoom: 15
|
||
});
|
||
|
||
let mytile = L.tileLayer('https://tm.rozenrod.com/webp/{z}/{x}/{y}.webp', {
|
||
maxZoom: 20,
|
||
minZoom: 15,
|
||
tms: true
|
||
});
|
||
|
||
if (!map) {
|
||
|
||
houseGroup = new L.FeatureGroup();
|
||
splitPolygonsGroup = new L.FeatureGroup();
|
||
RectangleGroup = new L.FeatureGroup();
|
||
entransePolygonsGroup = new L.FeatureGroup();
|
||
entranseNumPolygonsGroup = new L.FeatureGroup();
|
||
|
||
map = L.map('map', {
|
||
renderer: L.canvas(),
|
||
center,
|
||
zoom,
|
||
layers: [
|
||
googleHybrid,
|
||
osm,
|
||
mytile,
|
||
houseGroup,
|
||
entransePolygonsGroup,
|
||
entranseNumPolygonsGroup,
|
||
splitPolygonsGroup,
|
||
RectangleGroup,
|
||
],
|
||
zoomControl: false
|
||
});
|
||
|
||
|
||
let baseMaps = {
|
||
"Google Hybrid": googleHybrid,
|
||
"OpenStreetMap": osm,
|
||
"Territory Map": mytile
|
||
};
|
||
let overlayMaps = {
|
||
"Будинки": houseGroup,
|
||
"Під'їзди": entransePolygonsGroup,
|
||
"Номера під'їздів": entranseNumPolygonsGroup,
|
||
"Слой редактирования": splitPolygonsGroup,
|
||
"Слой линейки": RectangleGroup,
|
||
};
|
||
|
||
L.control.layers(baseMaps, overlayMaps, { position: 'bottomright' }).addTo(map);
|
||
|
||
map.pm.setLang("ua");
|
||
|
||
map.pm.addControls({
|
||
position: 'bottomright',
|
||
drawCircleMarker: false,
|
||
drawPolyline: false,
|
||
drawPolygon: false,
|
||
drawRectangle: false,
|
||
drawCircle: false,
|
||
drawText: false,
|
||
drawMarker: false,
|
||
cutPolygon: false,
|
||
tooltips: false
|
||
});
|
||
map.pm.toggleControls()
|
||
|
||
map.pm.setGlobalOptions({
|
||
layerGroup: splitPolygonsGroup
|
||
})
|
||
}
|
||
|
||
Constructor.editor.init();
|
||
},
|
||
getOSM: async (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));
|
||
},
|
||
setMap: async () => {
|
||
houseGroup.clearLayers();
|
||
|
||
if (!Constructor.info.osm_id) {
|
||
let osm = () => {
|
||
const a = document.getElementById("info-osm-title").value;
|
||
const b = a.replace(/\s+/g, "").split(',')
|
||
|
||
return b;
|
||
}
|
||
Constructor.info.osm_id = osm();
|
||
}
|
||
|
||
for (let i = 0; i < Constructor.info.osm_id.length; i++) {
|
||
const element = await Constructor.osm.getOSM(Constructor.info.osm_id[i]);
|
||
let coords = [];
|
||
element[0].forEach((feature) => coords.push([feature.lat, feature.lng]));
|
||
|
||
let centerPoint = turf.centerOfMass(turf.polygon([coords]));
|
||
|
||
|
||
if (Constructor.info.type == "homestead") {
|
||
map.setView([centerPoint.geometry.coordinates[0], centerPoint.geometry.coordinates[1]], 17);
|
||
|
||
L.polygon(element, {
|
||
color: colorGroup(Constructor.info.group_id),
|
||
radius: 500,
|
||
fillOpacity: 0.3,
|
||
dashArray: '20, 15',
|
||
dashOffset: '20',
|
||
}).addTo(houseGroup);
|
||
} else if (Constructor.info.type == "house") {
|
||
map.setView([centerPoint.geometry.coordinates[0], centerPoint.geometry.coordinates[1]], 18);
|
||
|
||
Constructor.info.points.push(element);
|
||
Constructor.info.points_number.push(element[0][0]);
|
||
|
||
L.polygon(element, {
|
||
color: "#585858",
|
||
fillColor: colorGroup(Constructor.info.group_id),
|
||
fillOpacity: 0.8,
|
||
tm_id: `house_${i}`
|
||
}).addTo(houseGroup);
|
||
}
|
||
}
|
||
|
||
console.log(Constructor.info);
|
||
|
||
}
|
||
},
|
||
api: {
|
||
setPack: async () => {
|
||
let area_form_button = document.getElementById('area-form-button');
|
||
area_form_button.innerText = "Зачекайте...";
|
||
|
||
Constructor.info.geo = await map.getCenter();
|
||
Constructor.info.zoom = await map.getZoom();
|
||
|
||
console.log(Constructor.info);
|
||
|
||
const uuid = localStorage.getItem('uuid');
|
||
const URL = `${CONFIG.api}constructor`;
|
||
await fetch(URL, {
|
||
method: 'POST',
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
"Authorization": uuid
|
||
},
|
||
body: JSON.stringify(Constructor.info)
|
||
})
|
||
.then(response => {
|
||
if (response.status == 200) {
|
||
console.log({ 'setPack': 'ok' });
|
||
area_form_button.innerText = "Запис додано";
|
||
|
||
return response.json()
|
||
} else {
|
||
console.log('err');
|
||
area_form_button.innerText = "Помилка запису";
|
||
|
||
return
|
||
}
|
||
})
|
||
.then(data => {
|
||
console.log(data);
|
||
|
||
Router.navigate((`/territory/manager/${Constructor.info.type}/${data.id}`).replace(window.location.origin, ''));
|
||
|
||
setTimeout(() => {
|
||
area_form_button.innerText = "Зберегти";
|
||
}, 3000);
|
||
})
|
||
.catch(err => {
|
||
console.log(err);
|
||
area_form_button.innerText = "Помилка запису";
|
||
})
|
||
}
|
||
},
|
||
editor: {
|
||
init: () => {
|
||
map.on('pm:create', function (event) {
|
||
let layer = event.layer;
|
||
|
||
let newCoords = layer.getLatLngs()[0].map(function (coords) {
|
||
return [coords.lng, coords.lat];
|
||
});
|
||
newCoords.push(newCoords[0]);
|
||
let turfNew = turf.polygon([newCoords]);
|
||
|
||
if (mode == 'entranse') {
|
||
console.log(L.PM.Utils.findLayers(houseGroup));
|
||
for (let i = 0; i < L.PM.Utils.findLayers(houseGroup).length; i++) {
|
||
const polygon = L.PM.Utils.findLayers(houseGroup)[i]._latlngs;
|
||
|
||
let polygonCoords = polygon[0].map(function (coords) {
|
||
return [coords.lng, coords.lat];
|
||
});
|
||
polygonCoords.push(polygonCoords[0]); // Замикаємо полігон
|
||
let turfPolygon = turf.polygon([polygonCoords]);
|
||
|
||
// Пошук точки перехрестя
|
||
let intersections = turf.intersect(turfNew, turfPolygon);
|
||
|
||
if (intersections) {
|
||
let points = [];
|
||
let coords = [];
|
||
|
||
intersections.geometry.coordinates[0].forEach(function (feature) {
|
||
coords.push([feature[1], feature[0]])
|
||
points.push({ lat: feature[1], lng: feature[0] })
|
||
});
|
||
|
||
let centerPoint = turf.centerOfMass(turf.polygon([coords]));
|
||
|
||
let points_number = { lat: centerPoint.geometry.coordinates[0], lng: centerPoint.geometry.coordinates[1] }
|
||
|
||
let newID = makeid(6);
|
||
|
||
Constructor.info.entrance.push({
|
||
editor_id: newID,
|
||
house_id: null,
|
||
entrance_number: Constructor.info.entrance.length,
|
||
title: `Під'їзд ${Constructor.info.entrance.length + 1}`,
|
||
points: points,
|
||
points_number: points_number,
|
||
floors_quantity: null,
|
||
apartments_quantity: null,
|
||
created_at: null
|
||
})
|
||
|
||
Constructor.info.apartments[newID] = [];
|
||
Constructor.apartments.init();
|
||
|
||
let listEntranse = document.getElementById('list-entranse');
|
||
listEntranse.style.display = "";
|
||
listEntranse.innerHTML += `
|
||
<div class="house" style="align-items: center;" id="Entranse_${newID}">
|
||
<input type="number" value="${Constructor.info.entrance.length}" id="Entranse_input_${newID}" onchange="Constructor.editor.editEntranse('${newID}')">
|
||
<button type="button" onclick="Constructor.editor.dellEntranse('${newID}')">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg>
|
||
</button>
|
||
</div>
|
||
`;
|
||
|
||
L.polygon(coords, { color: 'red' }).addTo(entransePolygonsGroup);
|
||
|
||
let myIcon = L.divIcon({ className: 'entranse_number', html: `<div class="markerEntranse">${Constructor.info.entrance.length}</div>` });
|
||
L.marker(centerPoint.geometry.coordinates, { icon: myIcon }).addTo(entranseNumPolygonsGroup);
|
||
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
drawEntranse: () => {
|
||
mode = 'entranse';
|
||
|
||
map.pm.setGlobalOptions({
|
||
layerGroup: splitPolygonsGroup
|
||
})
|
||
map.pm.setPathOptions({
|
||
color: '#f2bd53',
|
||
fillColor: '#f2bd53',
|
||
fillOpacity: 0.5,
|
||
radius: 500
|
||
});
|
||
|
||
if (map.pm.globalDragModeEnabled()) {
|
||
map.pm.disableDraw();
|
||
} else {
|
||
map.pm.enableDraw("Polygon", {
|
||
snappable: true,
|
||
snapDistance: 20,
|
||
tooltips: false,
|
||
templineStyle: { color: '#f2bd53' },
|
||
hintlineStyle: { color: '#f2bd53', dashArray: [5, 5] }
|
||
});
|
||
}
|
||
},
|
||
drawRectangle: () => {
|
||
mode = 'rectangle';
|
||
|
||
document.getElementById('ruler_divide').style.display = 'block'
|
||
document.getElementById('ruler').style.width = "calc(50% - 5px)"
|
||
document.getElementById('ruler_divide').style.width = "calc(50% - 5px)"
|
||
document.getElementById('ruler').innerHTML = 'Лінійка'
|
||
|
||
map.pm.toggleControls()
|
||
RectangleGroup.clearLayers();
|
||
RectangleGroup.addTo(map);
|
||
|
||
map.pm.setGlobalOptions({
|
||
layerGroup: RectangleGroup
|
||
})
|
||
map.pm.setPathOptions({
|
||
color: '#b645ef',
|
||
fillColor: '#b645ef',
|
||
fillOpacity: 0.5,
|
||
radius: 500
|
||
});
|
||
|
||
if (map.pm.globalDragModeEnabled()) {
|
||
map.pm.disableDraw();
|
||
} else {
|
||
map.pm.enableDraw("Rectangle", {
|
||
snappable: true,
|
||
snapDistance: 20,
|
||
tooltips: false,
|
||
templineStyle: { color: '#b645ef' },
|
||
hintlineStyle: { color: '#b645ef', dashArray: [5, 5] }
|
||
});
|
||
}
|
||
},
|
||
ruler: (n) => {
|
||
n = prompt('На сколько поделить линейку ?', 2);
|
||
const polygon = L.PM.Utils.findLayers(RectangleGroup)[0]._latlngs;
|
||
let newCoords = polygon[0].map(function (coords) {
|
||
return [coords.lng, coords.lat];
|
||
});
|
||
newCoords.push(newCoords[0]);
|
||
let turfNew = turf.polygon([newCoords]);
|
||
|
||
console.log(turfNew);
|
||
|
||
|
||
var line = turf.polygonToLine(turfNew);
|
||
console.log(line.geometry.coordinates);
|
||
|
||
coords = line.geometry.coordinates;
|
||
|
||
for (let i = 1; i < n; i++) {
|
||
let a1 = (((coords[2][1] - coords[1][1]) / n) * i + coords[1][1])
|
||
let b1 = (((coords[2][0] - coords[1][0]) / n) * i + coords[1][0])
|
||
let a2 = (((coords[3][1] - coords[0][1]) / n) * i + coords[0][1])
|
||
let b2 = (((coords[3][0] - coords[0][0]) / n) * i + coords[0][0])
|
||
|
||
let c1 = (((coords[1][1] - coords[0][1]) / n) * i + coords[0][1])
|
||
let d1 = (((coords[1][0] - coords[0][0]) / n) * i + coords[0][0])
|
||
let c2 = (((coords[2][1] - coords[3][1]) / n) * i + coords[3][1])
|
||
let d2 = (((coords[2][0] - coords[3][0]) / n) * i + coords[3][0])
|
||
|
||
L.circleMarker([a1, b1], { radius: 2, color: 'red' }).addTo(RectangleGroup);
|
||
L.circleMarker([a2, b2], { radius: 2, color: 'red' }).addTo(RectangleGroup);
|
||
L.circleMarker([c1, d1], { radius: 2, color: 'red' }).addTo(RectangleGroup);
|
||
L.circleMarker([c2, d2], { radius: 2, color: 'red' }).addTo(RectangleGroup);
|
||
}
|
||
|
||
coords.forEach(function (feature) {
|
||
L.circleMarker([feature[1], feature[0]], { radius: 2, color: 'red' }).addTo(RectangleGroup);
|
||
});
|
||
},
|
||
dellEntranse: (id) => {
|
||
delete Constructor.info.apartments[id];
|
||
|
||
const pos = Constructor.info.entrance.map(e => e.editor_id).indexOf(id);
|
||
console.log(pos);
|
||
|
||
|
||
Constructor.info.entrance.splice(pos, 1);
|
||
console.log(id);
|
||
|
||
document.getElementById(`Entranse_${id}`).remove();
|
||
|
||
let Entranse = Object.keys(entransePolygonsGroup._layers);
|
||
let numsEntranse = Object.keys(entranseNumPolygonsGroup._layers);
|
||
console.log(Entranse, Entranse[pos]);
|
||
console.log(numsEntranse, numsEntranse[pos]);
|
||
|
||
entransePolygonsGroup.removeLayer(entransePolygonsGroup._layers[Entranse[pos]]);
|
||
entranseNumPolygonsGroup.removeLayer(entranseNumPolygonsGroup._layers[numsEntranse[pos]]);
|
||
|
||
Constructor.apartments.init();
|
||
},
|
||
editEntranse: (id) => {
|
||
const input = document.getElementById(`Entranse_input_${id}`);
|
||
|
||
const pos = Constructor.info.entrance.map(e => e.editor_id).indexOf(id);
|
||
|
||
Constructor.info.entrance[pos].entrance_number = Number(input.value) - 1;
|
||
Constructor.info.entrance[pos].title = `Під'їзд ${input.value}`;
|
||
|
||
let numsEntranse = Object.keys(entranseNumPolygonsGroup._layers);
|
||
let newIcon = L.divIcon({ className: 'entranse_number', html: `<div class="markerEntranse">${input.value}</div>` });
|
||
entranseNumPolygonsGroup._layers[numsEntranse[pos]].setIcon(newIcon);
|
||
|
||
input.setAttribute("value", input.value);
|
||
|
||
Constructor.apartments.init();
|
||
}
|
||
}
|
||
} |