56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import type { StyleSpecification } from "maplibre-gl";
|
|
|
|
const { mapStyle } = defineProps<{
|
|
mapStyle: StyleSpecification & { id: string };
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "update:mapStyle", mapStyle: StyleSpecification & { id: string }): void;
|
|
}>();
|
|
|
|
const updateMapStyle = (mapStyle: StyleSpecification & { id: string }) => {
|
|
emit("update:mapStyle", mapStyle);
|
|
};
|
|
|
|
const sources = computed(() => {
|
|
return mapStyle.sources;
|
|
});
|
|
|
|
const layers = computed(() => {
|
|
return mapStyle.layers;
|
|
});
|
|
|
|
const glyphs = computed(() => {
|
|
return mapStyle.glyphs;
|
|
});
|
|
|
|
const sprite = computed(() => {
|
|
return mapStyle.sprite;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col">
|
|
<div v-for="(source, name) in sources" class="flex flex-col">
|
|
<h4>{{ name.toString() }}-{{ source.type }}</h4>
|
|
<div class="flex flex-col" v-for="(value, key) in source">
|
|
<div class="flex">
|
|
<h6>{{ key }}:</h6>
|
|
<p>{{ value }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div v-for="(layer, name) in layers" class="flex flex-col">
|
|
<h4>{{ name.toString() }}-{{ layer.type }}</h4>
|
|
<div class="flex flex-col" v-for="(value, key) in layer">
|
|
<div class="flex">
|
|
<h6>{{ key }}:</h6>
|
|
<p>{{ value }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|