<template>
  <div class="mapDiv">
    <tdt-map ref="tdtMapRef" :center="state.center" :zoom="state.zoom" :style="{ height: mapHeight }">
      <!-- <tdt-tile-layer :layer-type="'img_w'"></tdt-tile-layer> -->
      <!-- <tdt-tile-layer :layer-type="'cia_w'" :z-index="2"></tdt-tile-layer> -->
      <tdt-tilelayer :url="state.img_w_url" :z-index="1"></tdt-tilelayer>
      <tdt-tilelayer :url="state.cia_w_url" :z-index="2"></tdt-tilelayer>
    </tdt-map>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue';
import { TdtMap, TdtTileLayer } from 'vue-tianditu';
import { map_config } from '@/config/map';

const key = map_config.tianditu.token;

const state = reactive({
  center: [100.088, 23.883],
  zoom: 14,
  img_w_url: `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key}`,
  cia_w_url: `http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key}`,
  // 添加其他地图层URL
  // ...
});

// 确保地图有明确的高度
const mapHeight = ref('100vh');

onMounted(() => {
  console.log('地图组件已挂载');
  // 检查天地图API是否加载成功
  if (window.T) {
    console.log('天地图API已加载:', window.T);
  } else {
    console.error('天地图API未加载');
  }
});
</script>

<style scoped>
.mapDiv {
  width: 100%;
  height: 100vh; /* 确保容器有明确高度 */
}
</style>
