tomas.richtar/StorymapperArrow
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

Drawing

Browse Source
This commit is contained in:
Tomas Richtar 2025-07-07 14:39:38 +02:00
parent b0cfaee2e7
commit ef4dd49d74
3 changed files with 585 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

470
Drawing.js Normal file
View File

@ -0,0 +1,470 @@
import { getArrowPolygon } from "athena-utils/shape/Arrow.js";
import { ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_EXPONENTIAL } from "athena-utils/shape/Arrow.js";
import { getFrontline } from "athena-utils/shape/Frontline.js";
import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
let mouseMoveListener = null;
let currentFeature = null;
let currentDrawStyle = 'arrow';
const arrowParamsMap = new Map();
const frontlineParamsMap = new Map();
mapboxgl.accessToken = 'pk.eyJ1Ijoib3V0ZG9vcm1hcHBpbmdjb21wYW55IiwiYSI6ImNqYmh3cDdjYzNsMnozNGxsYzlvMmk2bTYifQ.QqcZ4LVoLWnXafXdjZxnZg';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12',
center: [10, 50],
zoom: 5
});
const draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
line_string: true,
trash: true
},
defaultMode: 'draw_line_string',
styles: [
// Aktivní linka - úplně průhledná
{
id: 'gl-draw-line',
type: 'line',
filter: ['all', ['==', '$type', 'LineString'], ['==', 'active', 'true']],
layout: {
'line-cap': 'round',
'line-join': 'round'
},
paint: {
'line-color': '#00ff00', // zelená
'line-width': 4
}
},
// Neaktivní linka - taky průhledná
{
id: 'gl-draw-line-inactive',
type: 'line',
filter: ['all', ['==', '$type', 'LineString'], ['==', 'active', 'false']],
layout: {
'line-cap': 'round',
'line-join': 'round'
},
paint: {
'line-color': 'rgba(0,0,0,0)',
'line-width': 2
}
},
// Body (vertexy) - průhledné, pokud chceš
{
id: 'gl-draw-polygon-and-line-vertex-active',
type: 'circle',
filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'vertex'], ['==', 'active', 'true']],
paint: {
'circle-radius': 6,
'circle-color': '#00ff00' // zelená
}
},
{
id: 'gl-draw-polygon-and-line-vertex-inactive',
type: 'circle',
filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'vertex'], ['==', 'active', 'false']],
paint: {
'circle-radius': 4,
'circle-color': '#00aa00' // tmavší zelená
}
},
// midpointy - musí být viditelné, aby fungovalo kliknutí a přidávání vertexů
{
id: 'gl-draw-polygon-midpoint',
type: 'circle',
filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
paint: { 'circle-radius': 4, 'circle-color': '#fbb03b' } // žlutá
},
{
id: 'gl-draw-polygon-midpoint-active',
type: 'circle',
filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint'], ['==', 'active', 'true']],
paint: { 'circle-radius': 6, 'circle-color': '#fbb03b' }
}
]
});
map.addControl(draw, 'top-left');
map.on('draw.create', handleDraw);
map.on('draw.delete', () => {
draw.deleteAll();
clearAllArrowLayers();
clearAllFrontlineLayers();
hideArrowEditor();
hideFrontlineEditor();
document.getElementById('calculated-area').innerHTML = '';
});
map.on('draw.update', handleDraw);
map.on('click', (e) => {
const arrowFeatures = map.queryRenderedFeatures(e.point, {
layers: map.getStyle().layers
.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 allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === featureId);
if (currentFeature) {
const params = arrowParamsMap.get(featureId);
if (params) {
showArrowEditor(params);
hideFrontlineEditor();
}
draw.changeMode('direct_select', { featureId: featureId });
}
return;
}
// Pokud to není arrow, zkus frontline
const frontlineFeatures = map.queryRenderedFeatures(e.point, {
layers: map.getStyle().layers
.filter(l => l.id.startsWith('frontline-'))
.map(l => l.id)
});
if (frontlineFeatures.length > 0) {
const frontlineFeature = frontlineFeatures[0];
const featureId = frontlineFeature.layer.id.replace('frontline-', '');
const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === featureId);
if (currentFeature) {
const params = frontlineParamsMap.get(featureId);
if (params) {
showFrontlineEditor(params);
hideArrowEditor();
}
draw.changeMode('direct_select', { featureId: featureId });
}
return;
}
hideArrowEditor();
hideFrontlineEditor();
});
map.dragPan.enable();
function handleDraw(e) {
const data = draw.getAll();
const answer = document.getElementById('calculated-area');
clearAllArrowLayers();
clearAllFrontlineLayers();
if (data.features.length > 0) {
answer.innerHTML = '';
data.features.forEach((line, index) => {
if (line.geometry.type !== 'LineString') return;
const coords = line.geometry.coordinates;
const id = line.id || `line-${index}`;
if (currentDrawStyle === 'arrow') {
if (!arrowParamsMap.has(id)) {
arrowParamsMap.set(id, {
splineStep: 20,
offsetDistance: 12000,
calculation: ARROW_BODY_STYLE_LINEAR,
range: 1,
minValue: 0.1,
widthArrow: 5,
lengthArrow: 8
});
}
const params = arrowParamsMap.get(id);
const arrowGeoJSON = getArrowPolygon(
{ points: coords, splineStep: params.splineStep, offsetDistance: params.offsetDistance },
{ calculation: params.calculation, range: params.range, minValue: params.minValue },
{ widthArrow: params.widthArrow, lengthArrow: params.lengthArrow }
);
drawArrowOnMap(arrowGeoJSON, `arrow-${id}`);
} else if (currentDrawStyle === 'frontline') {
if (!frontlineParamsMap.has(id)) {
frontlineParamsMap.set(id, {
splineStep: 20,
spacing: 500,
offsetDistance: 12000,
style: LEFT_SIDE,
protrusion: {
length: 2000,
startSize: 5000,
endSize: 5000,
gap: 10000
}
});
}
const params = frontlineParamsMap.get(id);
const frontlineData = {
points: coords,
splineStep: params.splineStep,
spacing: params.spacing,
offsetDistance: params.offsetDistance,
style: params.style
};
const protrusionData = params.protrusion;
const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
let polygonToDraw = frontlineGeoJSON;
if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
}
drawFrontlineOnMap(polygonToDraw, `frontline-${id}`);
}
});
} else {
answer.innerHTML = '';
if (e.type !== 'draw.delete')
alert('Klikni na mapu pro kreslení čáry.');
}
}
function drawArrowOnMap(geojson, id) {
if (map.getLayer(id)) map.removeLayer(id);
if (map.getSource(id)) map.removeSource(id);
map.addSource(id, {
type: 'geojson',
data: geojson
});
map.addLayer({
id: id,
type: 'fill',
source: id,
paint: {
'fill-color': '#ff0000',
'fill-opacity': 0.5
}
});
console.log('HERE');
}
function drawFrontlineOnMap(frontlineGeoJSON, id) {
if (map.getLayer(id)) map.removeLayer(id);
if (map.getSource(id)) map.removeSource(id);
map.addSource(id, {
type: 'geojson',
data: frontlineGeoJSON
});
map.addLayer({
id: id,
type: 'fill',
source: id,
paint: {
'fill-color': '#ff6600',
'fill-opacity': 0.6,
'fill-outline-color': '#cc3300'
}
});
}
function clearAllArrowLayers() {
const layers = map.getStyle().layers;
if (!layers) return;
layers.forEach(layer => {
if (layer.id.startsWith('arrow-')) {
if (map.getLayer(layer.id)) map.removeLayer(layer.id);
if (map.getSource(layer.id)) map.removeSource(layer.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';
popup.style.left = '10px';
popup.style.top = '70px';
document.getElementById('splineStep').value = params.splineStep;
document.getElementById('offsetDistance').value = params.offsetDistance;
document.getElementById('range').value = params.range;
document.getElementById('minValue').value = params.minValue;
document.getElementById('widthArrow').value = params.widthArrow;
document.getElementById('lengthArrow').value = params.lengthArrow;
}
function hideArrowEditor() {
const popup = document.getElementById('arrow-editor');
popup.style.display = 'none';
currentFeature = null;
}
function showFrontlineEditor(params) {
const popup = document.getElementById('frontline-editor');
popup.style.display = 'block';
popup.style.left = '10px';
popup.style.top = '70px';
document.getElementById('splineStepFrontline').value = params.splineStep;
document.getElementById('spacing').value = params.spacing;
document.getElementById('offsetDistanceFrontline').value = params.offsetDistance;
document.getElementById('styleFrontline').value = params.style;
document.getElementById('protrusionLength').value = params.protrusion.length;
document.getElementById('protrusionStartSize').value = params.protrusion.startSize;
document.getElementById('protrusionEndSize').value = params.protrusion.endSize;
document.getElementById('protrusionGap').value = params.protrusion.gap;
}
function hideFrontlineEditor() {
const popup = document.getElementById('frontline-editor');
popup.style.display = 'none';
currentFeature = null;
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('applyArrowChanges').addEventListener('click', () => {
console.log("arrowFeatures");
console.log(arrowFeatures);
if (!currentFeature) return;
console.log("Test");
const coords = currentFeature.geometry.coordinates;
const id = currentFeature.id;
const splineStep = parseFloat(document.getElementById('splineStep').value);
const offsetDistance = parseFloat(document.getElementById('offsetDistance').value);
const range = parseFloat(document.getElementById('range').value);
const minValue = parseFloat(document.getElementById('minValue').value);
const widthArrow = parseFloat(document.getElementById('widthArrow').value);
const lengthArrow = parseFloat(document.getElementById('lengthArrow').value);
arrowParamsMap.set(id, {
splineStep,
offsetDistance,
calculation: ARROW_BODY_STYLE_LINEAR,
range,
minValue,
widthArrow,
lengthArrow
});
const arrowGeoJSON = getArrowPolygon({
points: coords,
splineStep,
offsetDistance
}, {
calculation: ARROW_BODY_STYLE_LINEAR,
range,
minValue
}, {
widthArrow,
lengthArrow
});
drawArrowOnMap(arrowGeoJSON, `arrow-${id}`);
});
document.getElementById('applyFrontlineChanges').addEventListener('click', () => {
if (!currentFeature) return;
const coords = currentFeature.geometry.coordinates;
const id = currentFeature.id;
const splineStep = parseFloat(document.getElementById('splineStepFrontline').value);
const spacing = parseFloat(document.getElementById('spacing').value);
const offsetDistance = parseFloat(document.getElementById('offsetDistanceFrontline').value);
const style = document.getElementById('styleFrontline').value;
const length = parseFloat(document.getElementById('protrusionLength').value);
const startSize = parseFloat(document.getElementById('protrusionStartSize').value);
const endSize = parseFloat(document.getElementById('protrusionEndSize').value);
const gap = parseFloat(document.getElementById('protrusionGap').value);
frontlineParamsMap.set(id, {
splineStep,
spacing,
offsetDistance,
style,
protrusion: {
length,
startSize,
endSize,
gap
}
});
const frontlineData = {
points: coords,
splineStep,
spacing,
offsetDistance,
style
};
const protrusionData = frontlineParamsMap.get(id).protrusion;
const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
let polygonToDraw = frontlineGeoJSON;
if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
}
drawFrontlineOnMap(polygonToDraw, `frontline-${id}`);
});
const buttonsContainer = document.getElementById('drawStyleButtons');
buttonsContainer.addEventListener('click', (event) => {
if (event.target.tagName !== 'BUTTON') return;
// Odeber aktivní třídu ze všech tlačítek
Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => btn.classList.remove('active'));
// Nastav aktivní třídu na kliknuté tlačítko
event.target.classList.add('active');
// Nastav styl podle data atributu
currentDrawStyle = event.target.getAttribute('data-style');
// Při změně stylu překreslíme aktuální kreslené prvky
handleDraw({ type: 'draw.update' });
});
});

3
MapPolygons.js
View File

@ -12,7 +12,8 @@ const map = new mapboxgl.Map({
center: [10, 50],
zoom: 5
});
//this is my test push
//second
map.on('load', () => {
const fullPolygon = getArrowPolygon(arrowData, style, arrowHeadData);
const circleGeoJSON = getCirclePolygon(circleCenter, circleRadius, circleDensity);

115
index.html
View File

@ -1,6 +1,117 @@
<!--
MAPBOX - DRAWING
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Draw a polygon and calculate its area</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.5.0/mapbox-gl-draw.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.5.0/mapbox-gl-draw.css" type="text/css">
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
.calculation-box {
height: 75px;
width: 150px;
position: absolute;
bottom: 40px;
left: 10px;
background-color: rgba(255, 255, 255, 0.9);
padding: 15px;
text-align: center;
}
p {
font-family: 'Open Sans';
margin: 0;
font-size: 13px;
}
#arrow-editor {
position: absolute;
display: none;
background: white;
padding: 10px;
border: 1px solid gray;
z-index: 10;
}
#arrow-editor label {
display: block;
margin-bottom: 5px;
font-family: sans-serif;
font-size: 13px;
}
#applyArrowChanges {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<!-- Editor parametrů šipky -->
<div id="arrow-editor" style="position: absolute; background: white; padding: 10px; border: 1px solid #ccc; display: none; z-index: 1000;">
<h3>Arrow Editor</h3>
<label>Spline Step: <input id="splineStep" type="number" step="1"></label><br>
<label>Offset Distance: <input id="offsetDistance" type="number" step="1000"></label><br>
<label>Range: <input id="range" type="number" step="0.1" min="0"></label><br>
<label>Min Value: <input id="minValue" type="number" step="0.1" min="0"></label><br>
<label>Width Arrow: <input id="widthArrow" type="number" step="1"></label><br>
<label>Length Arrow: <input id="lengthArrow" type="number" step="1"></label><br>
<button id="applyArrowChanges">Apply Changes</button>
</div>
<div id="frontline-editor" style="position: absolute; background: white; padding: 10px; border: 1px solid #ccc; display: none; z-index: 1000;">
<h3>Frontline Editor</h3>
<label>Spline Step: <input id="splineStepFrontline" type="number" step="1"></label><br>
<label>Spacing: <input id="spacing" type="number" step="100"></label><br>
<label>Offset Distance: <input id="offsetDistanceFrontline" type="number" step="1000"></label><br>
<label>Style:
<select id="styleFrontline">
<option value="leftSide">Left Side</option>
<option value="rightSide">Right Side</option>
<option value="bothSides">Both Sides</option>
</select>
</label><br>
<h4>Protrusion</h4>
<label>Length: <input id="protrusionLength" type="number" step="100"></label><br>
<label>Start Size: <input id="protrusionStartSize" type="number" step="100"></label><br>
<label>End Size: <input id="protrusionEndSize" type="number" step="100"></label><br>
<label>Gap: <input id="protrusionGap" type="number" step="100"></label><br>
<button id="applyFrontlineChanges">Apply Changes</button>
</div>
<div id="drawStyleButtons" style="position: absolute; top: 10px; left: 50px; background: white; padding: 5px; z-index: 10;">
<button data-style="frontline" class="active">Frontline</button>
<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>
</html>
<!--
MAPBOX
-->
<!DOCTYPE html>
<html>
<head>
@ -19,7 +130,7 @@ body { margin: 0; padding: 0; }
<script type="module" src="MapPolygons.js"></script>
</body>
</html>
-->
<!--
CANVAS