Error fixes
This commit is contained in:
parent
7157c2502a
commit
9fadc3681a
115
Drawing.js
115
Drawing.js
@ -3,9 +3,12 @@ import { ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_E
|
||||
import { getFrontline } from "athena-utils/shape/Frontline.js";
|
||||
import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
|
||||
|
||||
const ARROW = "arrow";
|
||||
const FRONTLINE = "frontline";
|
||||
|
||||
let mouseMoveListener = null;
|
||||
let currentFeature = null;
|
||||
let currentDrawStyle = 'arrow';
|
||||
let currentDrawStyle = ARROW;
|
||||
|
||||
const arrowParamsMap = new Map();
|
||||
const frontlineParamsMap = new Map();
|
||||
@ -100,12 +103,12 @@ map.on('click', (e) => {
|
||||
// Hledání šipek
|
||||
const arrowFeatures = map.queryRenderedFeatures(e.point, {
|
||||
layers: map.getStyle().layers
|
||||
.filter(l => l.id.startsWith('arrow-'))
|
||||
.filter(l => l.id.startsWith(ARROW + "-"))
|
||||
.map(l => l.id)
|
||||
});
|
||||
if (arrowFeatures.length > 0) {
|
||||
const arrowFeature = arrowFeatures[0];
|
||||
const featureId = arrowFeature.layer.id.replace('arrow-', '');
|
||||
const featureId = arrowFeature.layer.id.replace(ARROW + "-", '');
|
||||
|
||||
const allFeatures = draw.getAll().features;
|
||||
currentFeature = allFeatures.find(f => f.id === featureId);
|
||||
@ -152,7 +155,7 @@ map.on('click', (e) => {
|
||||
|
||||
map.dragPan.enable();
|
||||
|
||||
function MyDelete()
|
||||
function MyDelete(polygonType)
|
||||
{
|
||||
if (!currentFeature) return;
|
||||
|
||||
@ -160,39 +163,40 @@ function MyDelete()
|
||||
|
||||
draw.delete(id);
|
||||
//ARROW
|
||||
const arrowLayerId = `arrow-${id}`;
|
||||
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
|
||||
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
|
||||
if(polygonType == ARROW){
|
||||
const arrowLayerId = polygonType + "-" + id;
|
||||
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
|
||||
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
|
||||
|
||||
arrowParamsMap.delete(id);
|
||||
arrowParamsMap.delete(id);
|
||||
}
|
||||
|
||||
//Frontline
|
||||
const frontlineLayerId = `frontline-${id}`;
|
||||
if(polygonType == FRONTLINE){
|
||||
const frontlineLayerId = polygonType + "-" + id;
|
||||
|
||||
if (frontlineParamsMap.get(id).style == 3){ //BOTH_SIDES
|
||||
|
||||
if (frontlineParamsMap.get(id).style == 3){ //BOTH_SIDES
|
||||
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
||||
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
||||
const frontlineLayerIdB = polygonType + "-" + (id+1);
|
||||
if (map.getLayer(frontlineLayerIdB)) map.removeLayer(frontlineLayerIdB);
|
||||
if (map.getSource(frontlineLayerIdB)) map.removeSource(frontlineLayerIdB);
|
||||
frontlineParamsMap.delete(id);
|
||||
frontlineParamsMap.delete(id+1);
|
||||
|
||||
hideArrowEditor();
|
||||
hideFrontlineEditor();
|
||||
return;
|
||||
}
|
||||
|
||||
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
||||
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
||||
const frontlineLayerIdB = `frontline-${id+1}`;
|
||||
if (map.getLayer(frontlineLayerIdB)) map.removeLayer(frontlineLayerIdB);
|
||||
if (map.getSource(frontlineLayerIdB)) map.removeSource(frontlineLayerIdB);
|
||||
frontlineParamsMap.delete(id);
|
||||
frontlineParamsMap.delete(id+1);
|
||||
|
||||
hideArrowEditor();
|
||||
hideFrontlineEditor();
|
||||
document.getElementById('calculated-area').innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
||||
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
||||
frontlineParamsMap.delete(id);
|
||||
|
||||
hideArrowEditor();
|
||||
hideFrontlineEditor();
|
||||
document.getElementById('calculated-area').innerHTML = '';
|
||||
}
|
||||
|
||||
function handleDraw(e) {
|
||||
@ -203,7 +207,7 @@ function handleDraw(e) {
|
||||
const coords = feature.geometry.coordinates;
|
||||
const id = feature.id;
|
||||
|
||||
if (currentDrawStyle === 'arrow') {
|
||||
if (currentDrawStyle === ARROW) {
|
||||
if (!arrowParamsMap.has(id)) {
|
||||
arrowParamsMap.set(id, {
|
||||
splineStep: 20,
|
||||
@ -224,14 +228,14 @@ function handleDraw(e) {
|
||||
{ widthArrow: params.widthArrow, lengthArrow: params.lengthArrow }
|
||||
);
|
||||
|
||||
const arrowLayerId = `arrow-${id}`;
|
||||
const arrowLayerId = ARROW + "-" + id;
|
||||
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
|
||||
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
|
||||
drawArrowOnMap(arrowGeoJSON, `arrow-${id}`);
|
||||
drawArrowOnMap(arrowGeoJSON, ARROW + "-" + id);
|
||||
const allFeatures = draw.getAll().features;
|
||||
currentFeature = allFeatures.find(f => f.id === id);
|
||||
|
||||
} else if (currentDrawStyle === 'frontline') {
|
||||
} else if (currentDrawStyle === FRONTLINE) {
|
||||
if (!frontlineParamsMap.has(id)) {
|
||||
frontlineParamsMap.set(id, {
|
||||
splineStep: 0.08,
|
||||
@ -274,12 +278,12 @@ function handleDraw(e) {
|
||||
console.log("polygonToDrawLeft", polygonToDrawLeft);
|
||||
console.log("polygonToDrawRight", polygonToDrawRight);
|
||||
|
||||
const frontlineLayerId = `frontline-${id}`;
|
||||
const frontlineLayerId = FRONTLINE + "-" + id;
|
||||
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
||||
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
||||
|
||||
drawFrontlineOnMap(polygonToDrawLeft, `frontline-${id}`);
|
||||
drawFrontlineOnMap(polygonToDrawRight, `frontline-${id+1}`);
|
||||
drawFrontlineOnMap(polygonToDrawLeft, FRONTLINE + "-" + id);
|
||||
drawFrontlineOnMap(polygonToDrawRight, FRONTLINE + "-" + (id+1));
|
||||
|
||||
const allFeatures = draw.getAll().features;
|
||||
currentFeature = allFeatures.find(f => f.id === id);
|
||||
@ -287,10 +291,10 @@ function handleDraw(e) {
|
||||
return;
|
||||
}
|
||||
|
||||
const frontlineLayerId = `frontline-${id}`;
|
||||
const frontlineLayerId = FRONTLINE + "-" + id;
|
||||
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
||||
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
||||
drawFrontlineOnMap(polygonToDraw, `frontline-${id}`);
|
||||
drawFrontlineOnMap(polygonToDraw, FRONTLINE + "-" + id);
|
||||
const allFeatures = draw.getAll().features;
|
||||
currentFeature = allFeatures.find(f => f.id === id);
|
||||
|
||||
@ -335,30 +339,6 @@ function drawFrontlineOnMap(frontlineGeoJSON, id) {
|
||||
});
|
||||
}
|
||||
|
||||
function clearAllArrowLayers() {
|
||||
const allLayerIds = map.getStyle().layers.map(l => l.id);
|
||||
|
||||
allLayerIds.forEach(id => {
|
||||
if (id.startsWith('arrow-')) {
|
||||
if (map.getLayer(id)) map.removeLayer(id);
|
||||
if (map.getSource(id)) map.removeSource(id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function clearAllFrontlineLayers() {
|
||||
const layers = map.getStyle().layers;
|
||||
if (!layers) return;
|
||||
|
||||
layers.forEach(layer => {
|
||||
if (layer.id.startsWith('frontline-')) {
|
||||
if (map.getLayer(layer.id)) map.removeLayer(layer.id);
|
||||
if (map.getSource(layer.id)) map.removeSource(layer.id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showArrowEditor(params) {
|
||||
const popup = document.getElementById('arrow-editor');
|
||||
popup.style.display = 'block';
|
||||
@ -409,12 +389,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
document.getElementById('removeArrow').addEventListener('click', () => {
|
||||
|
||||
MyDelete();
|
||||
MyDelete(ARROW);
|
||||
});
|
||||
|
||||
document.getElementById('removeFrontline').addEventListener('click', () => {
|
||||
|
||||
MyDelete();
|
||||
MyDelete(FRONTLINE);
|
||||
});
|
||||
|
||||
document.getElementById('applyArrowChanges').addEventListener('click', () => {
|
||||
@ -455,11 +435,11 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
|
||||
//ARROW
|
||||
const arrowLayerId = `arrow-${id}`;
|
||||
const arrowLayerId = ARROW + "-" + id;
|
||||
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
|
||||
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
|
||||
|
||||
drawArrowOnMap(arrowGeoJSON, `arrow-${id}`);
|
||||
drawArrowOnMap(arrowGeoJSON, ARROW + "-" + id);
|
||||
|
||||
const allFeatures = draw.getAll().features;
|
||||
currentFeature = allFeatures.find(f => f.id === id);
|
||||
@ -520,14 +500,14 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log("polygonToDrawLeft", polygonToDrawLeft);
|
||||
console.log("polygonToDrawRight", polygonToDrawRight);
|
||||
|
||||
const frontlineLayerId = `frontline-${id}`;
|
||||
const frontlineLayerId = FRONTLINE + "-" + id;
|
||||
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
||||
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
||||
|
||||
console.log(frontlineLayerId);
|
||||
console.log(`frontline-${id+1}`);
|
||||
drawFrontlineOnMap(polygonToDrawLeft, `frontline-${id}`);
|
||||
drawFrontlineOnMap(polygonToDrawRight, `frontline-${id+1}`);
|
||||
console.log(FRONTLINE + "-" + (id+1));
|
||||
drawFrontlineOnMap(polygonToDrawLeft, FRONTLINE + "-" + id);
|
||||
drawFrontlineOnMap(polygonToDrawRight, FRONTLINE + "-" + (id+1));
|
||||
|
||||
const allFeatures = draw.getAll().features;
|
||||
currentFeature = allFeatures.find(f => f.id === id);
|
||||
@ -537,13 +517,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
//if (last was both destroy id+1) TODO
|
||||
console.log("Test2");
|
||||
const frontlineLayerId = `frontline-${id}`;
|
||||
const frontlineLayerId = FRONTLINE + "-" + id;
|
||||
if (map.getLayer(frontlineLayerId+1)) map.removeLayer(frontlineLayerId+1);
|
||||
if (map.getSource(frontlineLayerId+1)) map.removeSource(frontlineLayerId+1);
|
||||
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
||||
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
||||
|
||||
drawFrontlineOnMap(polygonToDraw, `frontline-${id}`);
|
||||
drawFrontlineOnMap(polygonToDraw, FRONTLINE + "-" + id);
|
||||
|
||||
const allFeatures = draw.getAll().features;
|
||||
currentFeature = allFeatures.find(f => f.id === id);
|
||||
@ -568,5 +548,4 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
btn.style.color = isSelected ? '#fff' : '#000';
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
@ -98,13 +98,6 @@ MAPBOX - DRAWING
|
||||
<button data-style="arrow">Arrow</button>
|
||||
<!-- další styly můžeš přidat sem -->
|
||||
</div>
|
||||
|
||||
<!-- Box pro výpis -->
|
||||
<div class="calculation-box">
|
||||
<p>Click the map to draw a polygon.</p>
|
||||
<div id="calculated-area"></div>
|
||||
</div>
|
||||
|
||||
<!-- Hlavní JS -->
|
||||
<script type="module" src="Drawing.js"></script>
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user