CaiYuanYiTiHua/src/views/sys/exception/Converge/index.vue

<template>
  <div :id="mapContainerName" class="map-container">
    <div class="search-container-box">
      <SearchComponent
        @toPosition="toPosition"
        @handlerFilter="handlerFilter"
        :layerSettings="layerSettings"
      ></SearchComponent>
    </div>
    <div class="map-type-switch-container">
      <div class="switch-button" v-if="mapAngle == '3D'" @click="handlerChangeMapAngle()">
        <TableOutlined style="font-size: 20px; position: relative; top: 1px; left: -6px" />
        <span>&nbsp;二维地图</span>
      </div>

      <div class="switch-button" v-else @click="handlerChangeMapAngle()">
        <GlobalOutlined style="font-size: 20px; position: relative; top: 1px; left: -6px" />
        <span>&nbsp;三维地图</span>
      </div>

      <div class="home-button" @click="handlerInitialize">
        <HomeOutlined />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, defineExpose, defineEmits, defineProps, watch } from 'vue';
  import { generateUUID } from '@/components/MapboxMaps/src/tool';
  import { WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
  import mapboxgl, { Map, Popup } from 'mapbox-gl';
  import { MAPBOX_TOKEN, TINADITU_TOKEN, MAP_VIEWER } from './config.ts';
  import heatGeoJson from './data.json';
  import { getPolygonCenter, getUserOrgs,getNetworkType } from '@/api/tiankongdi';
  import axios from 'axios';
  import SearchComponent from './SearchComponent.vue';
  import { getAppEnvConfig } from '@/utils/env';
  const { VITE_GLOB_API_URL,VITE_GLOB_LAN_API_URL } = getAppEnvConfig();
  const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL);
  import { waiData } from '../LargeScreenMap/linyishi';
  const mapContainerName = ref<String>();
  mapContainerName.value = 'mapContainer-' + generateUUID();
  const { VITE_GLOB_YINGXIANG_SERVER, VITE_GLOB_YAOGANYINGXIANG_SERVER } = getAppEnvConfig();

  const networkType = ref("WAN");

  
  //
  import { TableOutlined, GlobalOutlined, HomeOutlined } from '@ant-design/icons-vue';

  // 图层控制 历史影像
  import { message, Modal } from 'ant-design-vue';
  import U from 'mapbox-gl-utils';
  import { MP } from './src/MP';
  import { GeojsonToWkt } from './src/WktGeojsonTransform';

  const emits = defineEmits([
    'onload',
    'handlerGetDetails',
    'showMonitor',
    'handlerQueryIntersectTif',
  ]);

  let isZoomVisible: any = false;
  let map: Map;
  let mp: any = null;
  const props = defineProps({
    layer: Object,
    defaultColor: String,
  });
  const layerSettings = ref<any>({});
  const layerDefaultColor = ref<String>();
  watch(
    () => props.layer,
    (val) => {
      layerSettings.value = val;
      layerDefaultColor.value = props.defaultColor;
    },
  );
  // init map
  const initMap = () => {
    return new mapboxgl.Map({
      container: mapContainerName.value,
      language: 'zh-cmn',
      projection: 'globe', // 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,
            minzoom: 1,
            maxzoom: 17,
          },
          '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,
          },
          yaogan: {
            type: 'raster',
            tiles: [VITE_GLOB_YAOGANYINGXIANG_SERVER],
            tileSize: 256,
            minzoom: 16,
            maxzoom: 24,
          },
          yingxiang: {
            type: 'raster',
            tiles: [VITE_GLOB_YINGXIANG_SERVER],
            tileSize: 256,
            minzoom: 16,
            maxzoom: 24,
          },
        },
        layers: [
          {
            id: 'tdt-vec-tiles',
            type: 'raster',
            source: 'raster-tiles-font',
            maxZoom: 32,
          },
          {
            id: 'tdt-img-tiles',
            type: 'raster',
            source: 'raster-tiles',
            maxZoom: 32,
          },
          {
            id: 'yaogan',
            type: 'raster',
            source: 'yaogan',
            layout: {
              visibility: networkType.value == 'LAN' ? 'visible' : 'none',
            },
            minzoom: 9,
            maxzoom: 15,
          },
          {
            id: 'yingxiang',
            type: 'raster',
            source: 'yingxiang',
            layout: {
              visibility: networkType.value == 'LAN' ? 'visible' : 'none',
            },
            minzoom: 13,
            maxzoom: 24,
          },
          // {
          //     id: 'tdt-wms-tiles',
          //     type: 'raster',
          //     source: 'raster-tiles-geo',
          // },
        ],
      },
      maxZoom: 22,
      minZoom: 8,
      zoom: 8,
      pitch: 0,
      center: [118.30207505530701, 35.30123435040745],
    });
  };

  // load map info 

  async function loadMapInfo(){
    try{
      await axios.get(VITE_GLOB_LAN_API_URL+"/api/DroneCloudQuery/IsPublic").then(res=>{
          if(res.data.result){
              networkType.value = "WAN";
            }else{
              networkType.value = "LAN";
            }
      })
    }catch(e){
      networkType.value = "WAN";
    }finally{
        map = initMap();

        map.on('load', () => {
          //挂载mapbox-gl-utils
          U.init(map);
          mp = new MP(map);

          // 添加地形数据
          map.addSource('mapbox-dem', {
            type: 'raster-dem',
            tiles: [VITE_GLOB_API_URL_VAR.value + '/mapbox_terrain/{z}/{x}/{y}.png'],
            tileSize: 256,
            maxzoom: 13,
            minzoom: 10,
          });
          map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 });

          // 设置2D地图
          map.easeTo({ pitch: 0, bearing: 0, duration: 1000 });
          map.dragRotate.disable(); // 禁用拖动旋转
          map.pitchWithRotate = false; // 禁用旋转时俯仰变化
          mapAngle.value = '2D';

          handlerCheckUserOrgs();
          // handlerLoadMaskLayer();
          getMaskData();
          handlerDealStreet();
          handlerDealCountry();

          // 视频监控
          addMonitorLayer();
        });
    }
  }
  // 获取图斑面数据
  const polygonVisibility = ref<String>('none');

  const isRootLevel = ref<Boolean>(false);
  async function handlerCheckUserOrgs() {
    let orgs = await getUserOrgs({});
    let isLevel = orgs.find((item, index) => {
      return item.name == '临沂市' || item.parentId == 0 || item.parentName == '根节点';
    });
    if (isLevel) {
      isRootLevel.value = true;
      handlerLoadPolygon('', '', '', '1');
    } else {
      isRootLevel.value = false;
      handlerLoadPolygon();
    }
  }

  function handlerLoadPolygon(code = '', filter = '', type = '', level = '') {
    let sql_filter;
    let map_filter;
    let type_filter;
    let table_filter = layerSettings.value.tablename;
    let field_filter = '&field="gid","tubantype","Id",';
    let color_filter: any = [];
    if (code) {
      sql_filter = '&filter="countyid"=\'' + code + "'";
    } else {
      sql_filter = '';
    }
    if (filter && filter != '全部') {
      map_filter = ['all', ['==', ['get', 'tubantype'], filter]];
    } else {
      map_filter = ['!=', ['get', 'gid'], 0];
    }
    let legend = layerSettings.value.legend[0];
    color_filter.push('case');
    for (const key in legend) {
      color_filter.push(['all', ['==', ['get', 'tubantype'], key]]);
      color_filter.push(legend[key].colour);
    }
    color_filter.push(layerDefaultColor.value);
    switch (type) {
      case '农用地':
        type_filter = ['==', ['get', 'typename'], '农用地'];
        break;
      case '建设用地':
        type_filter = ['==', ['get', 'typename'], '建设用地'];
        break;
      case '推堆土':
        type_filter = ['==', ['get', 'typename'], '推堆土'];
        break;
    }
    if (filter && type) {
      map_filter.push(type_filter);
    } else if (!filter && type) {
      map_filter = ['all', ['!=', ['get', 'gid'], 0], type_filter];
    }

    if (map.getSource('historyLayerLine')) {
      polygonVisibility.value = map.getLayoutProperty('historyLayerLine', 'visibility');
      map.removeLayer('historyLayerLine');
      map.removeLayer('historyLayerFill');
      map.removeSource('historyLayerLine');
      map.removeSource('historyLayerFill');
    }

    if (level) {
    } else {
      sql_filter =
        '&filter=streetid in ( select CAST("OrgId" AS VARCHAR) from sys_userorg where "UserId" = ' +
        localStorage.getItem('userid') +
        ') or countyid in ( select CAST("OrgId" AS VARCHAR) from sys_userorg where "UserId" = ' +
        localStorage.getItem('userid') +
        ')';
    }

    map.addLayer({
      id: 'historyLayerLine',
      type: 'line',
      source: {
        type: 'vector',
        tiles: [
          VITE_GLOB_API_URL_VAR.value +
            '/api/DroneCaseInfoSingle/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=' +
            table_filter +
            sql_filter +
            field_filter,
        ],
        minzoom: 1,
        maxzoom: 20,
        cluster: true, // 启用聚合
        clusterMaxZoom: 0, // 最大聚合缩放级别
        clusterRadius: 0, // 聚合半径
      },
      'source-layer': table_filter,
      layout: {
        'line-join': 'round',
        'line-cap': 'round',
        visibility: polygonVisibility.value,
      },
      filter: map_filter,
      paint: {
        'line-color': color_filter,
        'line-width': 5,
      },
    });
    map.addLayer({
      id: 'historyLayerFill',
      type: 'fill',
      source: {
        type: 'vector',
        tiles: [
          VITE_GLOB_API_URL_VAR.value +
            '/api/DroneCaseInfoSingle/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=' +
            table_filter +
            sql_filter +
            field_filter,
        ],
        minzoom: 1,
        maxzoom: 20,
        cluster: false,
      },
      'source-layer': table_filter,
      filter: map_filter,
      layout: {
        visibility: polygonVisibility.value,
      },
      paint: {
        'fill-color': color_filter,
        'fill-opacity': 0.5,
      },
    });
    emits('onload');

    map.on('click', 'historyLayerFill', (e) => {
      console.log('handlerGetDetails', e.features[0].properties);
      emits('handlerGetDetails', e.features[0].properties);
    });
  }

  // 获取和处理图斑点数据
  const currentCode = ref('');
  async function handlerDealPoint(code = '') {
    let sql_filter;
    if (code) {
      sql_filter = '"countyid"=\'' + code + "'";
    } else {
      sql_filter = '';
    }
    let points = await getPolygonCenter({ tablename: 'view_drone_shp_data', filter: sql_filter });

    let heatdata = {
      type: 'FeatureCollection',
      features: [],
    };
    points?.forEach((item, index) => {
      let geometry = WktToGeojson(item['centroid_point']);
      let feature = {
        geometry: geometry,
        properties: {
          mag: 1,
        },
      };
      heatdata.features.push(feature);
    });

    handlerLoadHeatLayer(heatdata);

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

  function toPosition(item) {
    handlerLocation(item, 17.2);
    handlerLoadSearchResult(item);
  }

  function handlerFilter(item) {
    // handlerLoadPolygon("",item);
    if (isRootLevel.value) {
      handlerLoadPolygon('', item, '', '1');
    } else {
      handlerLoadPolygon('', item, '', '');
    }
  }
  function handlerLoadSearchResult(item) {
    let geojson = {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: item.location,
          },
          properties: {
            name: item.id,
          },
        },
      ],
    };

    // if (map.getSource("searchSource")) {
    //     map.getSource("searchSource").setData(geojson);
    // } else {
    //     map.addSource("searchSource", {
    //     type: "geojson",
    //     data: geojson,
    //     });
    // }

    // if (map.hasImage("searchIcon")) {
    // } else {
    //     map.loadImage(
    //     "/public/statistical/search-icon.png",
    //     function (error, image) {
    //         if (error) throw error;
    //         map.addImage("searchIcon", image);
    //     }
    //     );
    // }

    // if (map.getLayer("searchLayer")) {
    // } else {
    //     map.addLayer({
    //     id: "searchLayer",
    //     type: "symbol",
    //     source: "searchSource",
    //     layout: {
    //         "icon-image": "searchIcon",
    //         "icon-size": 1.2,
    //         "text-field": "{name}",
    //         "text-offset": [0, 2],
    //         "text-anchor": "top",
    //         "text-size": 12,
    //     },
    //     paint: {
    //         "text-color": "#fff",
    //     },
    //     });
    // }
  }
  // 加载热力图图斑数据
  function handlerLoadHeatLayer(heatdata) {
    if (map.getSource('heatSource')) {
      map.getSource('heatSource').setData(heatdata);
    } else {
      map.addSource('heatSource', {
        type: 'geojson',
        data: heatdata,
      });
      map.addLayer({
        id: 'heatLayer',
        type: 'heatmap',
        source: 'heatSource',
        maxzoom: 13,
        minzoom: 7,
        layout: {
          visibility: 'none',
        },
        paint: {
          'heatmap-weight': ['interpolate', ['linear'], ['get', 'mag'], 0, 1, 7, 0],
          'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 9, 3],
          'heatmap-color': [
            'interpolate',
            ['linear'],
            ['heatmap-density'],
            0,
            'rgba(33,102,172,0)',
            0.2,
            'rgba(103,169,207,0.8)',
            0.4,
            'rgba(209,229,240,0.8)',
            0.6,
            'rgba(253,219,199,0.8)',
            0.8,
            'rgba(239,138,98,0.8)',
            1,
            'rgba(178,24,43,0.8)',
          ],
          'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 4, 7, 11, 20],
          'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 0, 8, 1],
        },
      });
    }

    if (map.getLayer('heatLayer')) {
      map.moveLayer('heatLayer', 'historyLayerLine');
      map.moveLayer('heatLayer', 'historyLayerFill');
      if (map.getLayer('clusters')) {
        map.moveLayer('clusters', 'heatLayer');
        map.moveLayer('cluster-count', 'heatLayer');
        map.moveLayer('unclustered-point', 'heatLayer');
      }
    }
  }

  // 地图定位
  function handlerLocation(lngLat, zoom) {
    map.flyTo({
      center: lngLat,
      zoom: zoom,
      bearing: 0,
      speed: 1, // 飞行速度
      curve: 2, // 飞行曲线
      essential: true,
      easing(t) {
        // 飞行动画函数
        return t;
      },
    });
  }

  // 获取县区边界数据
  const handlerDealCountry = (countyName: String = '临沂市'): void => {
    let center = {};
    let zoom;
    let filterName = '';
    if (countyName == '临沂市') {
      center = { lng: 118.72504868812163, lat: 35.180072027132915 };
      zoom = 7.848587811931849;
      handlerLocation([center['lng'], center['lat']], zoom);
    } else if (countyName) {
      center = MAP_VIEWER[countyName].center;
      zoom = MAP_VIEWER[countyName].zoom;
      handlerLocation([center['lng'], center['lat']], zoom);
      filterName = countyName;
    }

    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`,
      url: `http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson`,
    }).then((res) => {
      handlerLoadPanelLayer(res.data);
      handlerLoadCountyLayer(res.data);
    });
  };

  /**
   *
   * 县区边界：countyLayer
   * 县区面板图层：countyPanelLayer
   * 乡镇边界：streetLayer
   * 乡镇名称图层：streetLabelLayer
   * 遮罩图层：mb-tag
   * 图斑线：historyLayerLine
   * 图斑面：historyLayerFill
   *
   * */
  // 渲染县区边界数据
  const handlerLoadCountyLayer = (geojson) => {
    // 绘制线
    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 (map.getLayer('countyPanelLayer')) {
        map.moveLayer('countyLayer', 'countyPanelLayer');
      }
    }
  };

  // 渲染县界白板图层
  const handlerLoadPanelLayer = (geojson) => {
    if (map.getSource('countyPanelLayer')) {
      map.getSource('countyPanelSource').setData(geojson);
    } else {
      map.addSource('countyPanelSource', {
        type: 'geojson',
        data: geojson,
      });
      map.addLayer({
        id: 'countyPanelLayer',
        type: 'fill',
        source: 'countyPanelSource',
        layout: {
          visibility: 'none',
        },
        paint: {
          'fill-color': [
            'case',
            ['==', ['get', 'xzqdm_1'], '371302'],
            '#49B0F9',
            ['==', ['get', 'xzqdm_1'], '371311'],
            '#3EABFA',
            ['==', ['get', 'xzqdm_1'], '371312'],
            '#27A2FB',
            ['==', ['get', 'xzqdm_1'], '3713122'],
            '#34E6B1',
            ['==', ['get', 'xzqdm_1'], '3713001'],
            '#1099FB',
            ['==', ['get', 'xzqdm_1'], '3713271'],
            '#0695FB',
            ['==', ['get', 'xzqdm_1'], '371321'],
            '#058DEE',
            ['==', ['get', 'xzqdm_1'], '371322'],
            '#09C78E',
            ['==', ['get', 'xzqdm_1'], '371323'],
            '#047DD4',
            ['==', ['get', 'xzqdm_1'], '371324'],
            '#94D515',
            ['==', ['get', 'xzqdm_1'], '371325'],
            '#0568B0',
            ['==', ['get', 'xzqdm_1'], '371326'],
            '#3EABFA',
            ['==', ['get', 'xzqdm_1'], '371327'],
            '#49B0F9',
            ['==', ['get', 'xzqdm_1'], '371328'],
            '#27A2FB',
            ['==', ['get', 'xzqdm_1'], '371329'],
            '#94D515',
            '#1099FB',
          ],
          'fill-opacity': 0.9,
        },
      });

      // if(map.getLayer("countyPanelLayer")){
      //     map.moveLayer("countyPanelLayer","countyLayer");
      //     map.moveLayer("countyPanelLayer","historyLayerLine");
      //     map.moveLayer("countyPanelLayer","historyLayerFill");
      // }
    }
  };

  function getMaskData() {
    axios({
      method: 'get',
      url: `http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Ashijie&maxFeatures=50&outputFormat=application%2Fjson`,
    }).then((res) => {
      let geojson = { DATA: res.data.features[0].geometry.coordinates[0][0] };

      handlerLoadMaskLayer(geojson);
    });
  }

  // 加载地图遮罩
  function handlerLoadMaskLayer(geojson) {
    map.addLayer({
      //蒙版图层   //通过边界数据反选 达到挖洞效果
      id: 'mb-tag',
      type: 'fill',
      source: {
        type: 'geojson',
        data: {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                // 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
                [-180, 90],
                [180, 90],
                [180, -90],
                [-180, -90],
              ],
              geojson.DATA,
            ],
          },
        },
      },
      paint: {
        'fill-color': '#ffffff',
        'fill-opacity': 1 /* 透明度 */,
      },
      layout: {
        visibility: 'visible',
      },
    });
  }

  // 获取乡镇数据
  const handlerDealStreet = (countyName: String = '临沂市'): 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);
    });
  };
  // 渲染乡镇边界数据
  const handlerLoadStreetLayer = (geojson) => {
    // 绘制线
    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': 12,
          'text-anchor': 'center',
        },
        paint: {
          'text-color': '#041B36',
          'text-halo-color': '#fff',
          'text-halo-width': 2,
        },
      });
    }
  };

  let VillageGeojson = {};
  const handlerLoadVillageLayer = () => {
    // 绘制线
    if (map.getSource('villageSource')) {
      map.getSource('villageSource').setData(VillageGeojson);
    } else {
      map.addSource('villageSource', {
        type: 'geojson',
        data: VillageGeojson,
        minzoom: 12,
        maxzoom: 24,
      });
      map.addLayer({
        id: 'villageLayer',
        type: 'line',
        source: 'villageSource',
        paint: {
          'line-color': '#42befb', // 设置线的颜色
          'line-width': 2, // 设置线的宽度
        },
        minzoom: 12,
        maxzoom: 24,
      });

      map.addLayer({
        id: 'villageLabelLayer',
        type: 'symbol',
        source: 'villageSource',
        layout: {
          'text-field': ['get', 'zldwmc'],
          'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
          'text-size': 12,
          'text-anchor': 'center',
        },
        paint: {
          'text-color': '#041B36',
          'text-halo-color': '#fff',
          'text-halo-width': 2,
        },
      });
    }
  };

  // 控制图层显示隐层
  /**
   * 热力图：heatLayer
   *
   * 图斑线：historyLayerLine
   *
   * 图斑面：historyLayerFill
   *
   * 行政区划：countyLayer
   *
   *
   *
   * */
  function handlerChangeLayerVisible(layerName, checked) {
    if (checked) {
      map.setLayoutProperty(layerName, 'visibility', 'visible');
    } else {
      map.setLayoutProperty(layerName, 'visibility', 'none');
    }

    if (layerName == 'countyPanelLayer') {
      if (map.getLayer('countyPanelLayer')) {
        map.moveLayer('countyPanelLayer', 'streetLayer');
        map.moveLayer('countyPanelLayer', 'streetLabelLayer');
        map.moveLayer('countyPanelLayer', 'countyLayer');
        map.moveLayer('countyPanelLayer', 'historyLayerFill');
        map.moveLayer('countyPanelLayer', 'historyLayerLine');
      }
    }
  }

  // 切换县区
  function handlerChangeCounty(county, type = '') {
    handlerLoadPolygon(county.code, type);
    handlerDealPoint(county.code);
    handlerDealCountry(county.name);
  }

  const mapAngle = ref<String>('2D');

  const handlerChangeMapAngle = () => {
    if (map) {
      const currentPitch = map.getPitch();
      if (currentPitch === 0) {
        map.easeTo({ pitch: 60, bearing: 0, duration: 1000 });
        map.dragRotate.enable(); // 启用拖动旋转
        map.pitchWithRotate = true; // 启用旋转时俯仰变化
        mapAngle.value = '3D';
      } else {
        map.easeTo({ pitch: 0, bearing: 0, duration: 1000 });
        map.dragRotate.disable(); // 禁用拖动旋转
        map.pitchWithRotate = false; // 禁用旋转时俯仰变化
        mapAngle.value = '2D';
      }
    }
  };
  // 回到初始视角
  const handlerInitialize = () => {
    map.flyTo({
      center: [118.30207505530701, 35.30123435040745], // 设置中心点坐标
      zoom: 8, // 设置缩放等级
      pitch: 0,
      bearing: 0,
      duration: 1000,
    });
  };

  onMounted(() => {
    mapboxgl.accessToken = MAPBOX_TOKEN;

    // 获取网络环境后加载地图
    loadMapInfo();

  })

    


  // 抛出函数
  defineExpose({
    handlerChangeCounty, // 切换县区
    handlerChangeLayerVisible, // 控制图层显示隐藏
    handlerLoadPolygon,
    handlerDrawPolygon, // 绘制范围
    handlerDeletePolygon, // 取消绘制
    handlerChangeTifLayer, // 图层切换
  });

  /* 图层控制 视频监控*/

  import MonitoringData from './MonitoringData.json';

  function addMonitorLayer() {
    // 加载监控图标
    map.loadImage('/monitor/monitor.png', function (error, image) {
      if (error) throw error;
      if (!map.hasImage('monitorIcon')) {
        map.addImage('monitorIcon', image);
      }
    });

    // 加载监控数据源
    map.addSource('JianKongSource', {
      type: 'geojson',
      data: MonitoringData,
    });

    // 加载监控图层
    map.addLayer({
      id: 'JianKong',
      type: 'symbol',
      source: 'JianKongSource',
      layout: {
        'icon-image': 'monitorIcon',
        'icon-size': 0.8,
        'text-field': ['get', 'name'],
        'text-size': 12,
        'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
        'text-offset': [0, 1.6],
        'text-anchor': 'top',
        'text-allow-overlap': true,
        visibility: 'none',
        'icon-allow-overlap': true,
      },
      paint: {
        'text-color': '#041B36',
        'text-halo-color': '#fff',
        'text-halo-width': 2,
      },
      minzoom: 0, // 最小缩放级别
      maxzoom: 22, // 最大缩放级别
    });

    map.on('click', 'JianKong', (e) => {
      // 显示弹窗
      emits('showMonitor', e.features[0].properties);
    });
  }

  function handlerDeletePolygon() {
    mp.deleteDraw();
  }
  function handlerDrawPolygon() {
    // 先移除查询的影像图层
    handlerDeleteHistoryLayer();

    mp.draw('Polygon');
    mp.on('Polygon', function (e) {
      Modal.confirm({
        title: '是否查询历史影像?',
        onCancel() {
          // mp.deleteDraw();
        },
        async onOk() {
          let geojson = {
            type: 'Feature',
            geometry: {
              type: 'Polygon',
              coordinates: [],
            },
          };
          let coordinates = [];
          e?.forEach((item, index) => {
            coordinates?.push([item.lng, item.lat]);
          });
          coordinates.push(coordinates[0]);
          geojson.geometry.coordinates[0] = coordinates;
          let wktStr = GeojsonToWkt(geojson.geometry);
          emits('handlerQueryIntersectTif', wktStr);
        },
      });
      // emit('mapDraw', 'Polygon', e);
    });
  }

  const tifLayers = ref([]);

  function handlerChangeTifLayer(item) {
    if (item.type == 'historyLayer' || item.type == 'speciaLayer') {
      if (item.checked) {
        // 加载
        if (map.getLayer(item.id)) {
          map.setLayoutProperty(item.id, 'visibility', 'visible');
        } else {
          map.addSource('source' + item.id, {
            type: 'raster',
            tiles: [item.url],
            tileSize: 256,
          });
          map.addLayer({
            id: item.id,
            type: 'raster',
            source: 'source' + item.id,
            layout: {
              visibility: 'visible',
            },
            paint: {},
          });

          if (item.type == 'historyLayer') {
            tifLayers.value.push(item.id);
            console.log('tifLayers', tifLayers.value);
          }

          map.moveLayer(item.id, 'historyLayerFill');
          map.moveLayer(item.id, 'historyLayerLine');
        }
      } else {
        map.setLayoutProperty(item.id, 'visibility', 'none');
      }
    } else if (item.type == 'dataLayer') {
      if (item.id == 'Monitor') {
        if (map.getLayer('JianKong')) {
          if (item.checked) {
            map.setLayoutProperty('JianKong', 'visibility', 'visible');
          } else {
            map.setLayoutProperty('JianKong', 'visibility', 'none');
          }
        }
      } else if (item.id == 'Data') {
        if (map.getLayer('historyLayerLine')) {
          if (item.checked) {
            map.setLayoutProperty('historyLayerLine', 'visibility', 'visible');
            map.setLayoutProperty('historyLayerFill', 'visibility', 'visible');
          } else {
            map.setLayoutProperty('historyLayerLine', 'visibility', 'none');
            map.setLayoutProperty('historyLayerFill', 'visibility', 'none');
          }
        }
      }
    } else if (item.type == 'baseLayer') {
      switch (item.id) {
        case 1:
          handlerChangeLayerVisible('tdt-img-tiles', false);
          handlerChangeLayerVisible('tdt-vec-tiles', true);
          handlerChangeLayerVisible('yaogan', false);
          handlerChangeLayerVisible('yingxiang', false);
          handlerChangeLayerVisible('countyPanelLayer', false);
          break;
        case 2:
          handlerChangeLayerVisible('tdt-img-tiles', true);
          handlerChangeLayerVisible('yaogan', true);
          handlerChangeLayerVisible('yingxiang', true);
          handlerChangeLayerVisible('tdt-vec-tiles', false);
          handlerChangeLayerVisible('countyPanelLayer', false);
          break;
        case 3:
          handlerChangeLayerVisible('tdt-img-tiles', false);
          handlerChangeLayerVisible('tdt-vec-tiles', false);
          handlerChangeLayerVisible('yaogan', false);
          handlerChangeLayerVisible('yingxiang', false);
          handlerChangeLayerVisible('countyPanelLayer', true);
          break;
      }
    }

    function handlerChangeTifLayer(item) {
      if (item.type == 'historyLayer' || item.type == 'speciaLayer') {
        if (item.checked) {
          // 加载
          if (map.getLayer(item.id)) {
            map.setLayoutProperty(item.id, 'visibility', 'visible');
          } else {
            map.addSource('source' + item.id, {
              type: 'raster',
              tiles: [item.url],
              tileSize: 256,
            });
            map.addLayer({
              id: item.id,
              type: 'raster',
              source: 'source' + item.id,
              layout: {
                visibility: 'visible',
              },
              paint: {},
            });
            tifLayers.value.push(item.id);

            map.moveLayer(item.id, 'historyLayerFill');
            map.moveLayer(item.id, 'historyLayerLine');
          }
        } else {
          map.setLayoutProperty(item.id, 'visibility', 'none');
        }
      } else if (item.type == 'dataLayer') {
        if (item.id == 'Monitor') {
          if (map.getLayer('JianKong')) {
            if (item.checked) {
              map.setLayoutProperty('JianKong', 'visibility', 'visible');
            } else {
              map.setLayoutProperty('JianKong', 'visibility', 'none');
            }
          }
        } else if (item.id == 'Data') {
          if (map.getLayer('historyLayerLine')) {
            if (item.checked) {
              map.setLayoutProperty('historyLayerLine', 'visibility', 'visible');
              map.setLayoutProperty('historyLayerFill', 'visibility', 'visible');
            } else {
              map.setLayoutProperty('historyLayerLine', 'visibility', 'none');
              map.setLayoutProperty('historyLayerFill', 'visibility', 'none');
            }
          }
        }
      } else if (item.type == 'baseLayer') {
        switch (item.id) {
          case 1:
            handlerChangeLayerVisible('tdt-img-tiles', false);
            handlerChangeLayerVisible('tdt-vec-tiles', true);
            handlerChangeLayerVisible('countyPanelLayer', false);
            break;
          case 2:
            handlerChangeLayerVisible('tdt-img-tiles', true);
            handlerChangeLayerVisible('tdt-vec-tiles', false);
            handlerChangeLayerVisible('countyPanelLayer', false);
            break;
          case 3:
            handlerChangeLayerVisible('tdt-img-tiles', false);
            handlerChangeLayerVisible('tdt-vec-tiles', false);
            handlerChangeLayerVisible('countyPanelLayer', true);
            break;
        }
      }
    }
  }

  function handlerDeleteHistoryLayer() {
    tifLayers.value?.forEach((item, index) => {
      if (map.getLayer(item)) {
        map.removeLayer(item);
        map.removeSource('source' + item);
      }
    });
    tifLayers.value = [];
  }
</script>
<style type="less" scoped>
  .map-container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .search-container-box {
    position: absolute;
    width: 330px;
    height: 40px;
    top: 72px;
    left: 73px;
    z-index: 9999;
  }

  .map-type-switch-container {
    width: 280px;
    height: 40px;
    position: absolute;
    top: 72px;
    right: 23px;
    z-index: 9999;
    font-size: 22px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
  }
  .map-type-switch-container .switch-button {
    line-height: 40px;
    width: 150px;
    height: 40px;
    float: left;
    background: url(/map/change-view-btn.png);
    background-size: 100% 100%;
  }

  .map-type-switch-container .switch-button span {
    font-size: 14px;
  }

  .home-button {
    width: 100px;
    height: 100px;
    background: url(/map/home-btn.png);
    background-size: 100% 100%;
    float: right;
    position: relative;
    top: -25px;
    line-height: 100px;
    text-align: center;
  }
  ::v-deep .mapboxgl-ctrl-logo {
    display: none !important;
  }
</style>