<template>
  <div class="w-full" style="height: 100%">
    <MapboxMaps
      :mapOptions="mapOptions"
      :control="mapDrawControl"
      @map-on-load="mapOnLoad"
      @map-draw="handlerMapDraw"
    />
  </div>
</template>
<script lang="ts" setup>
  import MapboxMaps from '@/components/MapboxMaps/index.vue';
  import { DrawingType } from '@/enums/mapEnum';

  const mapOptions = {
    center: [116.404, 39.905],
    zoom: 8,
  };
  const mapDrawControl: DrawingType[] = [DrawingType.Polygon, DrawingType.Line];
  const mapOnLoad = (map) => {
    // map 对象
    console.log('map::: ', map);
    // mapU封装对象
    console.log('map.U::: ', map.U);
    // 测试地址
    const testSource =
      'http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/TEST_WORK_SPACE%3Alindi@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
    // 添加矢量瓦片图层
    map.U.addVector('sourceId', testSource).addLineLayer('layerId', {
      source: 'sourceId',
      'source-layer': 'lindi', // source-layer对应数据库的表名
    });
  };
  //地图绘制的回调
  const handlerMapDraw = (type: string, data: any) => {
    console.log('data::: ', data);
    console.log('type::: ', type);
  };
</script>
