muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 19:16:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

better km marks

Browse source
This commit is contained in:
muerwre 2019-03-04 12:59:00 +07:00
parent 7aed6bea01
commit 653dd8ace1
3 changed files with 29 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/modules/KmMarks.ts
View file

@ -1,7 +1,7 @@
import { divIcon, LatLngLiteral, LayerGroup, Map, marker, Marker } from "leaflet"; import { divIcon, LatLngLiteral, LayerGroup, Map, marker, Marker } from "leaflet";
import { arrowClusterIcon, createArrow } from "$utils/arrow"; import { arrowClusterIcon, createArrow } from "$utils/arrow";
import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js'; import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
import { angleBetweenPoints, dist2, distKm, middleCoord, pointOnDistance } from "$utils/geom"; import { allwaysPositiveAngleDeg, angleBetweenPoints, distKm } from "$utils/geom";
interface KmMarksOptions { interface KmMarksOptions {
showMiddleMarkers: boolean, showMiddleMarkers: boolean,
@ -68,14 +68,16 @@ class Component extends LayerGroup {
return sum; return sum;
}, 0); }, 0);
console.log(kmMarks);
}; };
createMiddleMarker = (latlng: LatLngLiteral, angle: number, distance: number): Marker => marker(latlng, { createMiddleMarker = (latlng: LatLngLiteral, angle: number, distance: number): Marker => marker(latlng, {
draggable: false, draggable: false,
interactive: true, interactive: false,
icon: divIcon({ icon: divIcon({
html: ` html: `
<div class="leaflet-km-dist" style="transform: rotate(${angle}deg);"> <div class="leaflet-km-dist" style="transform: translate(0, 0) rotate(${allwaysPositiveAngleDeg(angle)}deg);">
${distance} ${distance}
</div> </div>
`, `,

9
src/styles/map.less
View file

@ -106,17 +106,18 @@
.leaflet-km-dist { .leaflet-km-dist {
background: @red_secondary; background: @red_secondary;
color: white; color: white;
border-radius: 2px; border-radius: 4px;
font-size: 9px; font-size: 12px;
text-align: center; text-align: center;
min-width: 20px; min-width: 20px;
height: 12px; height: 14px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
top: 0; top: 0;
left: -5px; left: -4px;
font-weight: bold;
} }
} }

25
src/utils/geom.ts
View file

@ -87,15 +87,22 @@ export const pointBetweenPoints = (A: LatLng, B: LatLng, C: LatLng): boolean =>
export const angleBetweenPoints = (A: Point, B: Point): number => parseFloat(((Math.atan2(B.y - A.y, B.x - A.x))* 180 / Math.PI).toFixed()); export const angleBetweenPoints = (A: Point, B: Point): number => parseFloat(((Math.atan2(B.y - A.y, B.x - A.x))* 180 / Math.PI).toFixed());
export const angleBetweenPointsRad = (A: Point, B: Point): number => ((Math.atan2(B.x - A.x, B.y - A.y))); export const angleBetweenPointsRad = (A: Point, B: Point): number => ((Math.atan2(B.x - A.x, B.y - A.y)));
export const pointOnDistance = (A: Point, B: Point, shift: number): Point => { // export const pointOnDistance = (A: Point, B: Point, shift: number): Point => {
const c = Math.sqrt((((B.x - A.x) ** 2) + ((B.y - A.y) ** 2))); // const c = Math.sqrt((((B.x - A.x) ** 2) + ((B.y - A.y) ** 2)));
const angle = angleBetweenPointsRad(A, B); // const angle = angleBetweenPointsRad(A, B);
//
// // console.log({ angle, c, shift });
// const x = Math.floor(B.x - c * Math.sin(angle) * shift);
// const y = Math.floor(B.y - c * Math.cos(angle) * shift);
//
// // console.log({ x, y });
//
// return new Point(x, y);
// };
// console.log({ angle, c, shift }); export const allwaysPositiveAngleDeg = (angle: number): number => {
const x = Math.floor(B.x - c * Math.sin(angle) * shift); const res = (angle >= -90 && angle <= 90) ? angle : (180 + angle)
const y = Math.floor(B.y - c * Math.cos(angle) * shift); console.log(`${angle} ==> ${res}`)
// console.log({ x, y }); return res;
return new Point(x, y);
}; };