<template>
  <div style="width: 100%; height: 100%" id="mapContainer" v-loading="loading"> </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Map, View } from 'ol';
  import { defaults as Control } from 'ol/control';
  import { defaults as Interaction } from 'ol/interaction';
  import TileLayer from 'ol/layer/Tile';
  import XYZ from 'ol/source/XYZ';
  import { tiandituVecUrl, tiandituBillboardUrl, tiandituKey, mapCenter } from './config';
  import mitter from './common/utils/mitter';

  const map = ref(null) as any;
  const loading = ref<Boolean>(true);
  // const emit = defineEmits(['mapReady']);
  // let currentInstance = '' as any;
  /**
   * 加载天地图,默认天地图矢量图+注记图为底图
   */
  function initMap() {
    map.value = new Map({
      target: 'mapContainer',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: tiandituVecUrl + '&tk=' + tiandituKey,
          }),
          zIndex: -1,
        }),
        // 底图文字
        new TileLayer({
          source: new XYZ({
            url: tiandituBillboardUrl + '&tk=' + tiandituKey,
          }),
          zIndex: -1,
        }),
      ],
      interactions: Interaction({
        doubleClickZoom: false, // 屏蔽双击放大事件
      }),
      controls: Control({
        attribution: false,
        zoom: false,
        rotate: false,
      }), // 隐藏默认的控制器
      view: new View({
        zoom: 12,
        center: mapCenter,
        projection: 'EPSG:4326',
        maxZoom: 21,
        minZoom: 6,
      }),
    });
    mitter.emit('mapReady', map.value);
    loading.value = false;
  }

  onMounted(() => {
    initMap();
  });
</script>
<style></style>
