<template>
  <div class="w-full" style="height:100%;">

    <MapboxMaps
      :layers="layers"
      :location="location"
      @handlerDrawComplete="handlerDrawComplete"
      ref="MapboxComponent"
    />

  </div>
</template>
<script lang="ts" setup>


  import MapboxMaps from '@/components/MapboxMaps/MapboxMap.vue';
  // import MapboxMaps from '@/components/MapboxMaps/MapComponent.vue';
  import {ref,reactive} from 'vue';
  import { DrawingType } from '@/enums/mapEnum';


  const mapOptions = {
    center: [118.556717,35.80391],
    zoom: 8,
  };

  // 展示的图层列表
  const layers = reactive([])

  // 图层定位数据
  const location = reactive([118.556717,35.80391])

  // 图层绘制类型 
  const type = ref('add')

  // 图斑数据
  // const feature ="LINESTRING (118.55483239594203 35.81329409678203, 118.54889167836416 35.806406839795216, 118.55647247134772 35.80285975465173, 118.56157492816281 35.803303140294986)"
  
  //  const feature = "POLYGON ((118.54774514802972 35.80786133598188, 118.54515277045988 35.79816597053564, 118.55919536113471 35.80085134034624, 118.56021460056033 35.80462789316549, 118.5595188628206 35.80695604583504, 118.5580066425723 35.80815336506183, 118.54774514802972 35.80786133598188))"

let drawFeatures = [
  {
    "columnName": "mapgeom",
    "value": "MULTIPOLYGON (((118.55901684631719 35.8045110934671, 118.55946931550466 35.80449259041045, 118.55946551324392 35.80463444717644, 118.559024450841 35.80464061486234, 118.55901684631719 35.8045110934671)))"
  }, {
    "columnName": "mapgeom",
    "value": "POLYGON ((118.5591119028685 35.804344565958516, 118.5594579087177 35.804344565958516, 118.55945410645693 35.80424279914757, 118.55910049608158 35.80423663146167, 118.5591119028685 35.804344565958516))"
  },  {
    "columnName": "mapgeom",
    "value": "POLYGON ((118.55922520818172 35.8049069756666, 118.5594647506927 35.80490080800186, 118.55945714616884 35.80477128705068, 118.55921380139475 35.804783622380114, 118.55922520818172 35.8049069756666))"
  }
];

    // 绘图完成返回geom
  const handlerDrawComplete = (geom)=>{
    console.log("绘制完成返回的图斑",geom);
  }

  // 地图组件
  const MapboxComponent = ref()

  // 添加 或者 编辑图斑
  // setTimeout(function(){
  //   // 添加图斑
  //   // MapboxComponent.value.handlerDraw()
  //   // 编辑图斑
  //   MapboxComponent.value.handlerDraw(drawFeatures)
  // },3000)

  


  // setTimeout(function(){
  //   // MapboxComponent.value.handlerDraw()
  // },6000)

  // 图斑定位
  // setTimeout(function(){
  //   MapboxComponent.value.handlerLocation([118.556717,35.80391]);
  // },6000)

  



  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>
