diff --git a/ui/packages/tools/AiTMap.vue b/ui/packages/tools/AiTMap.vue index 29a9045d..9591fe80 100644 --- a/ui/packages/tools/AiTMap.vue +++ b/ui/packages/tools/AiTMap.vue @@ -1,6 +1,10 @@ @@ -33,7 +37,13 @@ export default { data() { return { tmap: null, - mapLib: null + mapLib: null, + mapType: 'vector' + } + }, + watch: { + mapType(type) { + this.tmap?.setBaseMap({type}) } }, computed: { @@ -142,8 +152,9 @@ export default { flex: 1; min-width: 0; min-height: 0; + position: relative; - :deep(.map ){ + :deep(.map ) { height: 100%; & > div > div { @@ -152,5 +163,72 @@ export default { } } } + + .mapLayerSwitcher { + position: absolute; + z-index: 202304061607; + bottom: 20px; + right: 12px; + background-color: #fff; + padding: 5px; + width: fit-content; + height: 56px; + box-sizing: content-box; + overflow: hidden; + transition: width 2s ease; + gap: 10px; + + &:hover { + .item { + display: block; + } + } + + .item { + position: relative; + width: 80px; + height: 56px; + border: 1px dashed #ddd; + cursor: pointer; + flex-shrink: 0; + background-image: url("https://cdn.cunwuyun.cn/map/defaultMap.png"); + box-sizing: border-box; + color: #fff; + background-size: 100%; + display: none; + + &.current { + border: 1px solid #366FFF; + display: block !important; + + &:before { + background-color: #366FFF; + } + } + + &:hover { + border-color: #333; + } + + &:before { + font-size: 12px; + line-height: 18px; + padding: 0 3px; + position: absolute; + bottom: 0; + right: 0; + content: "地图"; + user-select: none; + } + + &.satellite { + background-image: url("https://cdn.cunwuyun.cn/map/satelliteMap.png"); + + &:before { + content: "卫星" + } + } + } + } }