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

even better performance by combining km marks and arrows

Browse source
This commit is contained in:
Fedor Katurov 2020-01-16 16:31:47 +07:00
parent f4cd6bd44a
commit 4ac0bbebe2
2 changed files with 15 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/styles/map.less
View file

@ -130,6 +130,13 @@
left: 50%; left: 50%;
font-weight: bold; font-weight: bold;
padding: 0 2px; padding: 0 2px;
svg {
position: absolute;
top: -16px;
left: 50%;
transform: translate(-50%, 0);
}
} }
} }

22
src/utils/marks.ts
View file

@ -1,8 +1,9 @@
import { divIcon, LatLngLiteral, Layer, LayerGroup, Map, marker, Marker } from 'leaflet'; import { divIcon, LatLngLiteral, Layer, LayerGroup, Map, marker, Marker } from 'leaflet';
import { arrowClusterIcon, createArrow } from '~/utils/arrow'; import { arrowClusterIcon } from '~/utils/arrow';
import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js'; import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
import { allwaysPositiveAngleDeg, angleBetweenPoints, distKmHaversine } from '~/utils/geom'; import { allwaysPositiveAngleDeg, angleBetweenPoints, distKmHaversine } from '~/utils/geom';
import classNames from 'classnames'; import classNames from 'classnames';
const arrow_image = require('~/sprites/arrow.svg');
interface KmMarksOptions { interface KmMarksOptions {
showMiddleMarkers: boolean; showMiddleMarkers: boolean;
@ -29,7 +30,6 @@ class KmMarksLayer extends LayerGroup {
this.marksLayer.clearLayers(); this.marksLayer.clearLayers();
this.endMarker.clearLayers(); this.endMarker.clearLayers();
this.arrowsLayer.clearLayers();
this.distance = 0; this.distance = 0;
@ -70,7 +70,6 @@ class KmMarksLayer extends LayerGroup {
}; };
marks.push(this.createMiddleMarker(coords, angle, step)); marks.push(this.createMiddleMarker(coords, angle, step));
arrows.push(createArrow(coords, angle));
} }
last_km_mark = rounded; last_km_mark = rounded;
@ -80,7 +79,6 @@ class KmMarksLayer extends LayerGroup {
}, 0); }, 0);
this.marksLayer.addLayers(marks); this.marksLayer.addLayers(marks);
this.arrowsLayer.addLayers(arrows);
}; };
createMiddleMarker = (latlng: LatLngLiteral, angle: number, distance: number): Marker => createMiddleMarker = (latlng: LatLngLiteral, angle: number, distance: number): Marker =>
@ -93,6 +91,10 @@ class KmMarksLayer extends LayerGroup {
angle angle
)}deg);"> )}deg);">
${distance} ${distance}
<svg width="48" height="48" preserveAspectRatio="xMidYMid">
<image xlink:href="${arrow_image}" x="0" y="0" width="48" height="48"/>
</svg>
</div> </div>
`, `,
className: 'leaflet-km-marker', className: 'leaflet-km-marker',
@ -142,14 +144,6 @@ class KmMarksLayer extends LayerGroup {
maxClusterRadius: 120, maxClusterRadius: 120,
iconCreateFunction: arrowClusterIcon, iconCreateFunction: arrowClusterIcon,
}); });
arrowsLayer: MarkerClusterGroup = new MarkerClusterGroup({
spiderfyOnMaxZoom: false,
showCoverageOnHover: false,
zoomToBoundsOnClick: false,
animate: false,
maxClusterRadius: 120,
iconCreateFunction: arrowClusterIcon,
});
endMarker: LayerGroup = new LayerGroup(); endMarker: LayerGroup = new LayerGroup();
distance: number = 0; distance: number = 0;
} }
@ -160,7 +154,7 @@ KmMarksLayer.addInitHook(function() {
this.map = event.target._map; this.map = event.target._map;
this.marksLayer.addTo(this.map); this.marksLayer.addTo(this.map);
this.endMarker.addTo(this.map); this.endMarker.addTo(this.map);
this.arrowsLayer.addTo(this.map); // this.arrowsLayer.addTo(this.map);
} }
}); });
@ -168,7 +162,7 @@ KmMarksLayer.addInitHook(function() {
if (event.target instanceof KmMarksLayer) { if (event.target instanceof KmMarksLayer) {
this.marksLayer.removeFrom(this.map); this.marksLayer.removeFrom(this.map);
this.endMarker.removeFrom(this.map); this.endMarker.removeFrom(this.map);
this.arrowsLayer.removeFrom(this.map); // this.arrowsLayer.removeFrom(this.map);
} }
}); });
}); });