<template>
|
<mars-dialog title="底图" :width="380" :position="{top: 'auto', bottom:50, left: 50 }">
|
<ul class="basemap">
|
<li v-for="(item, i) in baseMaps" :key="i" class="basemap-card" :class="{ 'active-card': active === item.uuid }" @click="changeBaseMaps(item)">
|
<div><img class="icon" :src="`${item.options.icon || 'img/basemaps/bingAerial.png'}`" /></div>
|
<div>{{ item.name }}</div>
|
</li>
|
</ul>
|
<template #footer>
|
<mars-switch v-model:checked="chkHasTerrain" @change="changeTerrain" />
|
<span class="f-ml">显示地形</span>
|
</template>
|
</mars-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, markRaw, onMounted } from "vue"
|
import useLifecycle from "@mars/widgets/common/uses/use-lifecycle"
|
import * as mapWork from "./map"
|
|
// 启用map.ts生命周期
|
useLifecycle(mapWork)
|
|
const baseMaps = ref<any[]>([])
|
const active = ref("")
|
const chkHasTerrain = ref(false)
|
|
onMounted(() => {
|
const layers = mapWork.getLayers()
|
initData(layers)
|
})
|
|
function initData(e: any) {
|
baseMaps.value = e.baseMaps.map((m: any) => {
|
if (m.isAdded && m.show) {
|
active.value = m.uuid
|
}
|
return {
|
name: m.name,
|
uuid: m.uuid,
|
options: markRaw(m.options)
|
}
|
})
|
|
chkHasTerrain.value = e.hasTerrain || false
|
}
|
|
function changeBaseMaps(item: any) {
|
mapWork.changeBaseMaps((active.value = item.uuid))
|
}
|
|
function changeTerrain() {
|
mapWork.changeTerrain(chkHasTerrain.value)
|
}
|
</script>
|
<style lang="less" scoped>
|
.basemap {
|
height: calc(100% - 40px);
|
}
|
.basemap-card {
|
display: inline-block;
|
width: 75px;
|
list-style-type: none;
|
margin-top: 10px;
|
margin-left: 10px;
|
float: left;
|
text-align: center;
|
cursor: pointer;
|
font-size: 12px;
|
color: #fff;
|
&:hover {
|
.active-card();
|
}
|
.icon {
|
border: 1px solid #4db3ff78;
|
width: 75px;
|
height: 70px;
|
padding: 1px;
|
}
|
}
|
|
.active-card {
|
color: #337fe5 !important;
|
.icon {
|
border-color: #337fe5;
|
}
|
}
|
</style>
|
