Map controlls - Click
This commit is contained in:
parent
9fadc3681a
commit
4e8169a679
319
Drawing.js
319
Drawing.js
@ -6,7 +6,6 @@ import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.
|
||||
const ARROW = "arrow";
|
||||
const FRONTLINE = "frontline";
|
||||
|
||||
let mouseMoveListener = null;
|
||||
let currentFeature = null;
|
||||
let currentDrawStyle = ARROW;
|
||||
|
||||
@ -22,6 +21,7 @@ const map = new mapboxgl.Map({
|
||||
zoom: 5
|
||||
});
|
||||
|
||||
// Drawing visuals
|
||||
const draw = new MapboxDraw({
|
||||
displayControlsDefault: false,
|
||||
controls: {
|
||||
@ -29,7 +29,7 @@ const draw = new MapboxDraw({
|
||||
},
|
||||
defaultMode: 'draw_line_string',
|
||||
styles: [
|
||||
// Aktivní linka - úplně průhledná
|
||||
// Main drawing line
|
||||
{
|
||||
id: 'gl-draw-line',
|
||||
type: 'line',
|
||||
@ -39,11 +39,11 @@ const draw = new MapboxDraw({
|
||||
'line-join': 'round'
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#00ff00', // zelená
|
||||
'line-color': 'rgb(0, 255, 0)',
|
||||
'line-width': 4
|
||||
}
|
||||
},
|
||||
// Neaktivní linka - taky průhledná
|
||||
// This makes the nonstop visible line invisible
|
||||
{
|
||||
id: 'gl-draw-line-inactive',
|
||||
type: 'line',
|
||||
@ -53,107 +53,184 @@ const draw = new MapboxDraw({
|
||||
'line-join': 'round'
|
||||
},
|
||||
paint: {
|
||||
'line-color': 'rgba(0,0,0,0)',
|
||||
'line-color': 'rgba(0, 0, 0, 0)',
|
||||
'line-width': 2
|
||||
}
|
||||
},
|
||||
// Body (vertexy) - průhledné, pokud chceš
|
||||
// Selected point
|
||||
{
|
||||
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á
|
||||
'circle-color': 'rgb(255, 255, 0)'
|
||||
}
|
||||
},
|
||||
// Main points
|
||||
{
|
||||
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á
|
||||
'circle-color': 'rgb(0, 255, 0)'
|
||||
}
|
||||
},
|
||||
|
||||
// midpointy - musí být viditelné, aby fungovalo kliknutí a přidávání vertexů
|
||||
// Midpoints
|
||||
{
|
||||
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' }
|
||||
paint: {
|
||||
'circle-radius': 4,
|
||||
'circle-color': 'rgb(0, 255, 174)'
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Map controlls
|
||||
map.addControl(draw, 'top-left');
|
||||
|
||||
map.on('draw.create', handleDraw);
|
||||
map.on('draw.update', handleDraw);
|
||||
map.on('click', (e) => {
|
||||
// Hledání šipek
|
||||
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);
|
||||
}
|
||||
|
||||
draw.changeMode('direct_select', { featureId: featureId });
|
||||
}
|
||||
return; // pokud kliknul na arrow, dále nekoukáme
|
||||
}
|
||||
|
||||
// Hledání frontlinů
|
||||
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);
|
||||
}
|
||||
|
||||
draw.changeMode('direct_select', { featureId: featureId });
|
||||
}
|
||||
return; // pokud kliknul na frontline, dále nekoukáme
|
||||
}
|
||||
|
||||
// Když nic nenajdeme - schovej editory
|
||||
hideFrontlineEditor();
|
||||
hideArrowEditor();
|
||||
hideFrontlineEditor();
|
||||
handleClick(e, ARROW, arrowParamsMap, showArrowEditor);
|
||||
handleClick(e, FRONTLINE, frontlineParamsMap, showFrontlineEditor);
|
||||
});
|
||||
|
||||
map.dragPan.enable();
|
||||
function DrawArrow(coordinates, polygonId)
|
||||
{
|
||||
if (!arrowParamsMap.has(polygonId)) {
|
||||
arrowParamsMap.set(polygonId, {
|
||||
splineStep: 20,
|
||||
offsetDistance: 12000,
|
||||
calculation: ARROW_BODY_STYLE_LINEAR,
|
||||
range: 1,
|
||||
minValue: 0.1,
|
||||
widthArrow: 5,
|
||||
lengthArrow: 8
|
||||
});
|
||||
}
|
||||
|
||||
const params = arrowParamsMap.get(polygonId);
|
||||
|
||||
const arrowGeoJSON = getArrowPolygon(
|
||||
{ points: coordinates, splineStep: params.splineStep, offsetDistance: params.offsetDistance },
|
||||
{ calculation: params.calculation, range: params.range, minValue: params.minValue },
|
||||
{ widthArrow: params.widthArrow, lengthArrow: params.lengthArrow }
|
||||
);
|
||||
|
||||
const arrowLayerId = ARROW + "-" + polygonId;
|
||||
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
|
||||
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
|
||||
drawArrowOnMap(arrowGeoJSON, ARROW + "-" + polygonId);
|
||||
const allFeatures = draw.getAll().features;
|
||||
currentFeature = allFeatures.find(f => f.polygonId === polygonId);
|
||||
|
||||
}
|
||||
|
||||
function DrawFrontline(coordinates, polygonId){
|
||||
if (!frontlineParamsMap.has(polygonId)) {
|
||||
frontlineParamsMap.set(polygonId, {
|
||||
splineStep: 0.08,
|
||||
offsetDistance: 10000,
|
||||
style: LEFT_SIDE,
|
||||
protrusion: {
|
||||
length: 15000,
|
||||
startSize: 5000,
|
||||
endSize: 500,
|
||||
gap: 15000
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const params = frontlineParamsMap.get(polygonId);
|
||||
|
||||
const frontlineData = {
|
||||
points: coordinates,
|
||||
splineStep: params.splineStep,
|
||||
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;
|
||||
}
|
||||
|
||||
if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
|
||||
let polygonToDrawLeft = frontlineGeoJSON.leftPoly;
|
||||
let polygonToDrawRight = frontlineGeoJSON.rightPoly;
|
||||
|
||||
const frontlineLayerId = FRONTLINE + "-" + polygonId;
|
||||
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
||||
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
||||
|
||||
drawFrontlineOnMap(polygonToDrawLeft, FRONTLINE + "-" + polygonId);
|
||||
drawFrontlineOnMap(polygonToDrawRight, FRONTLINE + "-" + (polygonId+1));
|
||||
|
||||
const allFeatures = draw.getAll().features;
|
||||
currentFeature = allFeatures.find(f => f.polygonId === polygonId);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const frontlineLayerId = FRONTLINE + "-" + polygonId;
|
||||
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
||||
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
||||
drawFrontlineOnMap(polygonToDraw, FRONTLINE + "-" + polygonId);
|
||||
const allFeatures = draw.getAll().features;
|
||||
currentFeature = allFeatures.find(f => f.polygonId === polygonId);
|
||||
|
||||
}
|
||||
|
||||
function handleDraw(e) {
|
||||
const feature = e.features[0];
|
||||
const coords = feature.geometry.coordinates;
|
||||
const id = feature.id;
|
||||
|
||||
|
||||
|
||||
if (currentDrawStyle === ARROW) {
|
||||
DrawArrow(coords, id);
|
||||
} else if (currentDrawStyle === FRONTLINE) {
|
||||
DrawFrontline(coords, id);
|
||||
}
|
||||
}
|
||||
|
||||
function handleClick(click, prefix, paramsMap, showEditorFunction, hideEditorFunction) {
|
||||
|
||||
console.log("currentFeature" + currentFeature);
|
||||
const features = map.queryRenderedFeatures(click.point, {
|
||||
layers: map.getStyle().layers
|
||||
.filter(l => l.id.startsWith(prefix + "-"))
|
||||
.map(l => l.id)
|
||||
});
|
||||
|
||||
if (features.length === 0) return;
|
||||
|
||||
const feature = features[0];
|
||||
const featureId = feature.layer.id.replace(prefix + "-", '');
|
||||
|
||||
const allFeatures = draw.getAll().features;
|
||||
currentFeature = allFeatures.find(f => f.id === featureId);
|
||||
|
||||
console.log("currentFeature" + currentFeature);
|
||||
if (currentFeature) {
|
||||
const params = paramsMap.get(featureId);
|
||||
if (params) {
|
||||
showEditorFunction(params);
|
||||
}
|
||||
draw.changeMode('direct_select', { featureId: featureId });
|
||||
}
|
||||
}
|
||||
|
||||
function MyDelete(polygonType)
|
||||
{
|
||||
@ -199,107 +276,7 @@ function MyDelete(polygonType)
|
||||
hideFrontlineEditor();
|
||||
}
|
||||
|
||||
function handleDraw(e) {
|
||||
const feature = e.features[0];
|
||||
|
||||
if (feature.geometry.type !== 'LineString') return;
|
||||
|
||||
const coords = feature.geometry.coordinates;
|
||||
const id = feature.id;
|
||||
|
||||
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 }
|
||||
);
|
||||
|
||||
const arrowLayerId = ARROW + "-" + id;
|
||||
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
|
||||
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
|
||||
drawArrowOnMap(arrowGeoJSON, ARROW + "-" + id);
|
||||
const allFeatures = draw.getAll().features;
|
||||
currentFeature = allFeatures.find(f => f.id === id);
|
||||
|
||||
} else if (currentDrawStyle === FRONTLINE) {
|
||||
if (!frontlineParamsMap.has(id)) {
|
||||
frontlineParamsMap.set(id, {
|
||||
splineStep: 0.08,
|
||||
offsetDistance: 10000,
|
||||
style: LEFT_SIDE,
|
||||
protrusion: {
|
||||
length: 15000,
|
||||
startSize: 5000,
|
||||
endSize: 500,
|
||||
gap: 15000
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const params = frontlineParamsMap.get(id);
|
||||
|
||||
const frontlineData = {
|
||||
points: coords,
|
||||
splineStep: params.splineStep,
|
||||
offsetDistance: params.offsetDistance,
|
||||
style: params.style
|
||||
};
|
||||
|
||||
const protrusionData = params.protrusion;
|
||||
|
||||
console.log("Create");
|
||||
console.log(frontlineData);
|
||||
console.log(protrusionData);
|
||||
const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
|
||||
|
||||
let polygonToDraw = frontlineGeoJSON;
|
||||
if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
|
||||
polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
|
||||
}
|
||||
|
||||
if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
|
||||
let polygonToDrawLeft = frontlineGeoJSON.leftPoly;
|
||||
let polygonToDrawRight = frontlineGeoJSON.rightPoly;
|
||||
|
||||
console.log("polygonToDrawLeft", polygonToDrawLeft);
|
||||
console.log("polygonToDrawRight", polygonToDrawRight);
|
||||
|
||||
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));
|
||||
|
||||
const allFeatures = draw.getAll().features;
|
||||
currentFeature = allFeatures.find(f => f.id === id);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const frontlineLayerId = FRONTLINE + "-" + id;
|
||||
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
||||
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
||||
drawFrontlineOnMap(polygonToDraw, FRONTLINE + "-" + id);
|
||||
const allFeatures = draw.getAll().features;
|
||||
currentFeature = allFeatures.find(f => f.id === id);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function drawArrowOnMap(geojson, id) {
|
||||
map.addSource(id, {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user