4dkankan-components/docs/examples/minmap/custom.vue

<script setup lang="ts">
import { onMounted, onUnmounted, provide, ref } from 'vue'
import { KkButton, KkIcon, KkMinmap } from 'kankan-components'

const loading = ref(false)
const mapShow = ref(false)
const minMap = ref(null)

onMounted(() => {
  const __win = window as any
  if (!__win.__sdk) {
    const __sdk = (__win.__sdk = new __win.KanKan({
      num: 'KJ-t-wOXfx2SDFy',
      server: '#DEMOSEVER#',
    }))
    provide('__sdk', __sdk)
    __sdk.Scene.on('ready', () => (loading.value = true))
    //sdk 改变主配色
    __sdk.use('MinMap', { theme: { camera_fillStyle: '#B8A965' } }).then(() => {
      mapShow.value = true
    })
    __sdk.mount('#scene').render()
  }
})
onUnmounted(() => {
  const __win = window as any
  if (__win.__sdk) {
    __win.__sdk = null
  }
})
</script>

<template>
  <div id="scene" class="scene">
    <div class="test-control">
      <kk-button @click="mapShow = true">打开小地图</kk-button>
      <kk-button type="primary" mr4 @click="() => (mapShow = false)"
        >关闭小地图</kk-button
      >
    </div>

    <Teleport v-if="loading" to=".kankan-plugins">
      <kk-minmap ref="minMap" :show="mapShow">
        自定义：<kk-icon type="updown" />
      </kk-minmap>
    </Teleport>
  </div>
</template>
<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.scene {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}
.test-control {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.kk-minmap[xui_min_map] {
  right: 20px;
  top: 20px;
  left: initial;
  width: 102px;
  height: 100px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.kk-minmap__container {
  color: #fff;
  margin-top: 98%;
  font-size: 10px;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>