andyaxxe/StorymapperArrow
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

Arrows, Circle finished

Browse Source
This commit is contained in:
Tomas Richtar
2025-05-28 17:45:01 +02:00
parent 2f18d2f06f
commit 3edc2570be
5 changed files with 418 additions and 546 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
Arrow.js
View File

@@ -2,43 +2,144 @@ export const ARROW_BODY_STYLE_CONSTANT = 1;
export const ARROW_BODY_STYLE_LINEAR = 2;
export const ARROW_BODY_STYLE_EXPONENTIAL = 3;
const distancePerDegreeLongitude = 111.320; // 2π×6378.1km/360
const distancePerDegreeLatitude = 110.574; // 2π×6356.75km/360
import * as turf from "@turf/turf";
function round(value, decimals = 6) {
return Number(value.toFixed(decimals));
//ARROW
// Cubic interpolation source from https://www.paulinternet.nl/?page=bicubic
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])));
}
// Převod z lon/lat do Web Mercator (v metrech)
function lonLatToMeters(lon, lat) {
const originShift = 2 * Math.PI * 6378137 / 2.0;
const mx = lon * originShift / 180.0 ;
const my = Math.log(Math.tan((90 + lat) * Math.PI / 360.0)) / (Math.PI / 180.0)* 150;
//console.log(JSON.stringify(mx, null, 2));
return {
x: mx,
y: my * originShift / 180.0
};
function exponentialWidthCurve(normalizedPosition, range = 5, minValue = 0.1) {
return minValue + (1 - minValue) * Math.exp(-range * normalizedPosition);
}
// Převod z Web Mercator zpět do lon/lat
function metersToLonLat(mx, my) {
const originShift = 2 * Math.PI * 6378137 / 2.0;
const lon = (mx / originShift) * 180.0;
const lat = 180 / Math.PI * (2 * Math.atan(Math.exp(my / originShift * Math.PI / 180.0)) - Math.PI / 2);
return {
lon: round(lon, 6),
lat: round(lat, 6)
};
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 (!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) {
const b = turf.bearing(turf.point(points[i]), turf.point(points[i + 1]));
bearings.push(b);
}
}
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.
@@ -57,7 +158,7 @@ function metersToLonLat(mx, my) {
*
* @returns {{x: number, y: number}[]} - An array of points representing the arrow polygon.
*/
export function getArrowPolygon(
export function getArrowPolygonEuclidean(
arrowData,
style= undefined,
arrowHeadData = undefined) {
@@ -69,17 +170,16 @@ export function getArrowPolygon(
minValue: 0
};
const splinePoints = computeSplinePoints(arrowData.points, arrowData.splineStep);
const { leftSidePoints, rightSidePoints } = computeSides(splinePoints, arrowData.spacing, arrowData.offsetDistance, style);
const splinePoints = computeSplinePointsEuclidean(arrowData.points, arrowData.splineStep);
const { leftSidePoints, rightSidePoints } = computeSidesEuclidean(splinePoints, arrowData.spacing, arrowData.offsetDistance, style);
const arrowHead= arrowHeadData
? createIsoscelesTriangleFromSpline(splinePoints, arrowHeadData.widthArrow, arrowHeadData.lengthArrow)
? computeArrowHeadEuclidean(splinePoints, arrowHeadData.widthArrow, arrowHeadData.lengthArrow)
: [];
const fullPolygon = [...leftSidePoints, ...arrowHead.reverse(), ...rightSidePoints.reverse()];
return fullPolygon;
return [...leftSidePoints, ...arrowHead.reverse(), ...rightSidePoints.reverse()];
}
function computeSplinePoints(points, splineStep) {
function computeSplinePointsEuclidean(points, splineStep) {
let splinePoints = [];
for (let i = 0; i < points.length - 1; i++) {
@@ -94,11 +194,11 @@ function computeSplinePoints(points, splineStep) {
});
}
}
splinePoints.x /100;
return splinePoints;
}
function computeSides(splinePoints, spacing, offsetDistance, style) {
function computeSidesEuclidean(splinePoints, spacing, offsetDistance, style) {
let leftSidePoints = [];
let rightSidePoints = [];
@@ -112,17 +212,8 @@ function computeSides(splinePoints, spacing, offsetDistance, style) {
accumulatedDistance += segmentLength;
if (accumulatedDistance >= spacing || i === 1 || i === splinePoints.length - 1) {
let distanceX;
let distanceY;
if (i == 1 || i == splinePoints.length-1)
{
distanceX = (currentPoint.y - previousPoint.y);
distanceY = (previousPoint.x - currentPoint.x);
}else
{
distanceX = (currentPoint.y - previousPoint.y) ;
distanceY = (previousPoint.x - currentPoint.x) ;
}
const distanceX = currentPoint.y - previousPoint.y;
const distanceY = previousPoint.x - currentPoint.x;
const length = Math.hypot(distanceX, distanceY);
const normalizedPosition = i / (splinePoints.length - 1);
@@ -144,66 +235,29 @@ function computeSides(splinePoints, spacing, offsetDistance, style) {
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 });
leftSidePoints.push({ x: currentPoint.x + offsetX, y: currentPoint.y + offsetY });
rightSidePoints.push({ x: currentPoint.x - offsetX, y: currentPoint.y - offsetY });
}
}
return { leftSidePoints, rightSidePoints };
}
function createIsoscelesTriangleFromSpline(splinePoints, baseLengthMeters, heightMeters) {
if (splinePoints.length < 2) {
throw new Error("Potřeba alespoň dva body ve splinePoints");
}
const last = splinePoints[splinePoints.length - 1];
const prev = splinePoints[splinePoints.length - 2];
// Vektor směru (bearing)
const dx = last.x - prev.x;
const dy = last.y - prev.y;
const bearing = (Math.atan2(dx, dy) * 180 / Math.PI + 360) % 360;
const center = [last.x, last.y]; // GeoJSON formát: [lon, lat]
const halfBase = baseLengthMeters / 2*100000;
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*100000, bearing, { units: 'meters' });
return [
{ x: leftBase.geometry.coordinates[0], y: leftBase.geometry.coordinates[1] },
{ x: apex.geometry.coordinates[0], y: apex.geometry.coordinates[1] },
{ x: rightBase.geometry.coordinates[0], y: rightBase.geometry.coordinates[1] }
];
}
function computeArrowHead(splinePoints, width, length) {
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 x = (lastPoint.x - secondLastPoint.x) ;
const y = (lastPoint.y - secondLastPoint.y) ;
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},
{ 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 },
];
}
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 ;
}
//CANVAS
//ARROW