37 lines
920 B
Vue
37 lines
920 B
Vue
<template>
|
|
<mgl-geo-json-source source-id="lines" :data="line">
|
|
<mgl-line-layer layer-id="line" :paint="paint" :layout="layout" />
|
|
</mgl-geo-json-source>
|
|
<mgl-geo-json-source source-id="lines_border" :data="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, LineString, MultiLineString } from "geojson";
|
|
|
|
const { line } = defineProps<{
|
|
line: Feature<MultiLineString | LineString, LineProperties>;
|
|
}>();
|
|
|
|
const paint = computed(() => ({
|
|
"line-color": "#" + line.properties?.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>
|