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,
+});