55 lines
1.3 KiB
Vue
55 lines
1.3 KiB
Vue
<template>
|
|
<q-page class="flex flex-center">
|
|
<mapbox-map :accessToken="accessToken" mapStyle="light-v10" height="500px">
|
|
<mapbox-geogeometry-raw :source="myGeoJSON">
|
|
<mapbox-geogeometry-line />
|
|
</mapbox-geogeometry-raw>
|
|
</mapbox-map>
|
|
</q-page>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent } from "vue";
|
|
import {
|
|
MapboxMap,
|
|
MapboxGeogeometryRaw,
|
|
MapboxGeogeometryLine,
|
|
} from "vue-mapbox-ts";
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
MapboxMap,
|
|
MapboxGeogeometryRaw,
|
|
MapboxGeogeometryLine,
|
|
},
|
|
setup() {
|
|
return {
|
|
accessToken:
|
|
"pk.eyJ1Ijoicm9ic29ubSIsImEiOiJjbDBtZHg5cmIwNWJ6M2NwYTZ2cGhsOHlnIn0.Ks3J5AWTbFfaBPXq5qoOmA",
|
|
myGeoJSON: {
|
|
type: "FeatureCollection",
|
|
features: [
|
|
{
|
|
type: "Feature",
|
|
properties: {
|
|
stroke: "#545454",
|
|
"stroke-width": 9.6,
|
|
"stroke-opacity": 1,
|
|
},
|
|
geometry: {
|
|
type: "LineString",
|
|
coordinates: [
|
|
[40.078125, 56.559482483762245],
|
|
[25.3125, 31.353636941500987],
|
|
[-10.546875, 45.089035564831036],
|
|
[-8.4375, 56.75272287205736],
|
|
],
|
|
},
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
});
|
|
</script>
|