printing gpx tracks

src/map/GpxPolyline/index.tsx

@@ -14,8 +14,9 @@ const GpxPolyline: FC<IProps> = ({ latlngs, color }) => {
     const item = new Polyline([], {
       color,
       stroke: true,
-      opacity: 0.4,
+      opacity: 1,
       weight: 9,
+      dashArray: [12,12],
     }).addTo(MainMap);
     setLayer(item);
 

src/redux/editor/sagas.ts

@@ -118,6 +118,7 @@ function* getRenderData() {
   yield put(editorSetRenderer({ info: 'Загрузка тайлов', progress: 0.1 }));
 
   const { route, stickers, provider }: ReturnType<typeof selectMap> = yield select(selectMap);
+  const gpx: ReturnType<typeof selectEditorGpx> = yield select(selectEditorGpx);
   const { distance }: ReturnType<typeof selectEditor> = yield select(selectEditor);
 
   const canvas = <HTMLCanvasElement>document.getElementById('renderer');
@@ -137,6 +138,20 @@ function* getRenderData() {
 
   yield composeImages({ geometry, images, ctx });
   yield composePoly({ points, ctx });
+
+  gpx.list.forEach(item => {
+    if (!gpx.enabled || !item.enabled || !item.latlngs.length) return;
+
+    composePoly({
+      points: getPolyPlacement(item.latlngs),
+      ctx,
+      color: item.color,
+      opacity: 0.5,
+      weight: 9,
+      dash: [12, 12],
+    });
+  });
+
   yield composeArrows({ points, ctx });
   yield composeDistMark({ ctx, points, distance });
   yield composeStickers({ stickers: sticker_points, ctx });

src/utils/dom.ts

@@ -10,5 +10,5 @@ export const getStyle = (oElm: any, strCssRule: string): string => {
 
 
 export const getRandomColor = () => {
-  return `hsl(${(Math.floor(Math.random() * 360))}, 100%, 50%)`
+  return `hsla(${(Math.floor(Math.random() * 360))}, 100%, 50%, 0.4)`
 }

src/utils/renderer.ts

@@ -170,9 +170,16 @@ export const composeImages = ({
 export const composePoly = ({
   points,
   ctx,
+  color = 'gradient',
+  weight = CLIENT.STROKE_WIDTH,
+  dash = null,
 }: {
   points: Point[];
   ctx: CanvasRenderingContext2D;
+  color?: string;
+  opacity?: number;
+  weight?: number;
+  dash?: number[];
 }): void => {
   if (points.length === 0) return;
 
@@ -181,10 +188,9 @@ export const composePoly = ({
   let minY = points[0].y;
   let maxY = points[0].y;
 
-  ctx.strokeStyle = 'red';
   ctx.lineCap = 'round';
   ctx.lineJoin = 'round';
-  ctx.lineWidth = CLIENT.STROKE_WIDTH + 0.5;
+  ctx.lineWidth = weight + 0.5;
 
   ctx.beginPath();
   ctx.moveTo(points[0].x, points[0].y);
@@ -199,11 +205,21 @@ export const composePoly = ({
     if (points[i].y > maxY) maxY = points[i].y;
   }
 
+  if (color === 'gradient') {
+
     const gradient = ctx.createLinearGradient(minX, minY, minX, maxY);
     gradient.addColorStop(0, COLORS.PATH_COLOR[0]);
     gradient.addColorStop(1, COLORS.PATH_COLOR[1]);
     
     ctx.strokeStyle = gradient;
+  } else {
+    ctx.strokeStyle = color;
+  }
+
+  if (dash) {
+    ctx.setLineDash([12,12]);
+  }
+  
   ctx.stroke();
   ctx.closePath();
 };