<template>
  <div class="map h-240 w-full">
    <div id="gdMap" class="w-full h-full"></div>
  </div>
</template>
<script setup>
  import { ref, onMounted, nextTick, watch } from 'vue';
  import 'leaflet/dist/leaflet.css';
  import * as L from 'leaflet';
  //   import 'leaflet.fullscreen/Control.FullScreen';
  //   import 'leaflet.fullscreen/Control.FullScreen.css';
  import 'leaflet-measure-path/leaflet-measure-path.css';
  import 'leaflet-measure-path/leaflet-measure-path.js';
  import 'leaflet.markercluster/dist/MarkerCluster.css';
  import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
  import 'leaflet.markercluster';
  import { useRouter } from 'vue-router';
  import { getScjdShp } from '/@/api/common/api';
  // 引入jsts
  import WKTReader from 'jsts/org/locationtech/jts/io/WKTReader';
  import RelateOp from 'jsts/org/locationtech/jts/operation/relate/RelateOp';
  import BufferOp from 'jsts/org/locationtech/jts/operation/buffer/BufferOp';
  import WKTWriter from 'jsts/org/locationtech/jts/io/WKTWriter';
  import positionIcon from '@/assets/images/position.png'

  import proj4 from 'proj4';

  let router = useRouter(); // 注册路由
  const params = ref(router.currentRoute.value.query);
  const props = defineProps({
    data: {
      type: Object,
      default: {},
    },
  });
  onMounted(async () => {
    await nextTick();
    initMap();
  });

  const mapgd = ref('');
  const content = ref(null);
  const show = ref(false);
  const geojsonLayer = ref([]);
  const layerGroups = ref();
  const markerClusterLayer = ref();
  const open = ref(true);

  async function initMap() {
    // 23.125178, 113.280637
    await nextTick();
    if (mapgd.value) {
      return
    }
    mapgd.value = L.map('gdMap', {
      center: [23.125178, 113.280637],
      zoom: 12,
      zoomControl: true,
      attributionControl: false,
      crs: L.CRS.EPSG4326, // 默认3857
      fullscreenControl: true,
      maxZoom: 17,
    });
    console.log(mapgd.value, 'mapgd.value ');
    //定义一个比例尺控件
    let scale = L.control.scale();
    scale.addTo(mapgd.value);

    // 这个 比例尺的
    scale.getContainer().childNodes[0].style.cssText =
      'margin-bottom:-4px;color:#FFF;text-shadow:none;border:2px solid #FFF;background:none;border-top:0px;';

    scale.getContainer().childNodes[1].hidden = true;

    // // 经纬度投影
    const IMG_C =
      'https://t1.tianditu.gov.cn/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=3cf92df1e46b9a576fa8d3f427030886';
    const CIA_C =
      'https://t1.tianditu.gov.cn/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=3cf92df1e46b9a576fa8d3f427030886';
    // 天地图注记
    const zj =
      'https://t1.tianditu.gov.cn/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=3cf92df1e46b9a576fa8d3f427030886';

    var myLayer1 = L.tileLayer(IMG_C, {
      zoomOffset: 1, // 经纬度投影打开
      maxZoom: 17,
      tileSize: 256,
    }).addTo(mapgd.value);

    var myLayer2 = L.tileLayer(CIA_C, {
      zoomOffset: 1, // 经纬度投影打开
      maxZoom: 17,
      tileSize: 256,
    }).addTo(mapgd.value);
  }

  async function position(data) {
    console.log(data,'拐点数据')
    if (geojsonLayer.value) {
      geojsonLayer.value.forEach((item) => {
        mapgd.value.removeLayer(item);
      });
    }
    let geojsonLayers = [];

    data?.forEach((jsons) => {
      let geojsons = L.geoJSON(jsons, {
        // style: { color: '#00C9D8', weight: 5, fillOpacity: 0 },
        pointToLayer: function (geoJsonPoint, latlng) {
          return L.marker(latlng, {
            icon: new L.Icon({
              iconUrl: positionIcon,
              iconSize: [40, 40],
            }),
          });
        }, 
      }).addTo(mapgd.value);

      geojsonLayers.push(geojsons);
    });
    // 重新设置视图中心点
    if (data.length > 0) {
      const jwd = data[0].coordinates;
     mapgd.value.flyTo([jwd[1],jwd[0]], 17);
    }
  }

  function clearMarker() {
    if (layerGroups.value) {
      layerGroups.value.clearLayers();
    }
  }
  
  watch(
    () => props.data,
    async (val) => {
      await nextTick();
      setTimeout(()=>{
        position(val);
      },500)
      
    },
    { deep: true, immediate: true }
  );

</script>
<style lang="less" scoped></style>
