<template>
  <!-- 长效考核-合流制溢流污染治理 -->
  <div class="projectiongMap">
    <!-- gis地图 -->
    <MapBox :initJson="`/static/libs/mapbox/style/overflowBlack.json`" @map-click="mapClick"></MapBox>
  </div>
</template>
<script setup>
import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
import axios from 'axios';
import { nextTick, onBeforeUnmount } from 'vue';
const emit = defineEmits(['getProjectArea']);
const heighLightArea = ref({});
//添加管控分区三级
const addGuanKongLayer = () => {
  !!!newfiberMapbox.map.getSource('guanKongArea') &&
    newfiberMapbox.map.addSource('guanKongArea', {
      type: 'raster',
      tiles: [
        '/geoserver/xiaoganMapServer/wms?service=WMS&version=1.1.0&request=GetMap&layers=xiaoganMapServer:GKFQ3&styles=&bbox={bbox-epsg-3857}&width=768&height=556&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE',
      ],
      tileSize: 768,
    });
  !!!newfiberMapbox.map.getLayer('guanKongArea') &&
    newfiberMapbox.map.addLayer({
      id: 'guanKongArea',
      type: 'raster',
      source: 'guanKongArea',
      paint: {
        'raster-opacity': 0.8,
      },
    });
};
//地图点击事件
const mapClickWMS = () => {
  newfiberMapbox.map.on('click', function (e) {
    const { lng, lat } = e.lngLat;
    const radius = Math.pow(2, 22 - newfiberMapbox.map.getZoom());
    const pointM = turf.toMercator(turf.point([lng, lat]));
    const pointC = pointM.geometry.coordinates;
    const bbox = [pointC[0] - radius, pointC[1] - radius, pointC[0] + radius, pointC[1] + radius];
    const url =
      '/geoserver/xiaoganMapServer/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=GKFQ3&STYLES&LAYERS=GKFQ3&exceptions=application%2Fvnd.ogc.se_inimage&INFO_FORMAT=application/json&FEATURE_COUNT=50&X=50&Y=50&SRS=EPSG%3A3857&WIDTH=101&HEIGHT=101&BBOX=' +
      bbox.join();
    axios.get(url).then(function (res) {
      let selectedAreaJson = res.data;
      heighLightArea.value = turf.toWgs84(selectedAreaJson.features[0].geometry);
      mapSelectedHeighLight(heighLightArea.value);
      emit('getProjectArea', {
        projectionAreaName: selectedAreaJson.features[0].properties.name,
      });
    });
  });
};
//地图选中高亮
const mapSelectedHeighLight = geometry => {
  console.log('heighLightAreaLayer.value', geometry);
  let poylgonToLine = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'LineString',
          coordinates: geometry.coordinates[0][0],
        },
      },
    ],
  };
  if (!!newfiberMapbox.map.getLayer('heighLightAreaLayer')) {
    console.log(poylgonToLine);
    newfiberMapbox.map.getSource('heighLightAreaLayer').setData(poylgonToLine);
  } else {
    newfiberMapbox.map.addSource('heighLightAreaLayer', { type: 'geojson', data: poylgonToLine });
    newfiberMapbox.map.addLayer({
      id: 'heighLightAreaLayer',
      source: 'heighLightAreaLayer',
      type: 'line',
      paint: {
        'line-color': 'red',
        'line-width': 8,
      },
    });
  }
};
let interval = null;
onMounted(() => {
  interval = setInterval(() => {
    if (!!!newfiberMapbox) {
      return;
    } else {
      addGuanKongLayer();
      mapClickWMS();
      clearInterval(interval);
    }
  }, 1000);
});
onBeforeUnmount(() => {
  if (interval) {
    clearInterval(interval);
  }
});
</script>
<style lang="scss">
@import '@/assets/styles/variables.module.scss';
.projectiongMap {
  width: 100%;
  height: 600px;
  overflow: hidden;
  position: relative;
}
</style>