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

made poly arrows via svg markers

Browse source
This commit is contained in:
muerwre 2018-08-27 15:28:13 +07:00
parent 4c10e45c6b
commit d9f83425f6
4 changed files with 98 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/modules/Poly.js
View file

@ -1,8 +1,13 @@
import L from 'leaflet';
import 'leaflet-geometryutil';
import { simplify } from '$utils/simplify';
import { findDistance, middleCoord } from '$utils/geom';
const polyStyle = { color: 'url(#activePathGradient)', weight: '6' };
const polyStyle = {
color: 'url(#activePathGradient)',
weight: '6',
markerMid: 'url(#arrow)'
};
// const polyStyle = { color: '#ff3344', weight: '5' };
export class Poly {
@ -10,24 +15,54 @@ export class Poly {
map, routerMoveStart, lockMapClicks, setTotalDist
}) {
this.poly = L.polyline([], polyStyle);
this.latlngs = [];
this.poly.addTo(map);
this.map = map;
this.routerMoveStart = routerMoveStart;
this.setTotalDist = setTotalDist;
this.lockMapClicks = lockMapClicks;
this.bindEvents();
this.arrows = new L.LayerGroup().addTo(map);
}
drawArrows = () => {
this.arrows.clearLayers();
const { latlngs } = this;
if (!latlngs || latlngs.length <= 1) return;
latlngs.map((latlng, i) => {
if (i === 0) return;
const mid = middleCoord(latlngs[i], latlngs[i - 1]);
const dist = findDistance(latlngs[i - 1].lat, latlngs[i - 1].lng, latlngs[i].lat, latlngs[i].lng);
if (dist > 1.5) {
const slide = new L.Polyline(
[
latlngs[i - 1],
[mid.lat, mid.lng]
],
{ color: 'none', weight: '5' }
).addTo(this.arrows);
slide._path.setAttribute('marker-end', 'url(#long-arrow)');
}
});
};
updateMarks = () => {
const coords = this.poly.toGeoJSON().geometry.coordinates;
this.latlngs = (coords && coords.length && coords.map(([lng, lat]) => ({ lng, lat }))) || [];
const meters = (this.poly && (L.GeometryUtil.length(this.poly) / 1000)) || 0;
const kilometers = (meters && parseFloat(meters.toFixed(1))) || 0;
const kilometers = (meters && meters.toFixed(1)) || 0;
this.setTotalDist(kilometers);
this.routerMoveStart();
this.drawArrows();
};
bindEvents = () => {