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

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

18
src/utils/arrow.ts
View file

@ -1,4 +1,5 @@
import { divIcon, LatLngLiteral, Marker, marker, DivIcon } from "leaflet"; import { divIcon, LatLngLiteral, Marker, marker, DivIcon } from "leaflet";
import { dist2 } from "$utils/geom";
export const createArrow = (latlng: LatLngLiteral, angle: number): Marker => marker(latlng, { export const createArrow = (latlng: LatLngLiteral, angle: number): Marker => marker(latlng, {
draggable: false, draggable: false,
@ -7,7 +8,7 @@ export const createArrow = (latlng: LatLngLiteral, angle: number): Marker => mar
html: ` html: `
<div class="leaflet-arrow" style="transform: rotate(${angle}deg);"> <div class="leaflet-arrow" style="transform: rotate(${angle}deg);">
<svg width="40" height="40" preserveAspectRatio="xMidYMid"> <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> </svg>
</div> </div>
`, `,
@ -17,6 +18,15 @@ export const createArrow = (latlng: LatLngLiteral, angle: number): Marker => mar
}) })
}); });
export const arrowClusterIcon = (): DivIcon => divIcon({ export const arrowClusterIcon = (cluster): DivIcon => {
html: `<div class="leaflet-arrow-cluster"></div>` 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;
};