Compare commits
No commits in common. "main" and "frontline" have entirely different histories.
275
Arrow.js
275
Arrow.js
@ -1,275 +0,0 @@
|
||||
export const ARROW_BODY_STYLE_CONSTANT = 1;
|
||||
export const ARROW_BODY_STYLE_LINEAR = 2;
|
||||
export const ARROW_BODY_STYLE_EXPONENTIAL = 3;
|
||||
|
||||
|
||||
export const METERS = 'meters';
|
||||
|
||||
import * as turf from "@turf/turf";
|
||||
|
||||
//ARROW
|
||||
// Cubic interpolation source from https://www.paulinternet.nl/?page=bicubic
|
||||
/**
|
||||
* @param {number[]} points - An array of 4 values [p0, p1, p2, p3] representing control points.
|
||||
* @param {number} t - The relative position between p1 and p2 (range typically from 0 to 1).
|
||||
* @returns {number} The interpolated value.
|
||||
*/
|
||||
export function cubicInterpolate(p, t) {
|
||||
return p[1] + 0.5 * t * (p[2] - p[0] + t * (2.0 * p[0] - 5.0 * p[1] + 4.0 * p[2] - p[3] + t * (3.0 * (p[1] - p[2]) + p[3] - p[0])));
|
||||
}
|
||||
|
||||
function exponentialWidthCurve(normalizedPosition, range = 5, minValue = 0.1) {
|
||||
return minValue + (1 - minValue) * Math.exp(-range * normalizedPosition);
|
||||
}
|
||||
|
||||
function linearWidthCurve(normalizedPosition, range = 1, minValue = 0.1) {
|
||||
return 1 + (minValue - 1) * normalizedPosition / range ;
|
||||
}
|
||||
|
||||
//GEOJSON
|
||||
/**
|
||||
* @param {Object} arrowData - Object with data for arrow
|
||||
* @param {Array<[number, number]>} arrowData.points - List of points defining the arrow's path.
|
||||
* @param {number} arrowData.splineStep - The step size for the spline interpolation.
|
||||
* @param {number} arrowData.offsetDistance - The offset distance for the arrow's path (width).
|
||||
*
|
||||
* @param {Object} style - Object with data for the calculation style.
|
||||
* @param {number} style.calculation - The style for the calculation
|
||||
* @param {number} style.range - The range for the calculation style.
|
||||
* @param {number} style.minValue - The minimum value used in the calculation.
|
||||
*
|
||||
* @param {Object} arrowHeadData - Optional data for the arrowhead.
|
||||
* @param {number} arrowHeadData.widthArrow - The width of the arrowhead.
|
||||
* @param {number} arrowHeadData.lengthArrow - The length of the arrowhead.
|
||||
*
|
||||
* @returns {GeoJSON.Feature<GeoJSON.Polygon>} - An array of points representing the arrow polygon.
|
||||
*/
|
||||
export function getArrowPolygon(arrowData, style, arrowHeadData) {
|
||||
if (!arrowData || !(arrowData.points) || arrowData.points.length === 0) {
|
||||
console.warn("getArrowPolygon: Invalid arrowData or empty points array.");
|
||||
return [];
|
||||
}
|
||||
|
||||
if (!style) {
|
||||
style = {
|
||||
calculation: ARROW_BODY_STYLE_CONSTANT,
|
||||
range: 0,
|
||||
minValue: 0
|
||||
};
|
||||
}
|
||||
|
||||
const splinePoints = computeSplinePoints(arrowData.points, arrowData.splineStep);
|
||||
const { leftSidePoints, rightSidePoints } = computeSideOffsets(splinePoints, arrowData.offsetDistance, style);
|
||||
|
||||
const end = splinePoints[splinePoints.length -1];
|
||||
const bearing = averageBearing(splinePoints, 3);
|
||||
const arrowHead= arrowHeadData
|
||||
? createIsoscelesTriangleCoords(
|
||||
turf.point(end),
|
||||
arrowData.offsetDistance * arrowHeadData.widthArrow, arrowData.offsetDistance * arrowHeadData.lengthArrow, bearing)
|
||||
: [];
|
||||
|
||||
const polygonCoords = [
|
||||
...leftSidePoints,
|
||||
...arrowHead,
|
||||
...rightSidePoints.reverse(),
|
||||
leftSidePoints[0]
|
||||
];
|
||||
|
||||
return turf.polygon([[...polygonCoords]]);
|
||||
}
|
||||
|
||||
function averageBearing(points, count = 3) {
|
||||
const bearings = [];
|
||||
for (let i = points.length - count; i < points.length -1; i++) {
|
||||
if (i >= 0) {
|
||||
bearings.push(turf.bearing(turf.point(points[i]), turf.point(points[i + 1])));
|
||||
}
|
||||
}
|
||||
|
||||
const sinSum = bearings.reduce((sum, b) => sum + Math.sin(b * Math.PI / 180), 0);
|
||||
const cosSum = bearings.reduce((sum, b) => sum + Math.cos(b * Math.PI / 180), 0);
|
||||
return Math.atan2(sinSum, cosSum) * 180 / Math.PI;
|
||||
}
|
||||
|
||||
function computeSplinePoints(points, splineStep = 10) {
|
||||
if (points.length < 2) return points;
|
||||
const result = [];
|
||||
|
||||
for (let i = 0; i < points.length - 1; i++) {
|
||||
const p0 = points[i === 0 ? i : i - 1];
|
||||
const p1 = points[i];
|
||||
const p2 = points[i + 1];
|
||||
const p3 = points[i + 2] || p2;
|
||||
for (let j = 0; j < splineStep; j++) {
|
||||
const t = j / splineStep;
|
||||
const lon = cubicInterpolate([p0[0], p1[0], p2[0], p3[0]], t);
|
||||
const lat = cubicInterpolate([p0[1], p1[1], p2[1], p3[1]], t);
|
||||
result.push([lon, lat]);
|
||||
}
|
||||
}
|
||||
|
||||
result.push(points[points.length - 1]);
|
||||
return result;
|
||||
}
|
||||
|
||||
function computeSideOffsets(points, offsetMeters, style) {
|
||||
let leftSidePoints = [];
|
||||
let rightSidePoints = [];
|
||||
const total = points.length - 1;
|
||||
|
||||
for (let i = 1; i < points.length; i++) {
|
||||
const previousPoint = points[i - 1];
|
||||
const currentPoint = points[i];
|
||||
const bearing = turf.bearing(turf.point(previousPoint), turf.point(currentPoint));
|
||||
const normalizedPosition = i / total;
|
||||
|
||||
let localOffsetDistance;
|
||||
switch (style.calculation) {
|
||||
case ARROW_BODY_STYLE_LINEAR:
|
||||
localOffsetDistance = offsetMeters * linearWidthCurve(normalizedPosition, style.range, style.minValue);
|
||||
break;
|
||||
case ARROW_BODY_STYLE_EXPONENTIAL:
|
||||
localOffsetDistance = offsetMeters * exponentialWidthCurve(normalizedPosition, style.range, style.minValue);
|
||||
break;
|
||||
case ARROW_BODY_STYLE_CONSTANT:
|
||||
default:
|
||||
localOffsetDistance = offsetMeters;
|
||||
}
|
||||
|
||||
leftSidePoints.push(turf.destination(turf.point(currentPoint), localOffsetDistance, bearing - 90, { units: METERS }).geometry.coordinates);
|
||||
rightSidePoints.push(turf.destination(turf.point(currentPoint), localOffsetDistance, bearing + 90, { units: METERS }).geometry.coordinates);
|
||||
}
|
||||
|
||||
return { leftSidePoints, rightSidePoints };
|
||||
}
|
||||
|
||||
function createIsoscelesTriangleCoords(center, baseLengthMeters, heightMeters, bearing = 0) {
|
||||
const halfBase = baseLengthMeters / 2;
|
||||
const left = turf.destination(center, halfBase, bearing - 90, { units: METERS }).geometry.coordinates;
|
||||
const right = turf.destination(center, halfBase, bearing + 90, { units: METERS }).geometry.coordinates;
|
||||
const tip = turf.destination(center, heightMeters, bearing, { units: METERS }).geometry.coordinates;
|
||||
return [left, tip, right];
|
||||
}
|
||||
//GEOJSON
|
||||
//CANVAS
|
||||
/**
|
||||
* @param {Object} arrowData - Object with data for arrow
|
||||
* @param {{x: number, y: number}[]} arrowData.points - List of points defining the arrow's path.
|
||||
* @param {number} arrowData.splineStep - The step size for the spline interpolation.
|
||||
* @param {number} arrowData.spacing - The spacing between the points along the arrow.
|
||||
* @param {number} arrowData.offsetDistance - The offset distance for the arrow's path (width).
|
||||
*
|
||||
* @param {Object} style - Object with data for the calculation style.
|
||||
* @param {number} style.calculation - The style for the calculation
|
||||
* @param {number} style.range - The range for the calculation style.
|
||||
* @param {number} style.minValue - The minimum value used in the calculation.
|
||||
*
|
||||
* @param {Object|undefined} arrowHeadData - Optional data for the arrowhead.
|
||||
* @param {number} arrowHeadData.widthArrow - The width of the arrowhead.
|
||||
* @param {number} arrowHeadData.lengthArrow - The length of the arrowhead.
|
||||
*
|
||||
* @returns {{x: number, y: number}[]} - An array of points representing the arrow polygon.
|
||||
*/
|
||||
export function getArrowPolygonEuclidean(
|
||||
arrowData,
|
||||
style= undefined,
|
||||
arrowHeadData = undefined) {
|
||||
if (!style)
|
||||
style = {
|
||||
calculation: ARROW_BODY_STYLE_CONSTANT,
|
||||
range: 0,
|
||||
minValue: 0
|
||||
};
|
||||
|
||||
const splinePoints = computeSplinePointsEuclidean(arrowData.points, arrowData.splineStep);
|
||||
const { leftSidePoints, rightSidePoints } = computeSidesEuclidean(splinePoints, arrowData.spacing, arrowData.offsetDistance, style);
|
||||
const arrowHead= arrowHeadData
|
||||
? computeArrowHeadEuclidean(splinePoints, arrowHeadData.widthArrow, arrowHeadData.lengthArrow)
|
||||
: [];
|
||||
|
||||
return [...leftSidePoints, ...arrowHead.reverse(), ...rightSidePoints.reverse()];
|
||||
}
|
||||
|
||||
function computeSplinePointsEuclidean(points, splineStep) {
|
||||
let splinePoints = [];
|
||||
|
||||
for (let i = 0; i < points.length - 1; i++) {
|
||||
const p0 = points[i === 0 ? i : i - 1];
|
||||
const p1 = points[i];
|
||||
const p2 = points[i + 1];
|
||||
const p3 = points[i + 2] || p2;
|
||||
for (let t = 0; t <= 1; t += splineStep) {
|
||||
splinePoints.push({
|
||||
x: cubicInterpolate([p0.x, p1.x, p2.x, p3.x], t),
|
||||
y: cubicInterpolate([p0.y, p1.y, p2.y, p3.y], t)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return splinePoints;
|
||||
}
|
||||
|
||||
function computeSidesEuclidean(splinePoints, spacing, offsetDistance, style) {
|
||||
|
||||
let leftSidePoints = [];
|
||||
let rightSidePoints = [];
|
||||
let accumulatedDistance = 0;
|
||||
|
||||
for (let i = 1; i < splinePoints.length; i++) {
|
||||
const previousPoint = splinePoints[i - 1];
|
||||
const currentPoint = splinePoints[i];
|
||||
const segmentLength = Math.hypot(currentPoint.x - previousPoint.x, currentPoint.y - previousPoint.y);
|
||||
|
||||
accumulatedDistance += segmentLength;
|
||||
|
||||
if (accumulatedDistance >= spacing || i === 1 || i === splinePoints.length - 1) {
|
||||
const distanceX = currentPoint.y - previousPoint.y;
|
||||
const distanceY = previousPoint.x - currentPoint.x;
|
||||
const length = Math.hypot(distanceX, distanceY);
|
||||
const normalizedPosition = i / (splinePoints.length - 1);
|
||||
|
||||
let localOffsetDistance;
|
||||
|
||||
switch (style.calculation) {
|
||||
case ARROW_BODY_STYLE_LINEAR:
|
||||
localOffsetDistance = offsetDistance * linearWidthCurve(normalizedPosition, style.range, style.minValue);
|
||||
break;
|
||||
case ARROW_BODY_STYLE_EXPONENTIAL:
|
||||
localOffsetDistance = offsetDistance * exponentialWidthCurve(normalizedPosition, style.range, style.minValue);
|
||||
break;
|
||||
case ARROW_BODY_STYLE_CONSTANT:
|
||||
default:
|
||||
localOffsetDistance = offsetDistance;
|
||||
}
|
||||
|
||||
const offsetX = (distanceX / length) * localOffsetDistance;
|
||||
const offsetY = (distanceY / length) * localOffsetDistance;
|
||||
|
||||
accumulatedDistance = 0;
|
||||
leftSidePoints.push({ x: currentPoint.x + offsetX, y: currentPoint.y + offsetY });
|
||||
rightSidePoints.push({ x: currentPoint.x - offsetX, y: currentPoint.y - offsetY });
|
||||
}
|
||||
}
|
||||
|
||||
return { leftSidePoints, rightSidePoints };
|
||||
}
|
||||
|
||||
function computeArrowHeadEuclidean(splinePoints, width, length) {
|
||||
const len = splinePoints.length;
|
||||
const lastPoint = splinePoints[len - 1];
|
||||
const secondLastPoint = splinePoints[len - 2];
|
||||
const x = lastPoint.x - secondLastPoint.x;
|
||||
const y = lastPoint.y - secondLastPoint.y;
|
||||
const magnitude = Math.hypot(x, y);
|
||||
const normalizedX = x / magnitude;
|
||||
const normalizedY = y / magnitude;
|
||||
|
||||
return [
|
||||
{ x: lastPoint.x - normalizedY * width, y: lastPoint.y + normalizedX * width },
|
||||
{ x: lastPoint.x + normalizedX * length, y: lastPoint.y + normalizedY * length },
|
||||
{ x: lastPoint.x + normalizedY * width, y: lastPoint.y - normalizedX * width },
|
||||
];
|
||||
}
|
||||
//CANVAS
|
||||
//ARROW
|
||||
@ -1,10 +1,10 @@
|
||||
const canvas = document.getElementById("canvas");
|
||||
// Compute arrow polygon
|
||||
import { getArrowPolygonEuclidean } from "athena-utils/shape/Arrow.js";
|
||||
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 { getCirclePolygonEuclidean } from "athena-utils/shape/BasicShapes.js";
|
||||
import { getRectanglePolygonEuclidean } from "athena-utils/shape/BasicShapes.js";
|
||||
import { getFrontlineEuclidean } from "athena-utils/shape/Frontline.js";
|
||||
import { getCirclePolygon } from "athena-utils/shape/BasicShapes.js";
|
||||
import { getRectanglePolygon } from "athena-utils/shape/BasicShapes.js";
|
||||
import { getFrontline } from "athena-utils/shape/Frontline.js";
|
||||
import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
|
||||
// Polygon merge using Turf library
|
||||
import {mergeTurfPolygons} from "athena-utils/shape/Polygon.js";
|
||||
@ -154,13 +154,13 @@ const arrowDataA = {
|
||||
};
|
||||
|
||||
|
||||
const arrowPolygonA = getArrowPolygonEuclidean(arrowDataA, styleA, arrowHeadDataA);
|
||||
const arrowPolygonB = getArrowPolygonEuclidean(arrowDataB, styleB, arrowHeadDataB);
|
||||
const arrowPolygonC = getArrowPolygonEuclidean(arrowDataC, styleC);
|
||||
const arrowPolygonA = getArrowPolygon(arrowDataA, styleA, arrowHeadDataA);
|
||||
const arrowPolygonB = getArrowPolygon(arrowDataB, styleB, arrowHeadDataB);
|
||||
const arrowPolygonC = getArrowPolygon(arrowDataC, styleC);
|
||||
|
||||
const circlePolygon = getCirclePolygonEuclidean(circleCenter, circleRadius, circleDensity);
|
||||
const circlePolygonB = getCirclePolygonEuclidean(circleCenterB, circleRadiusB, circleDensityB);
|
||||
const rectanglePolygon = getRectanglePolygonEuclidean(rectangleCenter, rectangleSideA, rectangleSideB, rectangleRotation);
|
||||
const circlePolygon = getCirclePolygon(circleCenter, circleRadius, circleDensity);
|
||||
const circlePolygonB = getCirclePolygon(circleCenterB, circleRadiusB, circleDensityB);
|
||||
const rectanglePolygon = getRectanglePolygon(rectangleCenter, rectangleSideA, rectangleSideB, rectangleRotation);
|
||||
|
||||
const mergedTurfPoly = mergeTurfPolygons(arrowPolygonA, arrowPolygonC);
|
||||
const mergedTurfPolyAll = addTurfPolygonToMerge(mergedTurfPoly, arrowPolygonB);
|
||||
@ -168,21 +168,21 @@ const mergedTurfPolyAll = addTurfPolygonToMerge(mergedTurfPoly, arrowPolygonB);
|
||||
const mergedTurfPolyRectangle = addTurfPolygonToMerge(mergedTurfPolyAll, rectanglePolygon);
|
||||
const mergedRectangle = mergeTurfPolygons(circlePolygon, circlePolygonB);
|
||||
|
||||
const rectanglePoly = getRectanglePolygonEuclidean(circleCenter, rectangleSideA, rectangleSideB, rectangleRotation*-1);
|
||||
const rectanglePoly = getRectanglePolygon(circleCenter, rectangleSideA, rectangleSideB, rectangleRotation*-1);
|
||||
const rectangleToTurfPoly = toTurfPolygon(rectanglePoly);
|
||||
|
||||
const frontlinePolygonA = getFrontlineEuclidean(frontlineDataA);
|
||||
const frontlinePolygonA = getFrontline(frontlineDataA);
|
||||
let frontlinePolygonMergedA = toTurfPolygon(frontlinePolygonA.body);
|
||||
|
||||
|
||||
const frontlinePolygonB = getFrontlineEuclidean(frontlineDataB, protrusionDataB);
|
||||
const frontlinePolygonB = getFrontline(frontlineDataB, protrusionDataB);
|
||||
let frontlinePolygonMergedB = mergeTurfPolygons(frontlinePolygonB.body,frontlinePolygonB.protrusions[0]);
|
||||
for (let i = 1; i < frontlinePolygonB.protrusions.length; i++)
|
||||
{
|
||||
frontlinePolygonMergedB = addTurfPolygonToMerge(frontlinePolygonMergedB, frontlinePolygonB.protrusions[i]);
|
||||
}
|
||||
|
||||
const frontlinePolygonC = getFrontlineEuclidean(frontlineDataC, protrusionDataC);
|
||||
const frontlinePolygonC = getFrontline(frontlineDataC, protrusionDataC);
|
||||
|
||||
let frontlinePolygonMergedLeft = mergeTurfPolygons(frontlinePolygonC.bodyLeft, frontlinePolygonC.protrusionsLeft[0]);
|
||||
for (let i = 1; i < frontlinePolygonC.protrusionsLeft.length; i++) {
|
||||
|
||||
173
BasicShapes.js
173
BasicShapes.js
@ -1,173 +0,0 @@
|
||||
import * as turf from "@turf/turf";
|
||||
import { toMercator, toWgs84 } from '@turf/projection';
|
||||
|
||||
//CIRCLE
|
||||
const DISTANCE_PER_DEGREE_LONGITUDE = 111.320; // 2π×6378.1km/360
|
||||
const DISTANCE_PER_DEGREE_LATITUDE = 110.574; // 2π×6356.75km/360
|
||||
|
||||
//GEOJSON
|
||||
/**
|
||||
* @param {Object} center - The center point of the circle.
|
||||
* @param {number} center.x
|
||||
* @param {number} center.y
|
||||
* @param {number} radius - The radius of the circle.
|
||||
* @param {number} density - The number of points used to approximate the circle.
|
||||
*
|
||||
* @returns {GeoJSON.Feature<GeoJSON.Polygon>} GeoJSON Feature representing the circle polygon.
|
||||
*/
|
||||
export function getCirclePolygon(center, radius, density = 64) {
|
||||
if (!center || !radius ) {
|
||||
console.warn("getCirclePolygon: Invalid center, radius.");
|
||||
return [];
|
||||
}
|
||||
|
||||
const points = [];
|
||||
|
||||
const coords = {
|
||||
latitude: center[1],
|
||||
longitude: center[0]
|
||||
};
|
||||
|
||||
const distanceX = radius / (DISTANCE_PER_DEGREE_LONGITUDE * Math.cos(coords.latitude * Math.PI / 180));
|
||||
const distanceY = radius / DISTANCE_PER_DEGREE_LATITUDE;
|
||||
|
||||
for (let i = 0; i < density; i++) {
|
||||
const angle = (i / density) * Math.PI * 2;
|
||||
const x = distanceX * Math.cos(angle);
|
||||
const y = distanceY * Math.sin(angle);
|
||||
points.push([coords.longitude + x, coords.latitude + y]);
|
||||
}
|
||||
|
||||
// Close the circle by adding the first point again
|
||||
points.push(points[0]);
|
||||
|
||||
return turf.polygon([[...points]]);
|
||||
/*
|
||||
return {
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [points]
|
||||
},
|
||||
"properties": {}
|
||||
};*/
|
||||
}
|
||||
//GEOJSON
|
||||
//CANVAS
|
||||
/**
|
||||
* @param {Object} center - The center point of the circle.
|
||||
* @param {number} center.x
|
||||
* @param {number} center.y
|
||||
* @param {number} radius - The radius of the circle.
|
||||
* @param {number} density - The number of points used to approximate the circle.
|
||||
*
|
||||
* @returns {{x: number, y: number}[]} An array of points representing the vertices of the circle polygon.
|
||||
*/
|
||||
export function getCirclePolygonEuclidean(center, radius, density) {
|
||||
if (!center || !radius || !density) {
|
||||
console.warn("getCirclePolygonEuclidean: Invalid center, radius or density.");
|
||||
return [];
|
||||
}
|
||||
|
||||
const points = [];
|
||||
for (let i = 0; i < density; i++) {
|
||||
const angle = (i / density) * Math.PI * 2;
|
||||
const x = center.x + radius * Math.cos(angle);
|
||||
const y = center.y + radius * Math.sin(angle);
|
||||
points.push({ x, y });
|
||||
}
|
||||
return points;
|
||||
}
|
||||
//CANVAS
|
||||
//CIRCLE
|
||||
|
||||
//RECTANGLE
|
||||
//GEOJSON
|
||||
/**
|
||||
* @param {Object} center - The center point of the rectangle.
|
||||
* @param {number} center.x
|
||||
* @param {number} center.y
|
||||
* @param {number} width - The length of the first side of the rectangle.
|
||||
* @param {number} height - The length of the second side of the rectangle.
|
||||
* @param {number} rotation - The angle (in radians) by which to rotate the rectangle.
|
||||
*
|
||||
* @returns {GeoJSON.Feature<GeoJSON.Polygon>} GeoJSON Feature representing the rectangle polygon.
|
||||
*/
|
||||
export function getRectanglePolygon(center, width, height, rotation = 0) {
|
||||
if (!center || !width || !height) {
|
||||
console.warn("getRectanglePolygon: Invalid center, width or height.");
|
||||
return [];
|
||||
}
|
||||
|
||||
const widthMeters = width * 1000 ;
|
||||
const heightMeters = height * 1000;
|
||||
|
||||
const centerMerc = toMercator(turf.point(center)).geometry.coordinates;
|
||||
|
||||
const halfWidth = widthMeters / 2;
|
||||
const halfHeight = heightMeters / 2;
|
||||
|
||||
let corners = [
|
||||
[centerMerc[0] - halfWidth, centerMerc[1] + halfHeight], // topLeft
|
||||
[centerMerc[0] + halfWidth, centerMerc[1] + halfHeight], // topRight
|
||||
[centerMerc[0] + halfWidth, centerMerc[1] - halfHeight], // bottomRight
|
||||
[centerMerc[0] - halfWidth, centerMerc[1] - halfHeight], // bottomLeft
|
||||
];
|
||||
|
||||
if (rotation !== 0) {
|
||||
const rad = (rotation * Math.PI) / 180;
|
||||
corners = corners.map(([x, y]) => rotateXY(x, y, centerMerc[0], centerMerc[1], rad));
|
||||
}
|
||||
|
||||
corners.push(corners[0]);
|
||||
const wgsCoords = corners.map(([x, y]) => toWgs84([x, y]));
|
||||
|
||||
return turf.polygon([wgsCoords]);
|
||||
}
|
||||
|
||||
function rotateXY(x, y, cx, cy, angleRad) {
|
||||
const dx = x - cx;
|
||||
const dy = y - cy;
|
||||
const cos = Math.cos(angleRad);
|
||||
const sin = Math.sin(angleRad);
|
||||
const rx = cx + dx * cos - dy * sin;
|
||||
const ry = cy + dx * sin + dy * cos;
|
||||
return [rx, ry];
|
||||
}
|
||||
//GEOJSON
|
||||
//CANVAS
|
||||
/**
|
||||
* @param {Object} center - The center point of the rectangle.
|
||||
* @param {number} center.x
|
||||
* @param {number} center.y
|
||||
* @param {number} sideA - The length of the first side of the rectangle.
|
||||
* @param {number} sideB - The length of the second side of the rectangle.
|
||||
* @param {number} rotation - The angle (in radians) by which to rotate the rectangle.
|
||||
*
|
||||
* @returns {{x: number, y: number}[]} An array of points representing the vertices of the rectangle polygon.
|
||||
*/
|
||||
export function getRectanglePolygonEuclidean(center, sideA, sideB, rotation = 0) {
|
||||
if (!center || !sideA || !sideB) {
|
||||
console.warn("getRectanglePolygonEuclidean: Invalid center, sideA or sideB.");
|
||||
return [];
|
||||
}
|
||||
|
||||
const halfA = sideA / 2;
|
||||
const halfB = sideB / 2;
|
||||
|
||||
const corners = [
|
||||
{ x: -halfA, y: -halfB },
|
||||
{ x: halfA, y: -halfB },
|
||||
{ x: halfA, y: halfB },
|
||||
{ x: -halfA, y: halfB }
|
||||
];
|
||||
|
||||
return corners.map(point => {
|
||||
return {
|
||||
x: center.x + point.x * Math.cos(rotation) - point.y * Math.sin(rotation),
|
||||
y: center.y + point.x * Math.sin(rotation) + point.y * Math.cos(rotation)
|
||||
};
|
||||
});
|
||||
}
|
||||
//CAVNAS
|
||||
//RECTANGLE
|
||||
296
Drawing.js
296
Drawing.js
@ -1,296 +0,0 @@
|
||||
import { getArrowPolygon } from "athena-utils/shape/Arrow.js";
|
||||
import { getFrontline } from "./Frontline.js";
|
||||
import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
|
||||
import { handleDraw, handleClick, showArrowEditor, hideArrowEditor, showFrontlineEditor, hideFrontlineEditor, handleDelete, drawOnMap } from "./DrawingFunctions.js";
|
||||
import { arrowParamsMap, frontlineParamsMap, currentFeature, setCurrentFeature} from "./DrawingFunctions.js";
|
||||
|
||||
export const ARROW = "arrow";
|
||||
export const FRONTLINE = "frontline";
|
||||
export const ADDITIONAL_SIDE = "additionalSide"; // used for Id in BOTH_SIDES style
|
||||
|
||||
let currentDrawStyle = ARROW;
|
||||
|
||||
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', (e) => {
|
||||
handleDraw(e, map, draw, currentDrawStyle)
|
||||
});
|
||||
map.on('draw.update', (e) => {
|
||||
handleDraw(e, map, draw, currentDrawStyle)
|
||||
});
|
||||
map.on('click', (e) => {
|
||||
hideArrowEditor();
|
||||
hideFrontlineEditor();
|
||||
handleClick(e, ARROW, arrowParamsMap, showArrowEditor, map, draw, currentDrawStyle);
|
||||
handleClick(e, FRONTLINE, frontlineParamsMap, showFrontlineEditor, map, draw, currentDrawStyle);
|
||||
});
|
||||
map.dragPan.enable();
|
||||
|
||||
export function updateButtonStyles(drawStyle) {
|
||||
currentDrawStyle = drawStyle;
|
||||
const buttonsContainer = document.getElementById('drawStyleButtons');
|
||||
Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => {
|
||||
const isSelected = btn.getAttribute('data-style') === drawStyle;
|
||||
btn.style.backgroundColor = isSelected ? '#333' : '#f0f0f0';
|
||||
btn.style.color = isSelected ? '#fff' : '#000';
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.getElementById('removeArrow').addEventListener('click', () => {
|
||||
handleDelete(ARROW, map, draw);
|
||||
});
|
||||
|
||||
document.getElementById('removeFrontline').addEventListener('click', () => {
|
||||
handleDelete(FRONTLINE, map, draw);
|
||||
});
|
||||
|
||||
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 calculation = parseInt(document.getElementById('styleArrow').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,
|
||||
range,
|
||||
minValue,
|
||||
widthArrow,
|
||||
lengthArrow,
|
||||
paintOptions
|
||||
});
|
||||
|
||||
const arrowGeoJSON = getArrowPolygon({
|
||||
points: coords,
|
||||
splineStep,
|
||||
offsetDistance
|
||||
}, {
|
||||
calculation,
|
||||
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, map);
|
||||
|
||||
const allFeatures = draw.getAll().features;
|
||||
setCurrentFeature(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, map);
|
||||
drawOnMap(polygonToDrawRight, FRONTLINE + "-" + (id), paintOptionsRight, map);
|
||||
|
||||
const allFeatures = draw.getAll().features;
|
||||
setCurrentFeature(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, map);
|
||||
|
||||
const allFeatures = draw.getAll().features;
|
||||
setCurrentFeature(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(currentDrawStyle);
|
||||
});
|
||||
|
||||
updateButtonStyles(currentDrawStyle);
|
||||
});
|
||||
@ -1,285 +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 "./Frontline.js";
|
||||
import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
|
||||
import { updateButtonStyles } from "./Drawing.js";
|
||||
import { ARROW, FRONTLINE, ADDITIONAL_SIDE } from "./Drawing.js";
|
||||
|
||||
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
|
||||
}
|
||||
};
|
||||
|
||||
export let currentFeature = null;
|
||||
|
||||
export function setCurrentFeature(feature) {
|
||||
currentFeature = feature;
|
||||
}
|
||||
|
||||
export const arrowParamsMap = new Map();
|
||||
export const frontlineParamsMap = new Map();
|
||||
|
||||
export function handleDraw(e, myMap, myDraw, drawStyle) {
|
||||
const feature = e.features[0];
|
||||
const coords = feature.geometry.coordinates;
|
||||
const id = feature.id;
|
||||
|
||||
if (drawStyle === ARROW) {
|
||||
DrawArrow(coords, id, myMap, myDraw);
|
||||
} else if (drawStyle === FRONTLINE) {
|
||||
DrawFrontline(coords, id, myMap, myDraw);
|
||||
}
|
||||
}
|
||||
|
||||
export function handleClick(click, prefix, paramsMap, showEditorFunction, myMap, myDraw, drawStyle) {
|
||||
const features = myMap.queryRenderedFeatures(click.point, {
|
||||
layers: myMap.getStyle().layers
|
||||
.filter(l => l.id.startsWith(prefix + "-"))
|
||||
.map(l => l.id)
|
||||
});
|
||||
|
||||
if (features.length === 0) return;
|
||||
|
||||
drawStyle = prefix;
|
||||
updateButtonStyles(drawStyle);
|
||||
const feature = features[0];
|
||||
const featureId = feature.layer.id.replace(prefix + "-", '');
|
||||
|
||||
const allFeatures = myDraw.getAll().features;
|
||||
currentFeature = allFeatures.find(f => f.id === featureId);
|
||||
|
||||
if (currentFeature) {
|
||||
const params = paramsMap.get(featureId);
|
||||
if (params) {
|
||||
showEditorFunction(params);
|
||||
}
|
||||
myDraw.changeMode('direct_select', { featureId: featureId });
|
||||
}
|
||||
}
|
||||
|
||||
function DrawArrow(coordinates, polygonId, myMap, myDraw) {
|
||||
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, myMap, myDraw);
|
||||
}
|
||||
|
||||
function DrawFrontline(coordinates, polygonId, myMap, myDraw) {
|
||||
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, myMap, myDraw);
|
||||
|
||||
let additionalPolygonToDraw = frontlineGeoJSON.rightPoly;
|
||||
|
||||
drawOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId + ADDITIONAL_SIDE), params.paintOptionsRight, myMap, myDraw);
|
||||
return;
|
||||
}
|
||||
|
||||
if (params.style == 1){ // LEFT_SIDE
|
||||
updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsLeft, myMap, myDraw);
|
||||
}else if(params.style == 2){ // RIGHT_SIDE
|
||||
updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsRight, myMap, myDraw);
|
||||
}
|
||||
}
|
||||
|
||||
function updatePolygonOnMap(prefix, polygonId, drawFunction, geojson, paintOptions, myMap, myDraw) {
|
||||
const layerId = prefix + "-" + polygonId;
|
||||
|
||||
if (myMap.getLayer(layerId)) myMap.removeLayer(layerId);
|
||||
if (myMap.getSource(layerId)) myMap.removeSource(layerId);
|
||||
|
||||
drawFunction(geojson, layerId, paintOptions, myMap);
|
||||
|
||||
const allFeatures = myDraw.getAll().features;
|
||||
currentFeature = allFeatures.find(f => f.id === polygonId);
|
||||
}
|
||||
|
||||
export function drawOnMap(frontlineGeoJSON, id, paintOptions = {}, myMap) {
|
||||
if (myMap.getLayer(id)) myMap.removeLayer(id);
|
||||
if (myMap.getSource(id)) myMap.removeSource(id);
|
||||
|
||||
myMap.addSource(id, {
|
||||
type: 'geojson',
|
||||
data: frontlineGeoJSON
|
||||
});
|
||||
|
||||
myMap.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']
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
export function handleDelete(polygonType, myMap, myDraw)
|
||||
{
|
||||
if (!currentFeature) return;
|
||||
|
||||
const id = currentFeature.id;
|
||||
myDraw.delete(id);
|
||||
|
||||
//ARROW
|
||||
if(polygonType == ARROW){
|
||||
const arrowLayerId = polygonType + "-" + id;
|
||||
DeleteFromMap(arrowLayerId, id, myMap);
|
||||
}
|
||||
|
||||
//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, myMap);
|
||||
DeleteFromMap(frontlineLayerIdB, id + ADDITIONAL_SIDE, myMap);
|
||||
hideArrowEditor();
|
||||
hideFrontlineEditor();
|
||||
return;
|
||||
}
|
||||
|
||||
DeleteFromMap(frontlineLayerId, id, myMap);
|
||||
}
|
||||
|
||||
hideArrowEditor();
|
||||
hideFrontlineEditor();
|
||||
}
|
||||
|
||||
function DeleteFromMap(layerId, FeatureId, myMap){
|
||||
if (myMap.getLayer(layerId)) myMap.removeLayer(layerId);
|
||||
if (myMap.getSource(layerId)) myMap.removeSource(layerId);
|
||||
|
||||
arrowParamsMap.delete(FeatureId);
|
||||
}
|
||||
|
||||
export 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('styleArrow').value = params.calculation;
|
||||
|
||||
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"]);
|
||||
}
|
||||
|
||||
export function hideArrowEditor() {
|
||||
const popup = document.getElementById('arrow-editor');
|
||||
popup.style.display = 'none';
|
||||
currentFeature = null;
|
||||
}
|
||||
|
||||
export 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"]);
|
||||
}
|
||||
|
||||
export function hideFrontlineEditor() {
|
||||
const popup = document.getElementById('frontline-editor');
|
||||
popup.style.display = 'none';
|
||||
currentFeature = null;
|
||||
}
|
||||
205
Frontline.js
205
Frontline.js
@ -1,205 +0,0 @@
|
||||
import { cubicInterpolate } from "athena-utils/shape/Arrow.js";
|
||||
import * as turf from '@turf/turf';
|
||||
|
||||
export const LEFT_SIDE = 1;
|
||||
export const RIGHT_SIDE = 2;
|
||||
export const BOTH_SIDES = 3;
|
||||
export const METERS = 'meters';
|
||||
|
||||
/**
|
||||
* @param {Object, Object} frontlineData, protrusionData - Object containing parameters for the frontline.
|
||||
* @param {{x: number, y: number}[]} frontlineData.points - List of points defining the base path of the frontline.
|
||||
* @param {number} frontlineData.splineStep - The resolution of the spline interpolation (smaller = smoother curve).
|
||||
* @param {number} frontlineData.spacing - Distance between interpolated points along the path.
|
||||
* @param {number} frontlineData.offsetDistance - Distance to offset the entire shape from the base path.
|
||||
* @param {string} frontlineData.style - Which side to draw the protrusions on (e.g., "LEFT_SIDE" or "RIGHT_SIDE").
|
||||
* @param {number} protrusionData.Length - Length of each individual protrusion element.
|
||||
* @param {number} protrusionData.StartSize - Width of protrusion at the start (base).
|
||||
* @param {number} protrusionData.EndSize - Width of protrusion at the end (tip).
|
||||
* @param {number} protrusionData.Gap - Distance between the starts of each protrusion.
|
||||
*
|
||||
*/
|
||||
export function getFrontline(frontlineData, protrusionData = null) {
|
||||
if (!frontlineData || !(frontlineData.points) || frontlineData.points.length === 0) {
|
||||
console.warn("getFrontline: Invalid frontlineData or empty points array.");
|
||||
return [];
|
||||
}
|
||||
|
||||
const style = frontlineData.style ?? LEFT_SIDE;
|
||||
const splinePoints = computeSplinePoints(frontlineData.points, frontlineData.splineStep);
|
||||
|
||||
let bodyPolygonLeft = [];
|
||||
let bodyPolygonRight = [];
|
||||
|
||||
if (style === BOTH_SIDES) {
|
||||
const left = computeSides(splinePoints, frontlineData.offsetDistance, LEFT_SIDE);
|
||||
bodyPolygonLeft = [...left.leftSidePoints, ...left.rightSidePoints.reverse()];
|
||||
|
||||
const right = computeSides(splinePoints, frontlineData.offsetDistance, RIGHT_SIDE);
|
||||
bodyPolygonRight = [...right.leftSidePoints, ...right.rightSidePoints.reverse()];
|
||||
}
|
||||
|
||||
const { leftSidePoints, rightSidePoints } = computeSides(splinePoints, frontlineData.offsetDistance, frontlineData.style);
|
||||
const bodyPolygon = [...leftSidePoints, ...rightSidePoints.reverse()];
|
||||
|
||||
if (protrusionData == null) {
|
||||
let polygonCoords;
|
||||
|
||||
if (style === BOTH_SIDES) {
|
||||
polygonCoords = [
|
||||
...bodyPolygonLeft,
|
||||
...bodyPolygonRight,
|
||||
bodyPolygonLeft[0]
|
||||
];
|
||||
} else {
|
||||
polygonCoords = [
|
||||
...bodyPolygon,
|
||||
bodyPolygon[0]
|
||||
];
|
||||
}
|
||||
|
||||
return turf.polygon([polygonCoords]);
|
||||
}
|
||||
|
||||
const prostrusionsData = (points, sidePoints) => {
|
||||
const coords = [...points, points[0]];
|
||||
const basePoly = turf.polygon([coords]);
|
||||
return constructProstrusions(basePoly, sidePoints, protrusionData, frontlineData);
|
||||
};
|
||||
|
||||
if (style === LEFT_SIDE) {
|
||||
return {
|
||||
rightPoly: null,
|
||||
leftPoly: prostrusionsData(bodyPolygon, leftSidePoints)
|
||||
};
|
||||
} else if (style === RIGHT_SIDE) {
|
||||
return {
|
||||
rightPoly: prostrusionsData(bodyPolygon, rightSidePoints),
|
||||
leftPoly: null
|
||||
};
|
||||
} else if (style === BOTH_SIDES) {
|
||||
return {
|
||||
rightPoly: prostrusionsData(bodyPolygonRight, rightSidePoints),
|
||||
leftPoly: prostrusionsData(bodyPolygonLeft, leftSidePoints),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function constructProstrusions(mainPoly, points, protrusionData, frontlineData) {
|
||||
|
||||
const protrusions = computeProtrusion(points, protrusionData, frontlineData.offsetDistance);
|
||||
|
||||
for(let i = 0; i <= protrusions.length -1 ; i++)
|
||||
{
|
||||
mainPoly = turf.union(turf.featureCollection([mainPoly, protrusions[i]]));
|
||||
}
|
||||
|
||||
return mainPoly;
|
||||
}
|
||||
|
||||
function computeSplinePoints(points, density) {
|
||||
if (points.length < 2) return points;
|
||||
const splinePoints = [];
|
||||
|
||||
for (let i = 0; i < points.length - 1; i++) {
|
||||
const p0 = points[i === 0 ? i : i - 1];
|
||||
const p1 = points[i];
|
||||
const p2 = points[i + 1];
|
||||
const p3 = points[i + 2] || p2;
|
||||
for (let t = 0; t <= 1; t += density) {
|
||||
const lon = cubicInterpolate([p0[0], p1[0], p2[0], p3[0]], t);
|
||||
const lat = cubicInterpolate([p0[1], p1[1], p2[1], p3[1]], t);
|
||||
splinePoints.push([lon, lat]);
|
||||
}
|
||||
}
|
||||
|
||||
splinePoints.push(points[points.length - 1]);
|
||||
return splinePoints;
|
||||
}
|
||||
|
||||
function computeSides(splinePoints, offsetDistance, style = LEFT_SIDE) {
|
||||
let leftSidePoints = [];
|
||||
let rightSidePoints = [];
|
||||
|
||||
for (let i = 1; i < splinePoints.length; i++) {
|
||||
const previousPoint = splinePoints[i - 1];
|
||||
const currentPoint = splinePoints[i];
|
||||
|
||||
const bearing = turf.bearing(turf.point(previousPoint), turf.point(currentPoint));
|
||||
|
||||
const leftPoint = style === RIGHT_SIDE
|
||||
? currentPoint
|
||||
: turf.destination(turf.point(currentPoint), offsetDistance, bearing - 90, { units: METERS }).geometry.coordinates;
|
||||
|
||||
const rightPoint = style === LEFT_SIDE
|
||||
? currentPoint
|
||||
: turf.destination(turf.point(currentPoint), offsetDistance, bearing + 90, { units: METERS }).geometry.coordinates;
|
||||
|
||||
leftSidePoints.push(leftPoint);
|
||||
rightSidePoints.push(rightPoint);
|
||||
}
|
||||
|
||||
return { leftSidePoints, rightSidePoints };
|
||||
}
|
||||
|
||||
function computeProtrusion(leftSidePoints, protrusionData, sideOffset) {
|
||||
const protrusions = [];
|
||||
const segments = [];
|
||||
let totalLength = 0;
|
||||
|
||||
for (let i = 0; i < leftSidePoints.length - 1; i++) {
|
||||
const p0 = leftSidePoints[i];
|
||||
const p1 = leftSidePoints[i + 1];
|
||||
const length = turf.distance(turf.point(p0), turf.point(p1), { units: METERS });
|
||||
const bearing = turf.bearing(turf.point(p0), turf.point(p1));
|
||||
segments.push({ p0, p1, length, bearing });
|
||||
totalLength += length;
|
||||
}
|
||||
|
||||
const positions = [];
|
||||
for (let d = 0; d <= totalLength - (protrusionData.gap + protrusionData.startSize); d += protrusionData.gap) {
|
||||
positions.push(d + protrusionData.startSize);
|
||||
}
|
||||
|
||||
if (positions[positions.length - 1] < totalLength) {
|
||||
positions.push(totalLength - protrusionData.startSize);
|
||||
}
|
||||
|
||||
let currentSegmentIndex = 0;
|
||||
let currentSegmentPos = 0;
|
||||
|
||||
for (const distance of positions) {
|
||||
while (currentSegmentIndex < segments.length && currentSegmentPos + segments[currentSegmentIndex].length < distance) {
|
||||
currentSegmentPos += segments[currentSegmentIndex].length;
|
||||
currentSegmentIndex++;
|
||||
}
|
||||
|
||||
if (currentSegmentIndex >= segments.length) {
|
||||
break;
|
||||
}
|
||||
|
||||
const seg = segments[currentSegmentIndex];
|
||||
const localDistance = distance - currentSegmentPos;
|
||||
|
||||
const pointOnSegment = turf.along(turf.lineString([seg.p0, seg.p1]), localDistance, { units: METERS }).geometry.coordinates;
|
||||
const thicknessOffset = sideOffset * 0.1;
|
||||
|
||||
const adjustedPoint = movePoint(pointOnSegment, thicknessOffset, seg.bearing + 90);
|
||||
const centerPoint = movePoint(adjustedPoint, protrusionData.length, seg.bearing - 90);
|
||||
|
||||
|
||||
const corner1 = movePoint(adjustedPoint, -protrusionData.startSize, seg.bearing);
|
||||
const corner2 = movePoint(adjustedPoint, protrusionData.startSize, seg.bearing);
|
||||
const corner3 = movePoint(centerPoint, protrusionData.endSize, seg.bearing);
|
||||
const corner4 = movePoint(centerPoint, -protrusionData.endSize, seg.bearing);
|
||||
|
||||
const polygon = turf.polygon([[corner1, corner2, corner3, corner4, corner1]]);
|
||||
protrusions.push(polygon);
|
||||
}
|
||||
|
||||
return protrusions;
|
||||
}
|
||||
|
||||
function movePoint(point, distance, bearing) {
|
||||
return turf.destination(turf.point(point), distance, bearing, { units: METERS }).geometry.coordinates;
|
||||
}
|
||||
740
Map.js
740
Map.js
@ -1,740 +0,0 @@
|
||||
mapboxgl.accessToken = 'pk.eyJ1Ijoib3V0ZG9vcm1hcHBpbmdjb21wYW55IiwiYSI6ImNqYmh3cDdjYzNsMnozNGxsYzlvMmk2bTYifQ.QqcZ4LVoLWnXafXdjZxnZg';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
center: [20, 80],
|
||||
zoom: 4
|
||||
});
|
||||
|
||||
import * as turf from "@turf/turf";
|
||||
|
||||
import { getArrowPolygon } from "./Arrow.js";
|
||||
import { ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_EXPONENTIAL } from "./Arrow.js";
|
||||
import { getCirclePolygon } from "./BasicShapes.js";
|
||||
import { getRectanglePolygon } from "./BasicShapes.js";
|
||||
import { getFrontline } from "./Frontline.js";
|
||||
import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "./Frontline.js";
|
||||
// Polygon merge using Turf library
|
||||
import {mergeTurfPolygons} from "./Polygon.js";
|
||||
import {addTurfPolygonToMerge} from "./Polygon.js";
|
||||
import {toTurfPolygon} from "./Polygon.js";
|
||||
|
||||
const circleCenter = {x:320, y:180};
|
||||
const circleRadius = 70;
|
||||
const circleDensity = 15;
|
||||
|
||||
const circleCenterB = {x:400, y:280};
|
||||
const circleRadiusB = 70;
|
||||
const circleDensityB = 15;
|
||||
|
||||
const rectangleCenter= {x:100, y:300};
|
||||
const rectangleSideA = 70;
|
||||
const rectangleSideB = 200;
|
||||
const rectangleRotation = 40;
|
||||
|
||||
const frontlinePointsA = [
|
||||
{ x: 120, y: 400 },
|
||||
{ x: 200, y: 100 },
|
||||
{ x: 350, y: 200 },
|
||||
{ x: 350, y: 400 },
|
||||
{ x: 450, y: 480 },
|
||||
{ x: 550, y: 440 },
|
||||
{ x: 600, y: 300 },
|
||||
];
|
||||
|
||||
const frontlinePointsB = [
|
||||
{ x: 420, y: 280 },
|
||||
{ x: 430, y: 380 },
|
||||
{ x: 500, y: 400 },
|
||||
{ x: 520, y: 300 },
|
||||
];
|
||||
|
||||
const frontlinePointsC = [
|
||||
{ x: 450, y: 200 },
|
||||
{ x: 500, y: 250 },
|
||||
{ x: 550, y: 250 },
|
||||
{ x: 550, y: 200 }
|
||||
];
|
||||
|
||||
|
||||
const frontlineDataA = {
|
||||
points: frontlinePointsA,
|
||||
splineStep: 0.08,
|
||||
spacing: 10,
|
||||
offsetDistance: 10,
|
||||
protrusionLength: 15,
|
||||
protrusionStartSize: 5,
|
||||
protrusionEndSize: 2,
|
||||
protrusionGap: 20,
|
||||
style: LEFT_SIDE,
|
||||
};
|
||||
|
||||
const frontlineDataB = {
|
||||
points: frontlinePointsB,
|
||||
splineStep: 0.02,
|
||||
spacing: 10,
|
||||
offsetDistance: 10,
|
||||
protrusionLength: 15,
|
||||
protrusionStartSize: 5,
|
||||
protrusionEndSize: 5,
|
||||
protrusionGap: 20,
|
||||
style: RIGHT_SIDE,
|
||||
};
|
||||
|
||||
const frontlineDataC = {
|
||||
points: frontlinePointsC,
|
||||
splineStep: 0.02,
|
||||
spacing: 10,
|
||||
offsetDistance: 10,
|
||||
protrusionLength: 15,
|
||||
protrusionStartSize: 5,
|
||||
protrusionEndSize: 0,
|
||||
protrusionGap: 20,
|
||||
style: BOTH_SIDES,
|
||||
};
|
||||
|
||||
/*
|
||||
const arrowPolygonA = getArrowPolygon(arrowDataA, styleA, arrowHeadDataA);
|
||||
const arrowPolygonB = getArrowPolygon(arrowDataB, styleB, arrowHeadDataB);
|
||||
const arrowPolygonC = getArrowPolygon(arrowDataC, styleC);
|
||||
|
||||
const circlePolygon = getCirclePolygon(circleCenter, circleRadius, circleDensity);
|
||||
const circlePolygonB = getCirclePolygon(circleCenterB, circleRadiusB, circleDensityB);
|
||||
const rectanglePolygon = getRectanglePolygon(rectangleCenter, rectangleSideA, rectangleSideB, rectangleRotation);
|
||||
|
||||
const mergedTurfPoly = mergeTurfPolygons(arrowPolygonA, arrowPolygonC);
|
||||
const mergedTurfPolyAll = addTurfPolygonToMerge(mergedTurfPoly, arrowPolygonB);
|
||||
|
||||
const mergedTurfPolyRectangle = addTurfPolygonToMerge(mergedTurfPolyAll, rectanglePolygon);
|
||||
const mergedRectangle = mergeTurfPolygons(circlePolygon, circlePolygonB);
|
||||
|
||||
const rectanglePoly = getRectanglePolygon(circleCenter, rectangleSideA, rectangleSideB, rectangleRotation*-1);
|
||||
const rectangleToTurfPoly = toTurfPolygon(rectanglePoly);
|
||||
|
||||
const frontlinePolygonA = getFrontline(frontlineDataA);
|
||||
let frontlinePolygonMergedA = mergeTurfPolygons(frontlinePolygonA.body,frontlinePolygonA.protrusions[0]);
|
||||
for (let i = 1; i < frontlinePolygonA.protrusions.length; i++)
|
||||
{
|
||||
frontlinePolygonMergedA = addTurfPolygonToMerge(frontlinePolygonMergedA, frontlinePolygonA.protrusions[i]);
|
||||
}
|
||||
|
||||
const frontlinePolygonB = getFrontline(frontlineDataB);
|
||||
let frontlinePolygonMergedB = mergeTurfPolygons(frontlinePolygonB.body,frontlinePolygonB.protrusions[0]);
|
||||
for (let i = 1; i < frontlinePolygonB.protrusions.length; i++)
|
||||
{
|
||||
frontlinePolygonMergedB = addTurfPolygonToMerge(frontlinePolygonMergedB, frontlinePolygonB.protrusions[i]);
|
||||
}
|
||||
|
||||
const frontlinePolygonC = getFrontline(frontlineDataC);
|
||||
|
||||
let frontlinePolygonMergedLeft = mergeTurfPolygons(frontlinePolygonC.bodyLeft, frontlinePolygonC.protrusionsLeft[0]);
|
||||
for (let i = 1; i < frontlinePolygonC.protrusionsLeft.length; i++) {
|
||||
frontlinePolygonMergedLeft = addTurfPolygonToMerge(frontlinePolygonMergedLeft, frontlinePolygonC.protrusionsLeft[i]);
|
||||
}
|
||||
|
||||
let frontlinePolygonMergedRight = mergeTurfPolygons(frontlinePolygonC.bodyRight, frontlinePolygonC.protrusionsRight[0]);
|
||||
for (let i = 1; i < frontlinePolygonC.protrusionsRight.length; i++) {
|
||||
frontlinePolygonMergedRight = addTurfPolygonToMerge(frontlinePolygonMergedRight, frontlinePolygonC.protrusionsRight[i]);
|
||||
}*/
|
||||
|
||||
//const circleGeoJSON = getCircleGeoJSON({x: 20, y: 80}, 2, 50, map);
|
||||
|
||||
const pointsB = [
|
||||
{ x: 70, y: 38 },
|
||||
{ x: 71, y: 45},
|
||||
{ x: 65, y: 50 },
|
||||
{ x: 70, y: 53}
|
||||
];
|
||||
|
||||
const arrowDataB = {
|
||||
points: pointsB,
|
||||
splineStep: 0.01,
|
||||
spacing: 0.01,
|
||||
offsetDistance: 1
|
||||
};
|
||||
const styleB = {
|
||||
calculation: ARROW_BODY_STYLE_LINEAR,
|
||||
range: 1,
|
||||
minValue: 0.1
|
||||
};
|
||||
const arrowHeadDataB = {
|
||||
widthArrow: 1,
|
||||
lengthArrow: 1
|
||||
};
|
||||
|
||||
const arrowPolygonB = getArrowPolygon(arrowDataB, styleB, arrowHeadDataB);
|
||||
const pointsC= [
|
||||
{ x: 50, y: 38 },
|
||||
{ x: 51, y: 45},
|
||||
{ x: 45, y: 50 },
|
||||
{ x: 48, y: 55}
|
||||
];
|
||||
|
||||
const arrowDataC = {
|
||||
points: pointsC,
|
||||
splineStep: 0.02,
|
||||
spacing: 1,
|
||||
offsetDistance: 1
|
||||
};
|
||||
const styleC = {
|
||||
calculation: ARROW_BODY_STYLE_LINEAR,
|
||||
range: 1,
|
||||
minValue: 0.1
|
||||
};
|
||||
const arrowHeadDataC = {
|
||||
widthArrow: 1,
|
||||
lengthArrow: 1
|
||||
};
|
||||
|
||||
const arrowPolygonC = getArrowPolygon(arrowDataC, styleC, arrowHeadDataC);
|
||||
|
||||
const points = [
|
||||
{ x: 80, y: 20 },
|
||||
{ x: 81, y: 22},
|
||||
{ x: 82, y: 28 },
|
||||
{ x: 81, y: 30},
|
||||
{ x: 80, y: 20}
|
||||
];
|
||||
|
||||
// Turf polygon
|
||||
const turfPolygon = turf.polygon([[
|
||||
[20, 80],
|
||||
[22, 81],
|
||||
[28, 82],
|
||||
[30, 81],
|
||||
[20, 80]
|
||||
]]);
|
||||
|
||||
const pointsA= [
|
||||
{ x: 80, y: 38 },
|
||||
{ x: 81, y: 45},
|
||||
{ x: 75, y: 50 },
|
||||
{ x: 78, y: 55}
|
||||
];
|
||||
|
||||
const arrowDataA = {
|
||||
points: pointsA,
|
||||
splineStep: 0.2,
|
||||
spacing: 3,
|
||||
offsetDistance: 1
|
||||
};
|
||||
const styleA = {
|
||||
calculation: ARROW_BODY_STYLE_LINEAR,
|
||||
range: 1,
|
||||
minValue: 0.1
|
||||
};
|
||||
const arrowHeadDataA = {
|
||||
widthArrow: 1,
|
||||
lengthArrow: 1
|
||||
};
|
||||
|
||||
const arrowPolygonA = getArrowPolygon(arrowDataA, styleA, arrowHeadDataA);
|
||||
|
||||
const latLonGrid = generateLatLonGrid(5);
|
||||
|
||||
|
||||
function createIsoscelesTriangle(center, baseLengthMeters, heightMeters, bearing = 0) {
|
||||
const halfBase = baseLengthMeters / 2;
|
||||
|
||||
// Výpočet bodů základny (levý a pravý bod)
|
||||
const leftBase = turf.destination(center, halfBase, bearing - 90, { units: 'meters' });
|
||||
const rightBase = turf.destination(center, halfBase, bearing + 90, { units: 'meters' });
|
||||
|
||||
// Výpočet vrcholu trojúhelníku – směr daný bearing (nahoru např. 0°)
|
||||
const apex = turf.destination(center, heightMeters, bearing, { units: 'meters' });
|
||||
|
||||
const triangle = turf.polygon([[
|
||||
leftBase.geometry.coordinates,
|
||||
rightBase.geometry.coordinates,
|
||||
apex.geometry.coordinates,
|
||||
leftBase.geometry.coordinates // Uzavření polygonu
|
||||
]]);
|
||||
|
||||
return triangle;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function cubicInterpolate(p, x) {
|
||||
return p[1] + 0.5 * x * (p[2] - p[0] + x * (2.0 * p[0] - 5.0 * p[1] + 4.0 * p[2] - p[3] + x * (3.0 * (p[1] - p[2]) + p[3] - p[0])));
|
||||
}
|
||||
|
||||
function interpolatePointsCatmullRom(points, segments = 10) {
|
||||
if (points.length < 2) return points;
|
||||
|
||||
const extended = [points[0], ...points, points[points.length - 1]];
|
||||
const interpolated = [];
|
||||
|
||||
for (let i = 1; i < extended.length - 2; i++) {
|
||||
for (let j = 0; j < segments; j++) {
|
||||
const t = j / segments;
|
||||
const lon = cubicInterpolate([extended[i - 1][0], extended[i][0], extended[i + 1][0], extended[i + 2][0]], t);
|
||||
const lat = cubicInterpolate([extended[i - 1][1], extended[i][1], extended[i + 1][1], extended[i + 2][1]], t);
|
||||
interpolated.push([lon, lat]);
|
||||
}
|
||||
}
|
||||
interpolated.push(points[points.length - 1]);
|
||||
return interpolated;
|
||||
}
|
||||
function computeSideOffsets(points, offsetMeters) {
|
||||
const left = [];
|
||||
const right = [];
|
||||
|
||||
for (let i = 1; i < points.length; i++) {
|
||||
const prev = points[i - 1];
|
||||
const curr = points[i];
|
||||
const bearing = turf.bearing(turf.point(prev), turf.point(curr));
|
||||
|
||||
const leftOffset = turf.destination(turf.point(curr), offsetMeters, bearing - 90, { units: 'meters' });
|
||||
const rightOffset = turf.destination(turf.point(curr), offsetMeters, bearing + 90, { units: 'meters' });
|
||||
|
||||
left.push(leftOffset.geometry.coordinates);
|
||||
right.push(rightOffset.geometry.coordinates);
|
||||
}
|
||||
|
||||
return { left, right };
|
||||
}
|
||||
|
||||
function createIsoscelesTriangleCoords(center, baseLengthMeters, heightMeters, bearing) {
|
||||
const halfBase = baseLengthMeters / 2;
|
||||
const left = turf.destination(center, halfBase, bearing - 90, { units: 'meters' }).geometry.coordinates;
|
||||
const right = turf.destination(center, halfBase, bearing + 90, { units: 'meters' }).geometry.coordinates;
|
||||
const tip = turf.destination(center, heightMeters, bearing, { units: 'meters' }).geometry.coordinates;
|
||||
console.log("Aktuální bod:", left);
|
||||
console.log("Aktuální bod:", right);
|
||||
console.log("Aktuální bod:", tip);
|
||||
return [left, right, tip];
|
||||
}
|
||||
|
||||
function drawArrowPolygon(map, basePoints, offset = 10000) {
|
||||
const smooth = interpolatePointsCatmullRom(basePoints, 20);
|
||||
const { leftSidePoints, rightSidePoints } = computeSidesWGS84(smooth, offset);
|
||||
|
||||
console.log("Aktuální bod:", tip);
|
||||
const end = smooth[smooth.length - 1];
|
||||
const prev = smooth[smooth.length - 2];
|
||||
const bearing = turf.bearing(turf.point(prev), turf.point(end));
|
||||
|
||||
const triangleCoords = createIsoscelesTriangleCoords(turf.point(end), offset * 2, offset * 3, bearing);
|
||||
|
||||
const polygonCoords = [
|
||||
...leftSidePoints,
|
||||
...triangleCoords,
|
||||
...rightSidePoints.reverse(),
|
||||
leftSidePoints[0]
|
||||
];
|
||||
|
||||
const fullPolygon = turf.polygon([[...polygonCoords]]);
|
||||
|
||||
map.addSource("arrow-shape", {
|
||||
type: "geojson",
|
||||
data: fullPolygon
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: "arrow-shape",
|
||||
type: "fill",
|
||||
source: "arrow-shape",
|
||||
paint: {
|
||||
"fill-color": "#ff0000",
|
||||
"fill-opacity": 0.7
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function computeSidesWGS84(points, offsetDistanceMeters = 1000) {
|
||||
const leftSidePoints = [];
|
||||
const rightSidePoints = [];
|
||||
|
||||
|
||||
for (let i = 1; i < points.length; i++) {
|
||||
const prev = points[i - 1];
|
||||
const curr = points[i];
|
||||
|
||||
const bearing = turf.bearing(turf.point(prev), turf.point(curr));
|
||||
const leftBearing = bearing - 90;
|
||||
const rightBearing = bearing + 90;
|
||||
|
||||
const leftPoint = turf.destination(turf.point(curr), offsetDistanceMeters, leftBearing, { units: 'meters' });
|
||||
const rightPoint = turf.destination(turf.point(curr), offsetDistanceMeters, rightBearing, { units: 'meters' });
|
||||
|
||||
leftSidePoints.push(leftPoint.geometry.coordinates);
|
||||
rightSidePoints.push(rightPoint.geometry.coordinates);
|
||||
}
|
||||
|
||||
// První bod
|
||||
const first = points[0];
|
||||
const second = points[1];
|
||||
const initialBearing = turf.bearing(turf.point(first), turf.point(second));
|
||||
const leftInitial = turf.destination(turf.point(first), offsetDistanceMeters, initialBearing - 90, { units: 'meters' });
|
||||
const rightInitial = turf.destination(turf.point(first), offsetDistanceMeters, initialBearing + 90, { units: 'meters' });
|
||||
|
||||
leftSidePoints.unshift(leftInitial.geometry.coordinates);
|
||||
rightSidePoints.unshift(rightInitial.geometry.coordinates);
|
||||
|
||||
console.log("Aktuální bod:", leftSidePoints);
|
||||
console.log("Aktuální bod:", rightSidePoints);
|
||||
return {
|
||||
leftSidePoints,
|
||||
rightSidePoints
|
||||
};
|
||||
}
|
||||
|
||||
function drawSideLines(map, sides, prefix = "arrow-side") {
|
||||
map.addSource(`${prefix}-left`, {
|
||||
type: "geojson",
|
||||
data: turf.lineString(sides.leftSidePoints)
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: `${prefix}-left`,
|
||||
type: "line",
|
||||
source: `${prefix}-left`,
|
||||
paint: {
|
||||
"line-color": "blue",
|
||||
"line-width": 2
|
||||
}
|
||||
});
|
||||
|
||||
map.addSource(`${prefix}-right`, {
|
||||
type: "geojson",
|
||||
data: turf.lineString(sides.rightSidePoints)
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: `${prefix}-right`,
|
||||
type: "line",
|
||||
source: `${prefix}-right`,
|
||||
paint: {
|
||||
"line-color": "green",
|
||||
"line-width": 2
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function drawSmoothLineThroughPoints(map, points, lineId = "smooth-line") {
|
||||
const smoothPoints = interpolatePointsCatmullRom(points, 20);
|
||||
const line = turf.lineString(smoothPoints);
|
||||
|
||||
map.addSource(lineId, {
|
||||
type: "geojson",
|
||||
data: line
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: lineId,
|
||||
type: "line",
|
||||
source: lineId,
|
||||
paint: {
|
||||
"line-color": "red",
|
||||
"line-width": 3
|
||||
}
|
||||
});
|
||||
|
||||
// Boční linie
|
||||
const sides = computeSidesWGS84(smoothPoints, 10000); // 10 km offset
|
||||
drawSideLines(map, sides, lineId + "-sides");
|
||||
|
||||
// Šipka na konci
|
||||
const lastPoint = smoothPoints[smoothPoints.length - 1];
|
||||
const secondLastPoint = smoothPoints[smoothPoints.length - 2];
|
||||
const bearing = turf.bearing(turf.point(secondLastPoint), turf.point(lastPoint));
|
||||
|
||||
const triangle = createIsoscelesTriangle(turf.point(lastPoint), 60000, 80000, bearing); // 20km základna, 30km výška
|
||||
|
||||
map.addSource(lineId + "-arrow", {
|
||||
type: "geojson",
|
||||
data: triangle
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: lineId + "-arrow",
|
||||
type: "fill",
|
||||
source: lineId + "-arrow",
|
||||
paint: {
|
||||
"fill-color": "#ff0000",
|
||||
"fill-opacity": 0.7
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
map.on('load', () => {
|
||||
|
||||
const points = [
|
||||
[14.42076, 50.08804], // Praha
|
||||
[15.0, 50.0],
|
||||
[16.3725, 48.2082], // Vídeň
|
||||
[17.0, 49.0],
|
||||
[13.4050, 52.52] // Berlín
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
||||
function createIsoscelesTriangle(center, baseLengthMeters, heightMeters, bearing = 0) {
|
||||
const halfBase = baseLengthMeters / 2;
|
||||
|
||||
const leftBase = turf.destination(center, halfBase, bearing - 90, { units: 'meters' });
|
||||
const rightBase = turf.destination(center, halfBase, bearing + 90, { units: 'meters' });
|
||||
const apex = turf.destination(center, heightMeters, bearing, { units: 'meters' });
|
||||
|
||||
return turf.polygon([[
|
||||
leftBase.geometry.coordinates,
|
||||
rightBase.geometry.coordinates,
|
||||
apex.geometry.coordinates,
|
||||
leftBase.geometry.coordinates
|
||||
]]);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const center = turf.point([52.95, 69.95]); // výchozí střed základny
|
||||
|
||||
// Vytvoř polygon trojúhelníku
|
||||
const triangle = createIsoscelesTriangle(center, 40000, 100000, 10); // 2 km základna, 1 km výška, směr 0° (na sever)
|
||||
|
||||
map.addSource("triangle", {
|
||||
type: "geojson",
|
||||
data: triangle
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: "triangle",
|
||||
type: "fill",
|
||||
source: "triangle",
|
||||
paint: {
|
||||
"fill-color": "purple",
|
||||
"fill-opacity": 0.5
|
||||
}
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: "triangle-outline",
|
||||
type: "line",
|
||||
source: "triangle",
|
||||
paint: {
|
||||
"line-color": "#000",
|
||||
"line-width": 2
|
||||
}
|
||||
});
|
||||
|
||||
map.addSource("latLonGrid", {
|
||||
type: "geojson",
|
||||
data: latLonGrid
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: "latLonGrid",
|
||||
type: "line",
|
||||
source: "latLonGrid",
|
||||
layout: {},
|
||||
paint: {
|
||||
"line-color": "#888",
|
||||
"line-width": 1,
|
||||
"line-opacity": 0.5
|
||||
}
|
||||
});
|
||||
|
||||
// Generuj GeoJSON pro kruh
|
||||
const circleGeoJSON = getCirclePolygon([20, 80], 120, 20);
|
||||
const circle = turf.circle([20, 80], 120000, { units: "meters", steps: 64 });
|
||||
const rectangleGeoJSON = getRectanglePolygon([20, 80], 2200, 2200);
|
||||
const fsdafds = toTurfPolygon(points);
|
||||
const arrowBGeoJSON = toTurfPolygon(arrowPolygonB);
|
||||
const arrowCGeoJSON = toTurfPolygon(arrowPolygonC);
|
||||
const arrowAGeoJSON = toTurfPolygon(arrowPolygonA);
|
||||
|
||||
//console.log(JSON.stringify(arrowAGeoJSON, null, 2));
|
||||
// Arrow
|
||||
// Přidání GeoJSON jako zdroj
|
||||
map.addSource("arrowPolygonA", {
|
||||
type: "geojson",
|
||||
data: arrowAGeoJSON
|
||||
});
|
||||
|
||||
// Vrstva pro výplň polygonu
|
||||
map.addLayer({
|
||||
id: "arrowPolygonA",
|
||||
type: "fill",
|
||||
source: "arrowPolygonA",
|
||||
layout: {},
|
||||
paint: {
|
||||
"fill-color": "pink",
|
||||
"fill-opacity": 0.6
|
||||
}
|
||||
});
|
||||
|
||||
// Vrstva pro obrys polygonu
|
||||
map.addLayer({
|
||||
id: "arrowPolygonA-outline",
|
||||
type: "line",
|
||||
source: "arrowPolygonA",
|
||||
paint: {
|
||||
"line-color": "#000",
|
||||
"line-width": 3
|
||||
}
|
||||
});
|
||||
|
||||
// Arrow
|
||||
// Přidání GeoJSON jako zdroj
|
||||
map.addSource("arrowPolygonB", {
|
||||
type: "geojson",
|
||||
data: arrowBGeoJSON
|
||||
});
|
||||
|
||||
// Vrstva pro výplň polygonu
|
||||
map.addLayer({
|
||||
id: "arrowPolygonB",
|
||||
type: "fill",
|
||||
source: "arrowPolygonB",
|
||||
layout: {},
|
||||
paint: {
|
||||
"fill-color": "yellow",
|
||||
"fill-opacity": 0.6
|
||||
}
|
||||
});
|
||||
|
||||
// Vrstva pro obrys polygonu
|
||||
map.addLayer({
|
||||
id: "arrowPolygonB-outline",
|
||||
type: "line",
|
||||
source: "arrowPolygonB",
|
||||
paint: {
|
||||
"line-color": "#000",
|
||||
"line-width": 3
|
||||
}
|
||||
});
|
||||
|
||||
// Arrow
|
||||
// Přidání GeoJSON jako zdroj
|
||||
map.addSource("arrowPolygonC", {
|
||||
type: "geojson",
|
||||
data: arrowCGeoJSON
|
||||
});
|
||||
|
||||
// Vrstva pro výplň polygonu
|
||||
map.addLayer({
|
||||
id: "arrowPolygonC",
|
||||
type: "fill",
|
||||
source: "arrowPolygonC",
|
||||
layout: {},
|
||||
paint: {
|
||||
"fill-color": "yellow",
|
||||
"fill-opacity": 0.6
|
||||
}
|
||||
});
|
||||
|
||||
// Vrstva pro obrys polygonu
|
||||
map.addLayer({
|
||||
id: "arrowPolygonC-outline",
|
||||
type: "line",
|
||||
source: "arrowPolygonC",
|
||||
paint: {
|
||||
"line-color": "#000",
|
||||
"line-width": 3
|
||||
}
|
||||
});
|
||||
|
||||
// CIRCLE
|
||||
// Přidání GeoJSON jako zdroj
|
||||
map.addSource("circlePolygon", {
|
||||
"type": "geojson",
|
||||
"data": circleGeoJSON
|
||||
});
|
||||
|
||||
// Přidání vrstvy pro vykreslení polygonu
|
||||
map.addLayer({
|
||||
"id": "circlePolygon",
|
||||
"type": "fill",
|
||||
"source": "circlePolygon",
|
||||
"layout": {},
|
||||
"paint": {
|
||||
"fill-color": "blue",
|
||||
"fill-opacity": 0.6
|
||||
}
|
||||
});
|
||||
|
||||
// Přidání outline pro polygon
|
||||
map.addLayer({
|
||||
"id": "circlePolygon-outline",
|
||||
"type": "line",
|
||||
"source": "circlePolygon",
|
||||
"paint": {
|
||||
"line-color": "#000",
|
||||
"line-width": 3
|
||||
}
|
||||
});
|
||||
|
||||
// RECTANGLE
|
||||
map.addSource("rectanglePolygon", {
|
||||
"type": "geojson",
|
||||
"data": rectangleGeoJSON
|
||||
});
|
||||
|
||||
// Přidání vrstvy pro vykreslení polygonu
|
||||
map.addLayer({
|
||||
"id": "rectanglePolygon",
|
||||
"type": "fill",
|
||||
"source": "rectanglePolygon",
|
||||
"layout": {},
|
||||
"paint": {
|
||||
"fill-color": "red",
|
||||
"fill-opacity": 0.6
|
||||
}
|
||||
});
|
||||
|
||||
// Přidání outline pro polygon
|
||||
map.addLayer({
|
||||
"id": "rectanglePolygon-outline",
|
||||
"type": "line",
|
||||
"source": "rectanglePolygon",
|
||||
"paint": {
|
||||
"line-color": "#000",
|
||||
"line-width": 3
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
function generateLatLonGrid(step = 10) {
|
||||
const features = [];
|
||||
|
||||
// Rovnoběžky (latitudes)
|
||||
for (let lat = -80; lat <= 80; lat += step) {
|
||||
features.push({
|
||||
type: "Feature",
|
||||
geometry: {
|
||||
type: "LineString",
|
||||
coordinates: Array.from({ length: 37 }, (_, i) => [-180 + i * 10, lat])
|
||||
},
|
||||
properties: {
|
||||
type: "latitude",
|
||||
value: lat
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Poledníky (longitudes)
|
||||
for (let lon = -180; lon <= 180; lon += step) {
|
||||
features.push({
|
||||
type: "Feature",
|
||||
geometry: {
|
||||
type: "LineString",
|
||||
coordinates: Array.from({ length: 17 }, (_, i) => [lon, -80 + i * 10])
|
||||
},
|
||||
properties: {
|
||||
type: "longitude",
|
||||
value: lon
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
type: "FeatureCollection",
|
||||
features
|
||||
};
|
||||
}
|
||||
303
MapPolygons.js
303
MapPolygons.js
@ -1,303 +0,0 @@
|
||||
//import { getArrowPolygon } from "athena-utils/shape/Arrow.js";
|
||||
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 { getCirclePolygon } from "athena-utils/shape/BasicShapes.js";
|
||||
import { getRectanglePolygon } from "athena-utils/shape/BasicShapes.js";
|
||||
import { getFrontline } from "athena-utils/shape/Frontline.js";
|
||||
import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
|
||||
|
||||
mapboxgl.accessToken = 'pk.eyJ1Ijoib3V0ZG9vcm1hcHBpbmdjb21wYW55IiwiYSI6ImNqYmh3cDdjYzNsMnozNGxsYzlvMmk2bTYifQ.QqcZ4LVoLWnXafXdjZxnZg';
|
||||
const map = new mapboxgl.Map({
|
||||
container: '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);
|
||||
const rectangleGeoJSON = getRectanglePolygon([20, 80], 2200, 2200);
|
||||
const rectangleBGeoJSON = getRectanglePolygon([20, 20], 2200, 2200);
|
||||
const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
|
||||
|
||||
// FRONTLINE
|
||||
if (frontlineData.style === LEFT_SIDE){
|
||||
map.addSource("frontlinePolygon", {
|
||||
"type": "geojson",
|
||||
"data": frontlineGeoJSON.leftPoly
|
||||
});
|
||||
}else if (frontlineData.style === RIGHT_SIDE){
|
||||
map.addSource("frontlinePolygon", {
|
||||
"type": "geojson",
|
||||
"data": frontlineGeoJSON.rightPoly
|
||||
});
|
||||
} else {
|
||||
map.addSource("frontlinePolygon", {
|
||||
"type": "geojson",
|
||||
"data": frontlineGeoJSON.rightPoly
|
||||
});
|
||||
map.addSource("frontlinePolygonSecond", {
|
||||
"type": "geojson",
|
||||
"data": frontlineGeoJSON.leftPoly
|
||||
});
|
||||
}
|
||||
|
||||
map.addLayer({
|
||||
"id": "frontlinePolygon",
|
||||
"type": "fill",
|
||||
"source": "frontlinePolygon",
|
||||
"layout": {},
|
||||
"paint": {
|
||||
"fill-color": "blue",
|
||||
"fill-opacity": 0.6
|
||||
}
|
||||
});
|
||||
map.addLayer({
|
||||
"id": "frontlinePolygon-outline",
|
||||
"type": "line",
|
||||
"source": "frontlinePolygon",
|
||||
"paint": {
|
||||
"line-color": "#000000",
|
||||
"line-width": 2,
|
||||
"line-opacity": 1
|
||||
}
|
||||
});
|
||||
|
||||
if (frontlineData.style === BOTH_SIDES) {
|
||||
map.addLayer({
|
||||
"id": "frontlinePolygonSecond",
|
||||
"type": "fill",
|
||||
"source": "frontlinePolygonSecond",
|
||||
"layout": {},
|
||||
"paint": {
|
||||
"fill-color": "green",
|
||||
"fill-opacity": 0.6
|
||||
}
|
||||
});
|
||||
map.addLayer({
|
||||
"id": "frontlinePolygonSecond-outline",
|
||||
"type": "line",
|
||||
"source": "frontlinePolygonSecond",
|
||||
"paint": {
|
||||
"line-color": "#000000",
|
||||
"line-width": 2,
|
||||
"line-opacity": 1
|
||||
}
|
||||
});
|
||||
}
|
||||
// FRONTLINE
|
||||
|
||||
//ARROW
|
||||
if (fullPolygon.length != 0)
|
||||
{
|
||||
map.addSource("arrow-shape", { type: "geojson", data: fullPolygon });
|
||||
|
||||
map.addLayer({
|
||||
"id": "arrow-shape",
|
||||
"type": "fill",
|
||||
"source": "arrow-shape",
|
||||
"paint": {
|
||||
"fill-color": "#ff0000",
|
||||
"fill-opacity": 0.7
|
||||
}
|
||||
});
|
||||
map.addLayer({
|
||||
"id": "arrow-outline",
|
||||
"type": "line",
|
||||
"source": "arrow-shape",
|
||||
"paint": {
|
||||
"line-color": "#000000",
|
||||
"line-width": 2,
|
||||
"line-opacity": 1
|
||||
}
|
||||
});
|
||||
}
|
||||
//ARROW
|
||||
|
||||
// CIRCLE
|
||||
map.addSource("circlePolygon", {
|
||||
"type": "geojson",
|
||||
"data": circleGeoJSON
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
"id": "circlePolygon",
|
||||
"type": "fill",
|
||||
"source": "circlePolygon",
|
||||
"layout": {},
|
||||
"paint": {
|
||||
"fill-color": "blue",
|
||||
"fill-opacity": 0.6
|
||||
}
|
||||
});
|
||||
map.addLayer({
|
||||
"id": "circlePolygon-outline",
|
||||
"type": "line",
|
||||
"source": "circlePolygon",
|
||||
"paint": {
|
||||
"line-color": "#000000",
|
||||
"line-width": 2,
|
||||
"line-opacity": 1
|
||||
}
|
||||
});
|
||||
// CIRCLE
|
||||
|
||||
// RECTANGLE
|
||||
map.addSource("rectanglePolygon", {
|
||||
"type": "geojson",
|
||||
"data": rectangleGeoJSON
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
"id": "rectanglePolygon",
|
||||
"type": "fill",
|
||||
"source": "rectanglePolygon",
|
||||
"layout": {},
|
||||
"paint": {
|
||||
"fill-color": "red",
|
||||
"fill-opacity": 0.6
|
||||
}
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
"id": "rectanglePolygon-outline",
|
||||
"type": "line",
|
||||
"source": "rectanglePolygon",
|
||||
"paint": {
|
||||
"line-color": "#000",
|
||||
"line-width": 3
|
||||
}
|
||||
});
|
||||
|
||||
map.addSource("rectangleBPolygon", {
|
||||
"type": "geojson",
|
||||
"data": rectangleBGeoJSON
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
"id": "rectangleBPolygon",
|
||||
"type": "fill",
|
||||
"source": "rectangleBPolygon",
|
||||
"layout": {},
|
||||
"paint": {
|
||||
"fill-color": "red",
|
||||
"fill-opacity": 0.6
|
||||
}
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
"id": "rectangleBPolygon-outline",
|
||||
"type": "line",
|
||||
"source": "rectangleBPolygon",
|
||||
"paint": {
|
||||
"line-color": "#000",
|
||||
"line-width": 3
|
||||
}
|
||||
});
|
||||
// RECTANGLE
|
||||
|
||||
//MAP GRID
|
||||
const grid = generateLatLonGrid(10);
|
||||
map.addSource("latLonGrid", { type: "geojson", data: grid });
|
||||
map.addLayer({
|
||||
"id": "latLonGrid",
|
||||
"type": "line",
|
||||
"source": "latLonGrid",
|
||||
"paint": {
|
||||
"line-color": "#888",
|
||||
"line-width": 1,
|
||||
"line-opacity": 0.5
|
||||
}
|
||||
});
|
||||
//MAP GRID
|
||||
});
|
||||
|
||||
//ARROW
|
||||
const points = [
|
||||
[1.42076, 40.08804],
|
||||
[15.42076, 80.08804],
|
||||
[55.42076, 75.08804],
|
||||
[120.42076, 40.08804],
|
||||
[358.4050, 50.52]
|
||||
];
|
||||
const arrowData = {
|
||||
points: points,
|
||||
splineStep: 20,
|
||||
offsetDistance: 20000
|
||||
};
|
||||
const style = {
|
||||
calculation: ARROW_BODY_STYLE_CONSTANT,
|
||||
range: 1,
|
||||
minValue: 0.1
|
||||
};
|
||||
const arrowHeadData = {
|
||||
widthArrow: 10,
|
||||
lengthArrow: 5
|
||||
};
|
||||
//ARROW
|
||||
|
||||
//FRONTLINE
|
||||
/*
|
||||
const frontlinePoints = [
|
||||
[10.42076, 40.08804],
|
||||
[25.42076, 80.08804],
|
||||
[65.42076, 75.08804]
|
||||
];
|
||||
*/
|
||||
const frontlinePoints = [
|
||||
[14.32076, 50.08804],
|
||||
[15.42076, 51.08804],
|
||||
[16.42076, 52.08804],
|
||||
[18.42076, 50.08804]
|
||||
];
|
||||
const frontlineData = {
|
||||
points: frontlinePoints,
|
||||
splineStep: 0.08,
|
||||
offsetDistance: 10000,
|
||||
style: BOTH_SIDES,
|
||||
};
|
||||
const protrusionData = {
|
||||
length: 15000,
|
||||
startSize: 5000,
|
||||
endSize: 500,
|
||||
gap: 15000,
|
||||
};
|
||||
//FRONTLINE
|
||||
|
||||
//CIRCLE
|
||||
const circleCenter = [20, 80];
|
||||
const circleRadius = 120;
|
||||
const circleDensity = 20;
|
||||
//CIRCLE
|
||||
|
||||
//MAP GRID
|
||||
function generateLatLonGrid(step = 10) {
|
||||
const features = [];
|
||||
|
||||
for (let lat = -80; lat <= 80; lat += step) {
|
||||
features.push({
|
||||
type: "Feature",
|
||||
geometry: {
|
||||
type: "LineString",
|
||||
coordinates: Array.from({ length: 37 }, (_, i) => [-180 + i * 10, lat])
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
for (let lon = -180; lon <= 180; lon += step) {
|
||||
features.push({
|
||||
type: "Feature",
|
||||
geometry: {
|
||||
type: "LineString",
|
||||
coordinates: Array.from({ length: 17 }, (_, i) => [lon, -80 + i * 10])
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
type: "FeatureCollection",
|
||||
features
|
||||
};
|
||||
}
|
||||
//MAP GRID
|
||||
80
Polygon.js
80
Polygon.js
@ -1,80 +0,0 @@
|
||||
import * as turf from "@turf/turf";
|
||||
|
||||
/**
|
||||
* Converts an array of canvas-compatible points into a Turf.js Polygon.
|
||||
*
|
||||
* @param {{x: number, y: number}[]} points - Array of points with x and y properties.
|
||||
*
|
||||
* @returns {import('@turf/turf').Feature<import('@turf/turf').Polygon> | null} A Turf.js Polygon feature, or null if input is invalid.
|
||||
*/
|
||||
export function toTurfPolygon(points) {
|
||||
if (!points || points.length < 3) {
|
||||
console.error("Invalid input for polygon:", points);
|
||||
return null;
|
||||
}
|
||||
|
||||
const coords = points.map(p => [p.y, p.x]);
|
||||
coords.push(coords[0]);
|
||||
return turf.polygon([coords]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Merges two polygons (in canvas format) into a single Turf.js polygon using turf.union.
|
||||
*
|
||||
* @param {{x: number, y: number}[]} polygonA - First polygon (array of points).
|
||||
* @param {{x: number, y: number}[]} polygonB - Second polygon (array of points).
|
||||
*
|
||||
* @returns {import('@turf/turf').Feature<import('@turf/turf').Polygon> | null} A merged Turf.js polygon, or null on failure.
|
||||
*/
|
||||
export function mergeTurfPolygons(polygonA, polygonB) {
|
||||
const turfPolygonA = toTurfPolygon(polygonA);
|
||||
const turfPolygonB = toTurfPolygon(polygonB);
|
||||
|
||||
return turf.union(turf.featureCollection([turfPolygonA, turfPolygonB]));
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a new polygon to an existing merged Turf.js polygon.
|
||||
*
|
||||
* @param {import('@turf/turf').Feature<import('@turf/turf').Polygon>} polygonA - Existing merged Turf.js polygon.
|
||||
* @param {{x: number, y: number}[]} polygonB - New polygon in canvas point format to add to the merge.
|
||||
*
|
||||
* @returns {import('@turf/turf').Feature<import('@turf/turf').Polygon>} Updated merged Turf.js polygon.
|
||||
*/
|
||||
export function addTurfPolygonToMerge(polygonA, polygonB) {
|
||||
const testB = toTurfPolygon(polygonB);
|
||||
return turf.union(turf.featureCollection([polygonA, testB]));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{x: number, y: number}[][]} polygons
|
||||
* @returns {Feature<Polygon | MultiPolygon, GeoJsonProperties>}
|
||||
*/
|
||||
|
||||
export function mergePolygons(polygons) {
|
||||
|
||||
if (!polygons || polygons.length === 0)
|
||||
return undefined;
|
||||
|
||||
if (polygons.length === 1)
|
||||
return toTurfPolygon(polygons[0]);
|
||||
|
||||
return turf.union(turf.featureCollection(polygons.map(p => toTurfPolygon(p))));
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {Array<Feature<Polygon | MultiPolygon, GeoJsonProperties>>|undefined} features
|
||||
* @returns {Feature<Polygon | MultiPolygon, GeoJsonProperties>|undefined|*}
|
||||
*/
|
||||
export function mergePolygonFeatures(features) {
|
||||
|
||||
if (!features || features.length === 0)
|
||||
return undefined;
|
||||
|
||||
if (features.length === 1)
|
||||
return features[0];
|
||||
|
||||
console.log("3" + features.length)
|
||||
return turf.union(turf.featureCollection(features));
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
// Converts a Turf polygon into an array of canvas-compatible points
|
||||
function toCanvasPolygon(turfPolygon) {
|
||||
if (!turfPolygon || !turfPolygon.geometry) return [];
|
||||
|
||||
let polygons = [];
|
||||
|
||||
if (turfPolygon.geometry.type === 'Polygon') {
|
||||
polygons.push(turfPolygon.geometry.coordinates[0]);
|
||||
}
|
||||
else if (turfPolygon.geometry.type === 'MultiPolygon') {
|
||||
turfPolygon.geometry.coordinates.forEach(polygon => {
|
||||
polygons.push(polygon[0]);
|
||||
});
|
||||
}
|
||||
else {
|
||||
console.error("Unsupported geometry type:", turfPolygon.geometry.type);
|
||||
return [];
|
||||
}
|
||||
|
||||
return polygons.map(coords =>
|
||||
coords.slice(0, -1).map(coord => ({ x: coord[0], y: coord[1] }))
|
||||
);
|
||||
}
|
||||
|
||||
// Draws a polygon on the canvas with a given color
|
||||
export function drawPolygon(turfPolygon, color, canvas) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.fillStyle = color;
|
||||
|
||||
const polygons = toCanvasPolygon(turfPolygon);
|
||||
if (!polygons.length) {
|
||||
console.log("No valid polygons to draw.");
|
||||
return;
|
||||
}
|
||||
|
||||
polygons.forEach(points => {
|
||||
if (points.length < 3) return;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(points[0].x, points[0].y);
|
||||
points.forEach(p => ctx.lineTo(p.x, p.y));
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
});
|
||||
}
|
||||
154
index.html
154
index.html
@ -1,156 +1,3 @@
|
||||
<!--
|
||||
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>
|
||||
|
||||
<label>Style:
|
||||
<select id="styleArrow">
|
||||
<option value=1>Constant</option>
|
||||
<option value=2>Linear</option>
|
||||
<option value=3>Exponential</option>
|
||||
</select>
|
||||
</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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Display a map on a webpage</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>
|
||||
<style>
|
||||
body { margin: 0; padding: 0; }
|
||||
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script type="module" src="MapPolygons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
-->
|
||||
|
||||
<!--
|
||||
CANVAS
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
@ -165,4 +12,3 @@ CANVAS
|
||||
<script type="module" src="ArrowPoints.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
-->
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
@ -2718,7 +2718,7 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/athena-utils": {
|
||||
"resolved": "git+https://git.projectathena.ca/andyaxxe/athena-utils.git#4425aaa18d",
|
||||
"resolved": "git+https://git.projectathena.ca/andyaxxe/athena-utils.git#904b62b360",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@turf/turf": "7.2.0"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user