Adding arrows to trksegs.

This commit is contained in:
Eric van der Vlist 2022-12-10 16:23:10 +01:00
parent 327f0a6910
commit c6e1f63a85
5 changed files with 67 additions and 7 deletions

View File

@ -10,11 +10,14 @@ import cheeseIcon from '../../icons/cheese-svgrepo-com.svg';
import trainIcon from '../../icons/train-svgrepo-com.svg'; import trainIcon from '../../icons/train-svgrepo-com.svg';
import picnicIcon from '../../icons/picnic-svgrepo-com.svg'; import picnicIcon from '../../icons/picnic-svgrepo-com.svg';
import caveIcon from '../../icons/cave-entrance-svgrepo-com.svg'; import caveIcon from '../../icons/cave-entrance-svgrepo-com.svg';
import leftArrowIcon from '../../icons/right-arrow-svgrepo-com.svg';
import blackArrowheadPointingUp from '../../icons/black-arrowhead-pointing-up-svgrepo-com.svg';
import wptIconSel from '../../icons/location-pin-svgrepo-com-red.svg'; import wptIconSel from '../../icons/location-pin-svgrepo-com-red.svg';
import { Feature } from 'ol'; import { Feature } from 'ol';
import memoize from 'memoizee'; import memoize from 'memoizee';
import { getState } from '../map'; import { getMap, getState } from '../map';
import { Point } from 'ol/geom'; import { Point } from 'ol/geom';
import { Coordinate } from 'ol/coordinate';
interface StyleParameters { interface StyleParameters {
type: string; type: string;
@ -172,6 +175,7 @@ const styles = {
image: new Icon(icon), image: new Icon(icon),
text: new Text({ text: new Text({
font: '16px Calibri,sans-serif', font: '16px Calibri,sans-serif',
overflow: true,
text: text, text: text,
fill: isSelected ? textFillSel : textFill, fill: isSelected ? textFillSel : textFill,
stroke: isSelected ? textStrokeSel : textStroke, stroke: isSelected ? textStrokeSel : textStroke,
@ -184,19 +188,50 @@ const styles = {
getParameters: (feature: Feature) => { getParameters: (feature: Feature) => {
return { return {
isSelected: feature.get('isSelected') ?? false, isSelected: feature.get('isSelected') ?? false,
feature: zoom() >= 15 ? feature : undefined, feature: zoom() >= 7 ? feature : undefined,
zoom: zoom() >= 7 ? Math.floor(zoom()) : undefined,
}; };
}, },
getStyle: memoize((params: any) => { getStyle: memoize((params: any) => {
console.log({ caller: 'getStyle', params }); console.log({ caller: 'getStyle', params });
const { isSelected, feature } = params; const { isSelected, feature, zoom } = params;
const styles = [ const styles = [
new Style({ stroke: isSelected ? trksegStrokeSel : trksegStroke }), new Style({ stroke: isSelected ? trksegStrokeSel : trksegStroke }),
]; ];
if (feature) { if (feature) {
const map = getMap();
const geometry = feature.getGeometry(); const geometry = feature.getGeometry();
geometry.forEachSegment((start: any, end: any) => { const coordinates = geometry.getCoordinates();
styles.push(new Style({ geometry: new Point(end), image: circle })); let start = coordinates[0];
let startPixels = map?.getPixelFromCoordinate(start);
coordinates.slice(1).forEach((end: Coordinate) => {
const endPixels = map?.getPixelFromCoordinate(end);
if (
startPixels !== undefined &&
endPixels !== undefined &&
Math.sqrt(
(startPixels[0] - endPixels[0]) ** 2 +
(startPixels[1] - endPixels[1]) ** 2
) > 80
) {
const dx = end[0] - start[0];
const dy = end[1] - start[1];
const rotation = Math.atan2(dy, dx) - Math.PI / 2;
styles.push(
new Style({
geometry: new Point(end),
image: new Icon({
src: blackArrowheadPointingUp,
scale: 1 / 20,
anchor: [0.5, 0.5],
rotateWithView: true,
rotation: -rotation,
}),
})
);
startPixels = endPixels;
start = end;
}
}); });
} }
return styles; return styles;

View File

@ -46,8 +46,11 @@ const [getState, setState] = createSignal({
export { getState }; export { getState };
const Map: Component = () => {
const [getMap, setMap] = createSignal<OlMap | null>(null); const [getMap, setMap] = createSignal<OlMap | null>(null);
export { getMap };
const Map: Component = () => {
const params = useParams(); const params = useParams();
const navigate = useNavigate(); const navigate = useNavigate();

View File

@ -1 +1 @@
export { default, getState } from './Map'; export { default, getState, getMap } from './Map';

View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="238" height="238"
style="enable-background:new 0 0 237.64 237.64;" xml:space="preserve">
<g>
<path style="fill:#010002;" d="M7.954,226.53c-2.23,4.623-2.295,8.072-0.609,9.915c3.911,4.275,15.926-3.905,23.323-9.051
l58.416-40.662c7.397-5.145,20.402-11.835,29.414-11.993c0.897-0.016,1.8-0.011,2.703,0.011c9.007,0.218,21.958,7.016,29.3,12.238
l56.403,40.151c7.343,5.221,19.303,13.473,23.301,9.219c1.74-1.849,1.751-5.33-0.381-9.997L129.648,7.047
c-4.264-9.333-11.335-9.404-15.79-0.163L7.954,226.53z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 800 B

View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="490" height="490"
style="enable-background:new 0 0 490 490;" xml:space="preserve">
<g>
<path d="M486.936,245L3.064,0l148.887,245L3.064,490L486.936,245z M84.7,75.554L419.343,245L84.7,414.446L187.671,245L84.7,75.554z
"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 518 B