Compare commits
No commits in common. "ed42327ff5b340efab919993e5f201d8f3d2e674" and "b0cfaee2e782cc78fd59d8d95671d6a6cada9aa0" have entirely different histories.
ed42327ff5
...
b0cfaee2e7
568
Drawing.js
568
Drawing.js
@ -1,568 +0,0 @@
|
|||||||
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";
|
|
||||||
|
|
||||||
const ARROW = "arrow";
|
|
||||||
const FRONTLINE = "frontline";
|
|
||||||
|
|
||||||
const ADDITIONAL_SIDE = "additionalSide"; // used for Id in BOTH_SIDES style
|
|
||||||
|
|
||||||
const DEFAULT_ARROW_PARAMS = {
|
|
||||||
splineStep: 20,
|
|
||||||
offsetDistance: 12000,
|
|
||||||
calculation: ARROW_BODY_STYLE_LINEAR,
|
|
||||||
range: 1,
|
|
||||||
minValue: 0.1,
|
|
||||||
widthArrow: 5,
|
|
||||||
lengthArrow: 8,
|
|
||||||
paintOptions: {
|
|
||||||
"fill-color": "#0099ff",
|
|
||||||
"fill-outline-color": "#005588",
|
|
||||||
"fill-opacity": 0.6
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const DEFAULT_FRONTLINE_PARAMS = {
|
|
||||||
splineStep: 0.08,
|
|
||||||
offsetDistance: 10000,
|
|
||||||
style: LEFT_SIDE,
|
|
||||||
protrusion: {
|
|
||||||
length: 15000,
|
|
||||||
startSize: 5000,
|
|
||||||
endSize: 500,
|
|
||||||
gap: 15000
|
|
||||||
},
|
|
||||||
paintOptionsLeft: {
|
|
||||||
"fill-color": "#00ff37",
|
|
||||||
"fill-outline-color": "#008809",
|
|
||||||
"fill-opacity": 0.6
|
|
||||||
},
|
|
||||||
paintOptionsRight: {
|
|
||||||
"fill-color": "#0011ff",
|
|
||||||
"fill-outline-color": "#002b88",
|
|
||||||
"fill-opacity": 0.6
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
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
|
|
||||||
});
|
|
||||||
|
|
||||||
// Drawing visuals
|
|
||||||
const draw = new MapboxDraw({
|
|
||||||
displayControlsDefault: false,
|
|
||||||
controls: {
|
|
||||||
line_string: true
|
|
||||||
},
|
|
||||||
defaultMode: 'draw_line_string',
|
|
||||||
styles: [
|
|
||||||
// Main drawing line
|
|
||||||
{
|
|
||||||
id: 'gl-draw-line',
|
|
||||||
type: 'line',
|
|
||||||
filter: ['all', ['==', '$type', 'LineString'], ['==', 'active', 'true']],
|
|
||||||
layout: {
|
|
||||||
'line-cap': 'round',
|
|
||||||
'line-join': 'round'
|
|
||||||
},
|
|
||||||
paint: {
|
|
||||||
'line-color': 'rgb(0, 255, 0)',
|
|
||||||
'line-width': 4
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// This makes the nonstop visible line invisible
|
|
||||||
{
|
|
||||||
id: 'gl-draw-line-inactive',
|
|
||||||
type: 'line',
|
|
||||||
filter: ['all', ['==', '$type', 'LineString'], ['==', 'deactive', 'false']],
|
|
||||||
layout: {
|
|
||||||
'line-cap': 'round',
|
|
||||||
'line-join': 'round'
|
|
||||||
},
|
|
||||||
paint: {
|
|
||||||
'line-color': 'rgba(0, 0, 0, 0)',
|
|
||||||
'line-width': 2
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 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': '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': 'rgb(0, 255, 0)'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// Midpoints
|
|
||||||
{
|
|
||||||
id: 'gl-draw-polygon-midpoint',
|
|
||||||
type: 'circle',
|
|
||||||
filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
|
|
||||||
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) => {
|
|
||||||
hideArrowEditor();
|
|
||||||
hideFrontlineEditor();
|
|
||||||
handleClick(e, ARROW, arrowParamsMap, showArrowEditor);
|
|
||||||
handleClick(e, FRONTLINE, frontlineParamsMap, showFrontlineEditor);
|
|
||||||
});
|
|
||||||
map.dragPan.enable();
|
|
||||||
|
|
||||||
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) {
|
|
||||||
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;
|
|
||||||
|
|
||||||
currentDrawStyle = prefix;
|
|
||||||
updateButtonStyles();
|
|
||||||
const feature = features[0];
|
|
||||||
const featureId = feature.layer.id.replace(prefix + "-", '');
|
|
||||||
|
|
||||||
const allFeatures = draw.getAll().features;
|
|
||||||
currentFeature = allFeatures.find(f => f.id === featureId);
|
|
||||||
|
|
||||||
if (currentFeature) {
|
|
||||||
const params = paramsMap.get(featureId);
|
|
||||||
if (params) {
|
|
||||||
showEditorFunction(params);
|
|
||||||
}
|
|
||||||
draw.changeMode('direct_select', { featureId: featureId });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function DrawArrow(coordinates, polygonId) {
|
|
||||||
if (!arrowParamsMap.has(polygonId)) {
|
|
||||||
arrowParamsMap.set(polygonId, structuredClone(DEFAULT_ARROW_PARAMS));
|
|
||||||
}
|
|
||||||
|
|
||||||
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
|
|
||||||
}
|
|
||||||
);
|
|
||||||
updatePolygonOnMap(ARROW, polygonId, drawOnMap, arrowGeoJSON, params.paintOptions);
|
|
||||||
}
|
|
||||||
|
|
||||||
function DrawFrontline(coordinates, polygonId) {
|
|
||||||
if (!frontlineParamsMap.has(polygonId)) {
|
|
||||||
frontlineParamsMap.set(polygonId, structuredClone(DEFAULT_FRONTLINE_PARAMS));
|
|
||||||
}
|
|
||||||
|
|
||||||
const params = frontlineParamsMap.get(polygonId);
|
|
||||||
const frontlineGeoJSON = getFrontline(
|
|
||||||
{
|
|
||||||
points: coordinates,
|
|
||||||
splineStep: params.splineStep,
|
|
||||||
offsetDistance: params.offsetDistance,
|
|
||||||
style: params.style
|
|
||||||
},
|
|
||||||
params.protrusion
|
|
||||||
);
|
|
||||||
|
|
||||||
let polygonToDraw = frontlineGeoJSON;
|
|
||||||
|
|
||||||
// Only one side
|
|
||||||
if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
|
|
||||||
polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Both sides
|
|
||||||
if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
|
|
||||||
updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsLeft);
|
|
||||||
|
|
||||||
let additionalPolygonToDraw = frontlineGeoJSON.rightPoly;
|
|
||||||
|
|
||||||
drawOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId + ADDITIONAL_SIDE), params.paintOptionsRight);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (params.style == 1){ // LEFT_SIDE
|
|
||||||
updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsLeft);
|
|
||||||
}else if(params.style == 2){ // RIGHT_SIDE
|
|
||||||
updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsRight);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updatePolygonOnMap(prefix, polygonId, drawFunction, geojson, paintOptions) {
|
|
||||||
const layerId = prefix + "-" + polygonId;
|
|
||||||
|
|
||||||
if (map.getLayer(layerId)) map.removeLayer(layerId);
|
|
||||||
if (map.getSource(layerId)) map.removeSource(layerId);
|
|
||||||
|
|
||||||
drawFunction(geojson, layerId, paintOptions);
|
|
||||||
|
|
||||||
const allFeatures = draw.getAll().features;
|
|
||||||
currentFeature = allFeatures.find(f => f.id === polygonId);
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawOnMap(frontlineGeoJSON, id, paintOptions = {}) {
|
|
||||||
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': paintOptions['fill-color'],
|
|
||||||
'fill-opacity': paintOptions['fill-opacity'],
|
|
||||||
'fill-outline-color': paintOptions['fill-outline-color']
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function handleDelete(polygonType)
|
|
||||||
{
|
|
||||||
if (!currentFeature) return;
|
|
||||||
|
|
||||||
const id = currentFeature.id;
|
|
||||||
|
|
||||||
draw.delete(id);
|
|
||||||
|
|
||||||
//ARROW
|
|
||||||
if(polygonType == ARROW){
|
|
||||||
const arrowLayerId = polygonType + "-" + id;
|
|
||||||
DeleteFromMap(arrowLayerId, id);
|
|
||||||
}
|
|
||||||
|
|
||||||
//Frontline
|
|
||||||
if(polygonType == FRONTLINE){
|
|
||||||
const frontlineLayerId = polygonType + "-" + id;
|
|
||||||
|
|
||||||
if (frontlineParamsMap.get(id).style == 3){ //BOTH_SIDES
|
|
||||||
const frontlineLayerIdB = polygonType + "-" + (id + ADDITIONAL_SIDE);
|
|
||||||
|
|
||||||
DeleteFromMap(frontlineLayerId, id);
|
|
||||||
DeleteFromMap(frontlineLayerIdB, id + ADDITIONAL_SIDE);
|
|
||||||
hideArrowEditor();
|
|
||||||
hideFrontlineEditor();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
DeleteFromMap(frontlineLayerId, id);
|
|
||||||
}
|
|
||||||
|
|
||||||
hideArrowEditor();
|
|
||||||
hideFrontlineEditor();
|
|
||||||
}
|
|
||||||
|
|
||||||
function DeleteFromMap(layerId, FeatureId){
|
|
||||||
if (map.getLayer(layerId)) map.removeLayer(layerId);
|
|
||||||
if (map.getSource(layerId)) map.removeSource(layerId);
|
|
||||||
|
|
||||||
arrowParamsMap.delete(FeatureId);
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
document.getElementById('arrowFillColor').value = params.paintOptions["fill-color"];
|
|
||||||
document.getElementById('arrowOutlineColor').value = params.paintOptions["fill-outline-color"];
|
|
||||||
parseFloat(document.getElementById('arrowOpacity').value = params.paintOptions["fill-opacity"]);
|
|
||||||
}
|
|
||||||
|
|
||||||
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('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;
|
|
||||||
|
|
||||||
document.getElementById('frontlineFillColorLeft').value = params.paintOptionsLeft["fill-color"];
|
|
||||||
document.getElementById('frontlineOutlineColorLeft').value = params.paintOptionsLeft["fill-outline-color"];
|
|
||||||
parseFloat(document.getElementById('frontlineOpacityLeft').value = params.paintOptionsLeft["fill-opacity"]);
|
|
||||||
|
|
||||||
document.getElementById('frontlineFillColorRight').value = params.paintOptionsRight["fill-color"];
|
|
||||||
document.getElementById('frontlineOutlineColorRight').value = params.paintOptionsRight["fill-outline-color"];
|
|
||||||
parseFloat(document.getElementById('frontlineOpacityRight').value = params.paintOptionsRight["fill-opacity"]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideFrontlineEditor() {
|
|
||||||
const popup = document.getElementById('frontline-editor');
|
|
||||||
popup.style.display = 'none';
|
|
||||||
currentFeature = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateButtonStyles() {
|
|
||||||
const buttonsContainer = document.getElementById('drawStyleButtons');
|
|
||||||
Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => {
|
|
||||||
const isSelected = btn.getAttribute('data-style') === currentDrawStyle;
|
|
||||||
btn.style.backgroundColor = isSelected ? '#333' : '#f0f0f0';
|
|
||||||
btn.style.color = isSelected ? '#fff' : '#000';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
|
|
||||||
document.getElementById('removeArrow').addEventListener('click', () => {
|
|
||||||
|
|
||||||
handleDelete(ARROW);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('removeFrontline').addEventListener('click', () => {
|
|
||||||
|
|
||||||
handleDelete(FRONTLINE);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('applyArrowChanges').addEventListener('click', () => {
|
|
||||||
if (!currentFeature) return;
|
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
const fillColor = document.getElementById('arrowFillColor').value;
|
|
||||||
const outlineColor = document.getElementById('arrowOutlineColor').value;
|
|
||||||
const opacity = parseFloat(document.getElementById('arrowOpacity').value);
|
|
||||||
|
|
||||||
const paintOptions = {
|
|
||||||
'fill-color': fillColor,
|
|
||||||
'fill-outline-color': outlineColor,
|
|
||||||
'fill-opacity': opacity
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
arrowParamsMap.set(id, {
|
|
||||||
splineStep,
|
|
||||||
offsetDistance,
|
|
||||||
calculation: ARROW_BODY_STYLE_LINEAR,
|
|
||||||
range,
|
|
||||||
minValue,
|
|
||||||
widthArrow,
|
|
||||||
lengthArrow,
|
|
||||||
paintOptions
|
|
||||||
});
|
|
||||||
|
|
||||||
const arrowGeoJSON = getArrowPolygon({
|
|
||||||
points: coords,
|
|
||||||
splineStep,
|
|
||||||
offsetDistance
|
|
||||||
}, {
|
|
||||||
calculation: ARROW_BODY_STYLE_LINEAR,
|
|
||||||
range,
|
|
||||||
minValue
|
|
||||||
}, {
|
|
||||||
widthArrow,
|
|
||||||
lengthArrow
|
|
||||||
});
|
|
||||||
|
|
||||||
//ARROW
|
|
||||||
const arrowLayerId = ARROW + "-" + id;
|
|
||||||
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
|
|
||||||
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
|
|
||||||
|
|
||||||
drawOnMap(arrowGeoJSON, ARROW + "-" + id, paintOptions);
|
|
||||||
|
|
||||||
const allFeatures = draw.getAll().features;
|
|
||||||
currentFeature = allFeatures.find(f => f.id === 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 offsetDistance = parseFloat(document.getElementById('offsetDistanceFrontline').value);
|
|
||||||
const style = parseInt(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);
|
|
||||||
|
|
||||||
const fillColorLeft = document.getElementById('frontlineFillColorLeft').value;
|
|
||||||
const outlineColorLeft = document.getElementById('frontlineOutlineColorLeft').value;
|
|
||||||
const opacityLeft = parseFloat(document.getElementById('frontlineOpacityLeft').value);
|
|
||||||
const paintOptionsLeft = {
|
|
||||||
'fill-color': fillColorLeft,
|
|
||||||
'fill-outline-color': outlineColorLeft,
|
|
||||||
'fill-opacity': opacityLeft
|
|
||||||
};
|
|
||||||
|
|
||||||
const fillColorRight = document.getElementById('frontlineFillColorRight').value;
|
|
||||||
const outlineColorRight = document.getElementById('frontlineOutlineColorRight').value;
|
|
||||||
const opacityRight = parseFloat(document.getElementById('frontlineOpacityRight').value);
|
|
||||||
const paintOptionsRight = {
|
|
||||||
'fill-color': fillColorRight,
|
|
||||||
'fill-outline-color': outlineColorRight,
|
|
||||||
'fill-opacity': opacityRight
|
|
||||||
};
|
|
||||||
|
|
||||||
frontlineParamsMap.set(id, {
|
|
||||||
splineStep,
|
|
||||||
offsetDistance,
|
|
||||||
style,
|
|
||||||
protrusion: {
|
|
||||||
length,
|
|
||||||
startSize,
|
|
||||||
endSize,
|
|
||||||
gap
|
|
||||||
},
|
|
||||||
paintOptionsLeft,
|
|
||||||
paintOptionsRight
|
|
||||||
});
|
|
||||||
|
|
||||||
const frontlineData = {
|
|
||||||
points: coords,
|
|
||||||
splineStep,
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
|
|
||||||
let polygonToDrawLeft = frontlineGeoJSON.leftPoly;
|
|
||||||
let polygonToDrawRight = frontlineGeoJSON.rightPoly;
|
|
||||||
const frontlineLayerId = FRONTLINE + "-" + id;
|
|
||||||
|
|
||||||
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
|
||||||
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
|
||||||
|
|
||||||
drawOnMap(polygonToDrawLeft, FRONTLINE + "-" + id + ADDITIONAL_SIDE, paintOptionsLeft);
|
|
||||||
drawOnMap(polygonToDrawRight, FRONTLINE + "-" + (id), paintOptionsRight);
|
|
||||||
|
|
||||||
const allFeatures = draw.getAll().features;
|
|
||||||
currentFeature = allFeatures.find(f => f.id === id);
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const frontlineLayerId = FRONTLINE + "-" + id;
|
|
||||||
if (map.getLayer(frontlineLayerId + ADDITIONAL_SIDE)) map.removeLayer(frontlineLayerId + ADDITIONAL_SIDE);
|
|
||||||
if (map.getSource(frontlineLayerId + ADDITIONAL_SIDE)) map.removeSource(frontlineLayerId + ADDITIONAL_SIDE);
|
|
||||||
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
|
||||||
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
|
||||||
|
|
||||||
let paintOptions;
|
|
||||||
if(frontlineData.style == LEFT_SIDE){
|
|
||||||
paintOptions = paintOptionsLeft;
|
|
||||||
}else if(frontlineData.style == RIGHT_SIDE)
|
|
||||||
{
|
|
||||||
paintOptions = paintOptionsRight;
|
|
||||||
}
|
|
||||||
|
|
||||||
drawOnMap(polygonToDraw, FRONTLINE + "-" + id, paintOptions);
|
|
||||||
|
|
||||||
const allFeatures = draw.getAll().features;
|
|
||||||
currentFeature = allFeatures.find(f => f.id === id);
|
|
||||||
});
|
|
||||||
|
|
||||||
const buttonsContainer = document.getElementById('drawStyleButtons');
|
|
||||||
buttonsContainer.addEventListener('click', (event) => {
|
|
||||||
if (event.target.tagName !== 'BUTTON') return;
|
|
||||||
|
|
||||||
Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => btn.classList.remove('active'));
|
|
||||||
|
|
||||||
event.target.classList.add('active');
|
|
||||||
|
|
||||||
currentDrawStyle = event.target.getAttribute('data-style');
|
|
||||||
updateButtonStyles();
|
|
||||||
});
|
|
||||||
updateButtonStyles();
|
|
||||||
});
|
|
||||||
|
|
||||||
@ -12,8 +12,7 @@ const map = new mapboxgl.Map({
|
|||||||
center: [10, 50],
|
center: [10, 50],
|
||||||
zoom: 5
|
zoom: 5
|
||||||
});
|
});
|
||||||
//this is my test push
|
|
||||||
//second
|
|
||||||
map.on('load', () => {
|
map.on('load', () => {
|
||||||
const fullPolygon = getArrowPolygon(arrowData, style, arrowHeadData);
|
const fullPolygon = getArrowPolygon(arrowData, style, arrowHeadData);
|
||||||
const circleGeoJSON = getCirclePolygon(circleCenter, circleRadius, circleDensity);
|
const circleGeoJSON = getCirclePolygon(circleCenter, circleRadius, circleDensity);
|
||||||
|
|||||||
123
index.html
123
index.html
@ -1,125 +1,6 @@
|
|||||||
<!--
|
|
||||||
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>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<h4>Styling</h4>
|
|
||||||
<label>Fill Color: <input id="arrowFillColor" type="color" value="#000000"></label><br>
|
|
||||||
<label>Outline Color: <input id="arrowOutlineColor" type="color" value="#000000"></label><br>
|
|
||||||
<label>Opacity: <input id="arrowOpacity" type="number" min="0" max="1" step="0.1" value="0.6"></label><br>
|
|
||||||
|
|
||||||
<button id="applyArrowChanges">Apply Changes</button>
|
|
||||||
<button id="removeArrow">Remove Arrow</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>Offset Distance: <input id="offsetDistanceFrontline" type="number" step="1000"></label><br>
|
|
||||||
<label>Style:
|
|
||||||
<select id="styleFrontline">
|
|
||||||
<option value=1>Left Side</option>
|
|
||||||
<option value=2>Right Side</option>
|
|
||||||
<option value=3>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>
|
|
||||||
|
|
||||||
<h4>Styling right side</h4>
|
|
||||||
<label>Fill Color: <input id="frontlineFillColorRight" type="color" value="#000000"></label><br>
|
|
||||||
<label>Outline Color: <input id="frontlineOutlineColorRight" type="color" value="#000000"></label><br>
|
|
||||||
<label>Opacity: <input id="frontlineOpacityRight" type="number" min="0" max="1" step="0.1" value="0.6"></label><br>
|
|
||||||
|
|
||||||
<h4>Styling left side</h4>
|
|
||||||
<label>Fill Color: <input id="frontlineFillColorLeft" type="color" value="#000000"></label><br>
|
|
||||||
<label>Outline Color: <input id="frontlineOutlineColorLeft" type="color" value="#000000"></label><br>
|
|
||||||
<label>Opacity: <input id="frontlineOpacityLeft" type="number" min="0" max="1" step="0.1" value="0.6"></label><br>
|
|
||||||
|
|
||||||
<button id="applyFrontlineChanges">Apply Changes</button>
|
|
||||||
<button id="removeFrontline">Remove Frontline</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="drawStyleButtons" style="position: absolute; top: 10px; left: 50px; background: white; padding: 5px; z-index: 10;">
|
|
||||||
<button data-style="frontline">Frontline</button>
|
|
||||||
<button data-style="arrow">Arrow</button>
|
|
||||||
</div>
|
|
||||||
<script type="module" src="Drawing.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
MAPBOX
|
MAPBOX
|
||||||
|
-->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
@ -138,7 +19,7 @@ body { margin: 0; padding: 0; }
|
|||||||
<script type="module" src="MapPolygons.js"></script>
|
<script type="module" src="MapPolygons.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
-->
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
CANVAS
|
CANVAS
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user