chfore: split map into components

2026-07-05 11:27:59 +02:00
parent df977558fa
commit 6fa15f2ef3
5 changed files with 289 additions and 165 deletions
@@ -0,0 +1,36 @@
+<template>
+    <mgl-geo-json-source source-id="lines" :data="routeWithLine.line">
+        <mgl-line-layer layer-id="line" :paint="paint" :layout="layout" />
+    </mgl-geo-json-source>
+    <mgl-geo-json-source source-id="lines_border" :data="routeWithLine.line">
+        <mgl-line-layer
+            layer-id="line_border"
+            :paint="offset_paint"
+            :layout="layout"
+        />
+    </mgl-geo-json-source>
+</template>
+
+<script setup lang="ts">
+import type { Feature, MultiLineString } from "geojson";
+
+const { routeWithLine } = defineProps<{
+    routeWithLine: { route: Route; line: Feature<MultiLineString> };
+}>();
+
+const paint = computed(() => ({
+    "line-color": "#" + routeWithLine.route.color,
+    "line-width": 4,
+}));
+
+const layout = {
+    "line-join": "round",
+    "line-cap": "round",
+};
+
+const offset_paint = computed(() => ({
+    "line-color": "#000000",
+    "line-width": 2,
+    "line-gap-width": 2,
+}));
+</script>