fixed router

src/utils/osrm.ts

@@ -0,0 +1,65 @@
+import { Marker } from 'leaflet';
+import * as Routing from 'leaflet-routing-machine/src/index';
+import { CLIENT } from '~/config/frontend';
+import { DomMarker } from '~/utils/DomMarker';
+import { MainMap } from '~/constants/map';
+
+const createWaypointMarker = (): DomMarker => {
+  const element = document.createElement('div');
+
+  // element.addEventListener('mousedown', this.lockPropagations);
+  // element.addEventListener('mouseup', this.unlockPropagations);
+
+  return new DomMarker({
+    element,
+    className: 'router-waypoint',
+  });
+};
+
+const routeLine = r =>
+  Routing.line(r, {
+    styles: [
+      { color: 'white', opacity: 0.8, weight: 12 },
+      { color: '#4597d0', opacity: 1, weight: 4, dashArray: '15,10' },
+    ],
+    addWaypoints: true,
+  });
+// .on('linetouched', this.lockPropagations);
+
+export const OsrmRouter = Routing.control({
+  serviceUrl: CLIENT.OSRM_URL,
+  profile: CLIENT.OSRM_PROFILE,
+  fitSelectedRoutes: false,
+  showAlternatives: false,
+  routeLine,
+  altLineOptions: {
+    styles: [{ color: '#4597d0', opacity: 1, weight: 3 }],
+  },
+  show: false,
+  plan: Routing.plan([], {
+    createMarker: (i, wp) => {
+      const marker = new Marker(wp.latLng, {
+        draggable: true,
+        icon: createWaypointMarker(),
+      })
+        .on('dragstart', () => MainMap.disableClicks())
+        .on('dragend', () => MainMap.enableClicks())
+        .on('contextmenu', ({ latlng }: any) => {
+          OsrmRouter.setWaypoints(
+            OsrmRouter.getWaypoints().filter(
+              point =>
+                !point.latLng || (point.latLng.lat != latlng.lat && point.latLng.lng != latlng.lng)
+            )
+          );
+        });
+
+      return marker;
+    },
+    routeWhileDragging: false,
+  }),
+  routeWhileDragging: false,
+  routingOptions: {
+    geometryOnly: false,
+  },
+  useHints: false,
+});

src/utils/simplify.ts

@@ -2,22 +2,8 @@ import { Map, LineUtil } from 'leaflet';
 import { ILatLng } from "~/redux/map/types";
 
 export const simplify = ({ map, latlngs }: { map: Map, latlngs: ILatLng[] }): ILatLng[] => {
-  const points = [];
-  const target = [];
   const zoom = 12;
   const mul = 0.7; // 0 - not simplifying, 1 - very rude.
-  // its better to estimate mul value by route length
-
-  for (let i = 0; i < latlngs.length; i += 1) {
-    points.push(map.project({ lat: latlngs[i].lat, lng: latlngs[i].lng }, zoom));
-  }
-
-  const simplified = LineUtil.simplify(points, mul);
-
-  // for (let i = 0; i < simplified.length; i += 1) {
-  //   target.push(map.unproject(simplified[i], zoom));
-  // }
-  //
-  // return target;
-  return simplified.map(item => map.unproject(item, zoom));
+  const points = latlngs.map(({ lat, lng }) => map.project({ lat, lng }, zoom));
+  return LineUtil.simplify(points, mul).map(item => map.unproject(item, zoom));
 };