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

Arrows: now uses nearest marker's position and icon

Browse source
This commit is contained in:
muerwre 2019-02-26 17:45:54 +07:00
parent 60429e5643
commit 07d4ff9084
2 changed files with 17 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/modules/Poly.ts
View file

@ -57,6 +57,8 @@ export class Poly {
onVertexShow = (): void => this.editor.setMarkersShown(true);
updateArrows = event => {
this.editor.setChanged(true);
const { latlngs } = event;
this.arrowLayer.clearLayers();
@ -168,7 +170,7 @@ export class Poly {
showCoverageOnHover: false,
zoomToBoundsOnClick: false,
animate: false,
maxClusterRadius: 60,
maxClusterRadius: 120,
// disableClusteringAtZoom: 13,
iconCreateFunction: arrowClusterIcon,
});

18
src/utils/arrow.ts
View file

@ -1,4 +1,5 @@
import { divIcon, LatLngLiteral, Marker, marker, DivIcon } from "leaflet";
import { dist2 } from "$utils/geom";
export const createArrow = (latlng: LatLngLiteral, angle: number): Marker => marker(latlng, {
draggable: false,
@ -7,7 +8,7 @@ export const createArrow = (latlng: LatLngLiteral, angle: number): Marker => mar
html: `
<div class="leaflet-arrow" style="transform: rotate(${angle}deg);">
<svg width="40" height="40" preserveAspectRatio="xMidYMid">
<use xlink:href="#path-arrow" transform="scale(2)"/>
<use xlink:href="#path-arrow" transform="scale(1.6) translate(4)"/>
</svg>
</div>
`,
@ -17,6 +18,15 @@ export const createArrow = (latlng: LatLngLiteral, angle: number): Marker => mar
})
});
export const arrowClusterIcon = (): DivIcon => divIcon({
html: `<div class="leaflet-arrow-cluster"></div>`
});
export const arrowClusterIcon = (cluster): DivIcon => {
console.log(cluster.getAllChildMarkers());
const markers = cluster.getAllChildMarkers();
const nearest = markers.sort((a, b) => (
dist2(a.getLatLng(), cluster.getLatLng()) - dist2(b.getLatLng(), cluster.getLatLng())
));
cluster.setLatLng(nearest[0].getLatLng());
return nearest[0].options.icon;
};