235 lines
8.0 KiB
JavaScript
235 lines
8.0 KiB
JavaScript
mapboxgl.accessToken = 'pk.eyJ1Ijoib3V0ZG9vcm1hcHBpbmdjb21wYW55IiwiYSI6ImNqYmh3cDdjYzNsMnozNGxsYzlvMmk2bTYifQ.QqcZ4LVoLWnXafXdjZxnZg';
|
|
const map = new mapboxgl.Map({
|
|
container: 'map',
|
|
center: [10, 50],
|
|
zoom: 5
|
|
});
|
|
|
|
import * as turf from "@turf/turf";
|
|
import { ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_EXPONENTIAL } from "./Arrow.js";
|
|
|
|
map.on('load', () => {
|
|
const fullPolygon = getArrowPolygon(arrowData, style, arrowHeadData);
|
|
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
|
|
}
|
|
});
|
|
|
|
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
|
|
}
|
|
});
|
|
|
|
// Obrys (černý)
|
|
map.addLayer({
|
|
id: "arrow-outline",
|
|
type: "line",
|
|
source: "arrow-shape",
|
|
paint: {
|
|
"line-color": "#000000",
|
|
"line-width": 2,
|
|
"line-opacity": 1
|
|
}
|
|
});
|
|
});
|
|
|
|
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,
|
|
spacing: 0.01,
|
|
offsetDistance: 20000
|
|
};
|
|
const style = {
|
|
calculation: ARROW_BODY_STYLE_CONSTANT,
|
|
range: 1,
|
|
minValue: 0.1
|
|
};
|
|
const arrowHeadData = {
|
|
widthArrow: 10,
|
|
lengthArrow: 5
|
|
};
|
|
|
|
// 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])));
|
|
}
|
|
|
|
/**
|
|
* @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 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];
|
|
}
|
|
|
|
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
|
|
};
|
|
}
|
|
|
|
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 ;
|
|
} |