<template>
  <div :id="mapContainerName" class="map-container" />
</template>
<script lang="ts" setup>
  import { ref, watch, onMounted, defineExpose, defineEmits } from 'vue';
  import { generateUUID } from '@/components/MapboxMaps/src/tool';
  import { WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
  import mapboxgl, { Map, Popup } from 'mapbox-gl';
  import { getGeomData } from '@/api/demo/system';
  import { MAPBOX_TOKEN, TINADITU_TOKEN, defaultPaint, geoserverCodeValue } from './clound.data';
  import { getAppEnvConfig } from '@/utils/env';
  import axios from 'axios';

  const { VITE_GLOB_YINGXIANG_SERVER } = getAppEnvConfig();
  const { VITE_GLOB_API_URL } = getAppEnvConfig();
  const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL);
  const mapContainerName = ref<String>();
  mapContainerName.value = 'mapContainer-' + generateUUID();

  const emits = defineEmits(['handleOpenImage', 'getDetailByFeature']);

  let map: Map;

  // init map
  const initMap = () => {
    return new mapboxgl.Map({
      container: mapContainerName.value,
      language: 'zh-cmn',
      projection: 'equirectangular', // wgs84参考系
      style: {
        glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
        version: 8,
        sources: {
          'raster-tiles': {
            type: 'raster',
            tiles: [
              `http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
            ],
            tileSize: 256,
          },
          'raster-tiles-font': {
            type: 'raster',
            tiles: [
              `https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
            ],
            tileSize: 256,
          },
        },
        layers: [
          {
            id: 'tdt-vec-tiles',
            type: 'raster',
            source: 'raster-tiles-font',
            maxZoom: 32,
          },
          {
            id: 'tdt-img-tiles',
            type: 'raster',
            source: 'raster-tiles',
            maxZoom: 32,
          },
        ],
      },
      maxZoom: 22,
      minZoom: 5,
      zoom: 7.8,
      pitch: 0,
      center: [118.184425, 35.270654],
    });
  };

  // 地图定位
  function handlerLocation(lngLat, zoom) {
    map.flyTo({
      center: lngLat,
      zoom: zoom,
      bearing: 0,
      speed: 1,
      curve: 2,
      essential: true,
      easing(t) {
        return t;
      },
    });
  }

  // 获取县区边界数据
  const handlerDealCountry = (layerName): void => {
    let filterName = '';
    axios({
      method: 'get',
      url: `http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=xzqmc%20like%20%27%25${filterName}%25%27`,
    }).then((res) => {
      handlerLoadCountyLayer(res.data, layerName);
    });
  };
  // 渲染县区边界数据
  const handlerLoadCountyLayer = (geojson, layerName) => {
    // 绘制线
    if (map.getSource('countySource')) {
      map.getSource('countySource').setData(geojson);
    } else {
      map.addSource('countySource', {
        type: 'geojson',
        data: geojson,
      });
      map.addLayer({
        id: 'countyLayer',
        type: 'line',
        source: 'countySource',
        paint: {
          'line-color': '#6f7ff4', // 设置线的颜色
          'line-width': 3, // 设置线的宽度
        },
      });
    }
    if (layerName && map.getLayer(layerName)) {
      map.moveLayer(layerName, '');
      if (layerName == 'AchievementManagerRaster') {
        if (map.getLayer('clusters')) {
          map.moveLayer('AchievementManagerRaster', 'clusters');
        }
        if (map.getLayer('cluster-count')) {
          map.moveLayer('AchievementManagerRaster', 'cluster-count');
        }
      }
    }
  };

  // 获取乡镇数据
  const handlerDealStreet = (layerName): void => {
    axios({
      method: 'get',
      url: `http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Azhenjie&maxFeatures=10000&outputFormat=application%2Fjson`,
    }).then((res) => {
      handlerLoadStreetLayer(res.data, layerName);
    });
  };
  // 渲染乡镇边界数据
  const handlerLoadStreetLayer = (geojson, layerName) => {
    // 绘制线
    if (map.getSource('streetSource')) {
      map.getSource('streetSource').setData(geojson);
    } else {
      map.addSource('streetSource', {
        type: 'geojson',
        data: geojson,
        minzoom: 10,
        maxzoom: 24,
      });
      map.addLayer({
        id: 'streetLayer',
        type: 'line',
        source: 'streetSource',
        paint: {
          'line-color': '#42befb', // 设置线的颜色
          'line-width': 2, // 设置线的宽度
        },
        minzoom: 10,
        maxzoom: 24,
      });
      map.addLayer({
        id: 'streetLabelLayer',
        type: 'symbol',
        source: 'streetSource',
        layout: {
          'text-field': ['get', 'xzqmc'],
          'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
          'text-size': ['interpolate', ['linear'], ['zoom'], 10, 0, 10.1, 12],
          'text-anchor': 'center',
        },
        paint: {
          'text-color': '#041B36',
          'text-halo-color': '#fff',
          'text-halo-width': 2,
        },
      });
      if (map.getLayer('countyLayer')) {
        map.moveLayer('streetLayer', 'countyLayer');
      }

      if (layerName && map.getLayer(layerName)) {
        if (layerName == 'AchievementManagerRaster') {
          if (map.getLayer('clusters')) {
            map.moveLayer('AchievementManagerRaster', 'clusters');
          }
          if (map.getLayer('cluster-count')) {
            map.moveLayer('AchievementManagerRaster', 'cluster-count');
          }
        } else {
          map.moveLayer(layerName, '');
        }
      }
    }
  };

  // 图层管理-图层
  function GeoserverManagementRaster(chooseRows, lngLat, zoom, isMove, fillOpacity = 1) {
    // console.log(chooseRows);
    if (isMove) {
      handlerLocation(lngLat, zoom);
    }
    // 将映射数组转换为 match 表达式的输入
    const matchInput = geoserverCodeValue.flatMap(({ code, value }) => [code, value]);

    chooseRows?.forEach((chooseRow) => {
      map.addSource(chooseRow.dataTable, {
        type: 'vector',
        tiles: [
          VITE_GLOB_API_URL_VAR.value +
            '/api/ShpGeoLayer/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=' +
            chooseRow.dataTable +
            '&field=id,dlbm,',
        ],
        minzoom: parseInt(1),
        maxzoom: parseInt(18),
      });

      // console.log(chooseRow);

      if (chooseRow.serverName == '耕地') {
        // 加载图像
        const img = new Image();
        img.src = '/geoserver/耕地.png';
        img.onload = function () {
          // 添加图像资源
          map.addImage('diagonal-stripe', img, { pixelRatio: 4 });
          // 创建带有斜线填充的多边形图层
          map.addLayer({
            id: chooseRow.dataTable,
            type: 'fill',
            source: chooseRow.dataTable,
            'source-layer': chooseRow.dataTable,
            paint: {
              'fill-pattern': 'diagonal-stripe',
            },
          });
        };
        // } else if (chooseRow.serverName == '基本农田') {
        //   // 加载图像
        //   const img = new Image();
        //   img.src = '/geoserver/基本农田_2.png';
        //   img.onload = function () {
        //     // 添加图像资源
        //     map.addImage('diagonal-stripe', img, { pixelRatio: 2 });
        //     // 创建带有斜线填充的多边形图层
        //     map.addLayer({
        //       id: chooseRow.dataTable,
        //       type: 'fill',
        //       source: chooseRow.dataTable,
        //       'source-layer': chooseRow.dataTable,
        //       paint: {
        //         'fill-pattern': 'diagonal-stripe',
        //       },
        //     });
        //   };
      } else if (chooseRow.serverName == '农用地') {
        // 添加填充层
        map.addLayer({
          id: chooseRow.dataTable,
          type: 'fill',
          source: chooseRow.dataTable,
          'source-layer': chooseRow.dataTable,
          paint: {
            'fill-color': '#AAAAAA',
            'fill-width': 1,
            'fill-join': 'bevel',
            'fill-cap': 'square',
          },
        });
        // 添加多边形边框层
        map.addLayer({
          id: chooseRow.dataTable + '-outline',
          type: 'line',
          source: chooseRow.dataTable,
          'source-layer': chooseRow.dataTable,
          paint: {
            'line-color': '#000000',
            'line-width': 1,
          },
        });
      } else {
        // 添加填充层
        map.addLayer({
          id: chooseRow.dataTable,
          type: 'fill',
          source: chooseRow.dataTable,
          'source-layer': chooseRow.dataTable,
          paint: chooseRow.style ? JSON.parse(chooseRow.style) : {},
        });
        // 添加文本层
        map.addLayer({
          id: chooseRow.dataTable + '-text',
          type: 'symbol',
          source: chooseRow.dataTable,
          'source-layer': chooseRow.dataTable,
          layout: {
            'text-field': ['match', ['get', 'dlbm'], ...matchInput, ''],
            'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
            'text-size': ['interpolate', ['linear'], ['zoom'], 12, 0, 12.1, 12],
            // 'text-size': 12,
            'text-anchor': 'center',
            'symbol-placement': 'point',
            'text-allow-overlap': false,
            'text-padding': 20,
            'text-letter-spacing': 0.1,
            visibility: 'visible',
          },
          paint: {
            'text-color': '#ffffff', // 文本颜色
            'text-halo-color': '#000000', // 文本晕影颜色
            'text-halo-width': 1, // 文本晕影宽度
          },
        });
      }

      map.on('click', chooseRow.dataTable, function (e) {
        // 显示弹窗
        if (e.features.length > 0) {
          // 获取第一个（也是唯一的）被点击的特征
          const feature = e.features[0];
          // console.log(400, feature);
          emits('getDetailByFeature', feature);
        }
      });
      if (map.getLayer('streetLayer') && map.getLayer(chooseRow.dataTable)) {
        map.moveLayer(chooseRow.dataTable, 'streetLayer');
      }
    });
    // 透明度
    changeFillLayerOpacity('GeoserverManagementRaster', chooseRows, fillOpacity);
  }

  // 影像管理-图层
  const splitNum = 5;
  let chooseNowRowLayerName = '';
  function GeoTiffManagerRaster(chooseRows, lngLat, zoom, isMove, fillOpacity = 1) {
    // 清除图层
    if (isMove) {
      handlerLocation(lngLat, zoom);
    }
    chooseRows?.forEach((chooseRow, index) => {
      chooseNowRowLayerName = chooseRows[chooseRows.length - 1].layerName;
      if (
        6 <= chooseRow.layerName.length &&
        chooseRow.layerName.length <= 7 &&
        chooseRow.layerName.charAt(4) == '-'
      ) {
        // 总的缩略图
        let fourpoint = [
          [117.34046403513817, 36.263686454243626],
          [119.27763051149853, 36.263686454243626],
          [119.27763051149853, 34.331716698906675],
          [117.34046403513817, 34.331716698906675],
        ];
        map.addSource(chooseRow.layerName + '-image', {
          type: 'image',
          url: '/geoserver/group/1/' + chooseRow.layerName + '/' + chooseRow.layerName + '.png',
          coordinates: fourpoint,
        });
        map.addLayer({
          id: chooseRow.layerName + '-image',
          type: 'raster',
          source: chooseRow.layerName + '-image',
          minzoom: 0,
          maxzoom: 14,
        });
        if (map.getLayer('streetLayer')) {
          map.moveLayer(chooseRow.layerName + '-image', 'streetLayer');
        }
        // // 周数的
        // // 分割的缩略图（精度高些）
        // const LNG = (119.27763051149853 - 117.34046403513817) / splitNum;
        // const LAT = (36.263686454243626 - 34.331716698906675) / splitNum;
        // for (let x = 0; x < splitNum; x++) {
        //   for (let y = 0; y < splitNum; y++) {
        //     let fourpoint = [
        //       [Number(117.34046403513817 + x * LNG), Number(34.331716698906675 + (y + 1) * LAT)],
        //       [
        //         Number(117.34046403513817 + (x + 1) * LNG),
        //         Number(34.331716698906675 + (y + 1) * LAT),
        //       ],
        //       [Number(117.34046403513817 + (x + 1) * LNG), Number(34.331716698906675 + y * LAT)],
        //       [Number(117.34046403513817 + x * LNG), Number(34.331716698906675 + y * LAT)],
        //     ];
        //     map.addSource(chooseRow.layerName + '-image-' + x + '-' + y, {
        //       type: 'image',
        //       url: '/geoserver/group/5/' + chooseRow.layerName + '-' + x + '-' + y + '.png',
        //       coordinates: fourpoint,
        //     });
        //     map.addLayer({
        //       id: chooseRow.layerName + '-image-' + x + '-' + y,
        //       type: 'raster',
        //       source: chooseRow.layerName + '-image-' + x + '-' + y,
        //       minzoom: 10,
        //       maxzoom: 14,
        //     });
        //     if (map.getLayer('streetLayer')) {
        //       map.moveLayer(chooseRow.layerName + '-image-' + x + '-' + y, 'streetLayer');
        //     }
        //   }
        // }
      } else {
        const [minLon, minLat, maxLon, maxLat] = chooseRow.bbox
          .split(',')
          .map((coord) => parseFloat(coord));
        let fourpoint = [
          [minLon, maxLat],
          [maxLon, maxLat],
          [maxLon, minLat],
          [minLon, minLat],
        ];
        map.addSource(chooseRow.layerName + '-image', {
          type: 'image',
          url: '/geoserver/group/1/' + chooseRow.layerName + '/' + chooseRow.layerName + '.png',
          coordinates: fourpoint,
        });
        map.addLayer({
          id: chooseRow.layerName + '-image',
          type: 'raster',
          source: chooseRow.layerName + '-image',
        });
        if (map.getLayer('streetLayer')) {
          map.moveLayer(chooseRow.layerName + '-image', 'streetLayer');
        }
      }

      // geoserver
      let tiles: any = [];
      let titeUrl: any = null;
      if (new URL(VITE_GLOB_API_URL).hostname == 'localhost') {
        titeUrl =
          'http://localhost:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:';
      } else {
        titeUrl =
          'http://192.168.10.141:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:';
      }
      let tile =
        titeUrl +
        chooseRow.layerName +
        '&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857' +
        '&format=image/png&TRANSPARENT=TRUE';
      tiles.push(tile);
      map.addSource(chooseRow.layerName, {
        type: 'raster',
        tiles: tiles,
        tileSize: 256,
      });
      map.addLayer({
        id: chooseRow.layerName,
        type: 'raster',
        source: chooseRow.layerName,
        minzoom: 13,
      });
      if (map.getLayer('streetLayer')) {
        map.moveLayer(chooseRow.layerName, 'streetLayer');
      }
    });
    // 透明度
    changeFillLayerOpacity('GeoTiffManagerRaster', chooseRows, fillOpacity);
  }

  // 航飞图片-图层
  function AchievementManagerRaster(taskLayerGeoJson, lngLat, zoom, isMove) {
    // resize();
    // 清除图层
    // clearTaskLayer('AchievementManagerRaster');
    // 县区边界
    if (!map.getLayer('streetLayer')) {
      handlerDealStreet('AchievementManagerRaster');
    }
    if (!map.getLayer('countyLayer')) {
      handlerDealCountry('AchievementManagerRaster');
    }
    if (isMove) {
      handlerLocation(lngLat, zoom);
    }

    if (map.getSource('AchievementManagerRaster')) {
      map.getSource('AchievementManagerRaster').setData(taskLayerGeoJson);
    } else {
      // 聚合效果
      map.addSource('AchievementManagerRaster', {
        type: 'geojson',
        data: taskLayerGeoJson,
        cluster: true,
        clusterMaxZoom: 14,
        clusterRadius: 50,
      });
      map.addLayer({
        id: 'clusters',
        type: 'circle',
        source: 'AchievementManagerRaster',
        filter: ['all', ['has', 'point_count'], ['!=', 'point_count', 1]], // 只显示聚合点数量大于1的情况
        paint: {
          'circle-color': [
            'step',
            ['get', 'point_count'],
            '#51bbd6',
            100,
            '#f1f075',
            750,
            '#f28cb1',
          ],
          'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40],
        },
      });
      map.addLayer({
        id: 'cluster-count',
        type: 'symbol',
        source: 'AchievementManagerRaster',
        filter: ['all', ['has', 'point_count'], ['!=', 'point_count', 1]], // 只显示聚合点数量大于1的情况
        layout: {
          'text-field': ['get', 'point_count_abbreviated'],
          'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
          'text-size': 12,
        },
      });
      // 无人机图标
      map.loadImage('/videosupervision/uav-1.png', function (error, image) {
        if (error) throw error;
        if (!map.hasImage('taskIcon')) {
          map.addImage('taskIcon', image);
        }
      });
      map.addLayer({
        id: 'AchievementManagerRaster',
        type: 'symbol',
        source: 'AchievementManagerRaster',
        layout: {
          'icon-image': 'taskIcon',
          'icon-size': 0.8,
          // 'text-field': ['get', 'taskName'],
          'text-size': 10,
          'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
          'text-offset': [0, 1.8],
          'text-anchor': 'top',
          'icon-allow-overlap': false,
          'text-allow-overlap': false,
          visibility: 'visible',
        },
        paint: {
          'text-color': '#fff',
          'text-halo-color': '#000',
          'text-halo-width': 1,
        },
      });
      map.on('click', 'AchievementManagerRaster', (e) => {
        console.log(e);
        // 显示弹窗
        if (e.features.length > 0) {
          // 获取第一个（也是唯一的）被点击的特征
          const feature = e.features[0];
          // 从特征的属性中获取 'path' 值
          // const path = feature.properties.path;
          // console.log(400, feature.properties);
          emits('handleOpenImage', feature.properties);
        }
      });

      if (map.getLayer('AchievementManagerRaster')) {
        if (map.getLayer('clusters')) {
          map.moveLayer('AchievementManagerRaster', 'clusters');
        }
        if (map.getLayer('cluster-count')) {
          map.moveLayer('AchievementManagerRaster', 'cluster-count');
        }
      }
    }
  }

  // 清除图层
  function clearTaskLayer(layerName) {
    // 检查图层是否存在
    if (map.getLayer(layerName)) {
      // 删除图层
      map.removeLayer(layerName);
      if (layerName == 'AchievementManagerRaster') {
        if (map.getLayer('clusters')) {
          map.removeLayer('clusters');
        }
        if (map.getLayer('cluster-count')) {
          map.removeLayer('cluster-count');
        }
      }
      if (map.getLayer(layerName + '-text')) {
        map.removeLayer(layerName + '-text');
      }
      if (map.getLayer(layerName + '-outline')) {
        map.removeLayer(layerName + '-outline');
      }
    }
    // 检查数据源是否存在
    if (map.getSource(layerName)) {
      // 删除数据源
      map.removeSource(layerName);
    }
    // 检查图片是否存在
    if (map.hasImage('diagonal-stripe')) {
      // 删除图片
      map.removeImage('diagonal-stripe');
    }
    // 删除总的缩略图
    if (map.getLayer(layerName + '-image')) {
      map.removeLayer(layerName + '-image');
    }
    if (map.getSource(layerName + '-image')) {
      map.removeSource(layerName + '-image');
    }
    // 删除切割的缩略图
    for (let x = 0; x < splitNum; x++) {
      for (let y = 0; y < splitNum; y++) {
        if (map.getLayer(layerName + '-image-' + x + '-' + y)) {
          map.removeLayer(layerName + '-image-' + x + '-' + y);
        }
        if (map.getSource(layerName + '-image-' + x + '-' + y)) {
          map.removeSource(layerName + '-image-' + x + '-' + y);
        }
      }
    }
    // 地图拖动、缩放操作监听
    if (layerName == chooseNowRowLayerName) {
      chooseNowRowLayerName = '';
      alldata.forEach((data) => {
        if (map.getLayer('moveend' + data.number)) {
          map.removeLayer('moveend' + data.number);
        }
        if (map.getSource('moveend' + data.number)) {
          map.removeSource('moveend' + data.number);
        }
      });
    }
  }

  // 重新计算地图大小
  function resize() {
    map.resize();
  }

  // 动态调整透明度
  function changeFillLayerOpacity(layerType, filter, newOpacity) {
    if (layerType == 'GeoserverManagementRaster') {
      filter?.forEach((tuceng) => {
        if (!['耕地'].includes(tuceng.serverName)) {
          map.setPaintProperty(tuceng.dataTable, 'fill-opacity', parseFloat(newOpacity));
        }
      });
    }
    if (layerType == 'GeoTiffManagerRaster') {
      filter?.forEach((tuceng) => {
        if (map.getLayer(tuceng.layerName)) {
          map.setPaintProperty(tuceng.layerName, 'raster-opacity', parseFloat(newOpacity));
        }
        if (map.getLayer(tuceng.layerName + '-image')) {
          map.setPaintProperty(
            tuceng.layerName + '-image',
            'raster-opacity',
            parseFloat(newOpacity),
          );
        }
        for (let x = 0; x < splitNum; x++) {
          for (let y = 0; y < splitNum; y++) {
            if (map.getLayer(tuceng.layerName + '-image-' + x + '-' + y)) {
              map.setPaintProperty(
                tuceng.layerName + '-image-' + x + '-' + y,
                'raster-opacity',
                parseFloat(newOpacity),
              );
            }
          }
        }
      });
    }
  }

  let alldata: any = [];
  function getAllData() {
    const splitnum = 20;
    const LNG = (119.27763051149853 - 117.34046403513817) / splitnum;
    const LAT = (36.263686454243626 - 34.331716698906675) / splitnum;
    for (let x = 0; x < splitnum; x++) {
      for (let y = 0; y < splitnum; y++) {
        alldata.push({
          number: '-' + x + '-' + y,
          point: [
            Number(117.34046403513817 + x * LNG),
            Number(34.331716698906675 + y * LAT),
            Number(117.34046403513817 + (x + 1) * LNG),
            Number(34.331716698906675 + (y + 1) * LAT),
          ],
        });
      }
    }
  }

  onMounted(() => {
    getAllData();
    mapboxgl.accessToken = MAPBOX_TOKEN;
    map = initMap();
    // handlerLocation([118.30207505530701, 35.30123435040745], 7.848587811931849);
    map.on('load', () => {
      // 地图跳转
      // map.flyTo({
      //   center: [118.30207505530701, 35.30123435040745],
      //   zoom: 7.848587811931849,
      // });

      // 县区边界
      handlerDealStreet(null);
      handlerDealCountry(null);

      // map.on('click', function (e) {
      // const zoom = map.getZoom();
      // const bounds = map.getBounds();
      // const sw = bounds.getSouthWest(); // 西南角
      // const ne = bounds.getNorthEast(); // 东北角
      // console.log('zoom:', zoom);
      // console.log('bounds:', bounds);
      // console.log('西南角:', sw);
      // console.log('东北角:', ne);
      // console.log('坐标:', e.lngLat.lng, e.lngLat.lat);
      // });

      // 地图拖动、缩放操作监听
      map.on('moveend', function (e) {
        const zoom = map.getZoom();

        if (zoom > 12.5 && chooseNowRowLayerName != '') {
          const bounds = map.getBounds();
          const sw = bounds.getSouthWest(); // 西南角
          const ne = bounds.getNorthEast(); // 东北角

          if (
            6 <= chooseNowRowLayerName.length &&
            chooseNowRowLayerName.length <= 7 &&
            chooseNowRowLayerName.charAt(4) == '-'
          ) {
            let addLayers: any = [];

            // 筛选在地图展示部分的图片
            alldata.forEach((data) => {
              if (
                (((sw.lng <= data.point[0] && data.point[0] <= ne.lng) ||
                  (sw.lng <= data.point[2] && data.point[2] <= ne.lng)) &&
                  ((sw.lat <= data.point[1] && data.point[1] <= ne.lat) ||
                    (sw.lat <= data.point[3] && data.point[3] <= ne.lat))) ||
                (((data.point[0] <= sw.lng && sw.lng <= data.point[2]) ||
                  (data.point[0] <= ne.lng && ne.lng <= data.point[2])) &&
                  ((data.point[1] <= sw.lat && sw.lat <= data.point[3]) ||
                    (data.point[1] <= ne.lat && ne.lat <= data.point[3])))
              ) {
                addLayers.push(data);
              }
            });

            // 叠加图片图层资源
            addLayers?.forEach((add) => {
              let fourpoint = [
                [add.point[0], add.point[3]],
                [add.point[2], add.point[3]],
                [add.point[2], add.point[1]],
                [add.point[0], add.point[1]],
              ];
              if (!map.getSource('moveend' + add.number)) {
                map.addSource('moveend' + add.number, {
                  type: 'image',
                  url:
                    '/geoserver/group/30/' +
                    chooseNowRowLayerName +
                    +'/' +
                    chooseNowRowLayerName +
                    add.number +
                    '.png',
                  coordinates: fourpoint,
                });
              }
              if (!map.getLayer('moveend' + add.number)) {
                map.addLayer({
                  id: 'moveend' + add.number,
                  type: 'raster',
                  source: 'moveend' + add.number,
                });
                if (map.getLayer('streetLayer')) {
                  map.moveLayer('moveend' + add.number, 'streetLayer');
                }
                if (map.getLayer('streetLayer')) {
                  map.moveLayer('moveend' + add.number, chooseNowRowLayerName);
                }
              }
            });
          }
        }
      });
    });
  });

  // 抛出函数
  defineExpose({
    GeoserverManagementRaster,
    GeoTiffManagerRaster,
    AchievementManagerRaster,
    resize,
    clearTaskLayer,
    handlerLocation,
    changeFillLayerOpacity,
    handlerDealCountry,
    handlerDealStreet,
  });
</script>
<style type="less" scoped>
  .map-container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  ::v-deep .mapboxgl-ctrl-logo {
    display: none !important;
  }
</style>
