成果管理-航飞图片-调整图层的顺序

src/api/demo/cloudQuery.ts

@@ -9,7 +9,7 @@ enum Api {
 
 export function AddDroneTask(params: { geomid: string }) {
   return defHttp.post({
-    url: Api.AddDroneTask,
+    url: Api.AddDroneTask + "?geomid=" + params.geomid,
     params,
   });
 }

src/views/demo/system/achievement/AchievementManage/index.vue

@@ -285,8 +285,8 @@
     let lngList: any = [];
     let latList: any = [];
     tasklist?.forEach((item, index) => {
-      lngList.push(parseFloat(item.gemo.x));
-      latList.push(parseFloat(item.gemo.y));
+      // lngList.push(parseFloat(item.gemo.x));
+      // latList.push(parseFloat(item.gemo.y));
       let feature: any = {
         type: 'Feature',
         geometry: {
@@ -305,13 +305,13 @@
     });
 
     // 确定中心点和zoom等级
-    let result = calculateCenterAndZoom(lngList, latList);
+    // let result = calculateCenterAndZoom(lngList, latList);
     // console.log(result);
     // 航飞图片-图层
     mapboxComponentRef.value.AchievementManageRaster(
       taskLayerGeoJson,
-      result.center,
-      result.zoomLevel,
+      [118.30207505530701, 35.30123435040745],
+      7.848587811931849,
     );
   }
 

src/views/demo/system/geoservermanagement/clound/mapComponent.vue

@@ -85,20 +85,20 @@
   }
 
   // 获取县区边界数据
-  const handlerDealCountry = (countyName: String = '临沂市'): void => {
+  const handlerDealCountry = (layerName): void => {
     let filterName = '';
-    let center = { lng: 118.72504868812163, lat: 35.180072027132915 };
+    let center = { lng: 118.30207505530701, lat: 35.30123435040745 };
     let zoom = 7.848587811931849;
     handlerLocation([center['lng'], center['lat']], zoom);
     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);
+      handlerLoadCountyLayer(res.data, layerName);
     });
   };
   // 渲染县区边界数据
-  const handlerLoadCountyLayer = (geojson) => {
+  const handlerLoadCountyLayer = (geojson, layerName) => {
     // 绘制线
     if (map.getSource('countySource')) {
       map.getSource('countySource').setData(geojson);
@@ -117,19 +117,20 @@
         },
       });
     }
+    map.moveLayer(layerName, '');
   };
 
   // 获取乡镇数据
-  const handlerDealStreet = (countyName: String = '临沂市'): void => {
+  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);
+      handlerLoadStreetLayer(res.data, layerName);
     });
   };
   // 渲染乡镇边界数据
-  const handlerLoadStreetLayer = (geojson) => {
+  const handlerLoadStreetLayer = (geojson, layerName) => {
     // 绘制线
     if (map.getSource('streetSource')) {
       map.getSource('streetSource').setData(geojson);
@@ -151,7 +152,6 @@
         minzoom: 10,
         maxzoom: 24,
       });
-
       map.addLayer({
         id: 'streetLabelLayer',
         type: 'symbol',
@@ -169,16 +169,22 @@
         },
       });
       map.moveLayer('countyLayer');
+      map.moveLayer(layerName, '');
     }
   };
 
   // 图层管理-图层
   function GeoserverManagementRaster(chooseRow, lngLat, zoom) {
+    // 县区边界
+    handlerDealStreet('GeoserverManagementRaster');
+    handlerDealCountry('GeoserverManagementRaster');
+    handlerLocation(lngLat, zoom);
+
     let format =
       chooseRow.dataType == '点'
         ? '&format=application/openlayers'
         : '&format=image/png&TRANSPARENT=TRUE';
-    handlerLocation(lngLat, zoom);
+
     map.addSource('wmsSource', {
       type: 'raster',
       tiles: [
@@ -193,7 +199,7 @@
       tileSize: 256,
     });
     map.addLayer({
-      id: 'street-border',
+      id: 'GeoserverManagementRaster',
       type: 'raster',
       source: 'wmsSource',
       layout: {
@@ -204,6 +210,9 @@
 
   // 影像管理-图层
   function GeoTiffManagerRaster(chooseRow, lngLat, zoom) {
+    // 县区边界
+    handlerDealStreet('GeoTiffManagerRaster');
+    handlerDealCountry('GeoTiffManagerRaster');
     handlerLocation(lngLat, zoom);
     map.addSource('wmsSource', {
       type: 'raster',
@@ -211,7 +220,7 @@
       tileSize: 256,
     });
     map.addLayer({
-      id: 'street-border',
+      id: 'GeoTiffManagerRaster',
       type: 'raster',
       source: 'wmsSource',
       layout: {
@@ -222,6 +231,11 @@
 
   // 航飞图片-图层
   function AchievementManageRaster(taskLayerGeoJson, lngLat, zoom) {
+    // 清除图层
+    clearTaskLayer('AchievementManageRaster');
+    // 县区边界
+    handlerDealStreet('AchievementManageRaster');
+    handlerDealCountry('AchievementManageRaster');
     handlerLocation(lngLat, zoom);
     map.loadImage('/map/AchievementManage.png', function (error, image) {
       if (error) throw error;
@@ -229,23 +243,24 @@
         map.addImage('taskIcon', image);
       }
     });
-    map.addSource('taskSource', {
+    map.addSource('wmsSource', {
       type: 'geojson',
       data: taskLayerGeoJson,
     });
     map.addLayer({
-      id: 'tasklayer',
+      id: 'AchievementManageRaster',
       type: 'symbol',
-      source: 'taskSource',
+      source: 'wmsSource',
       layout: {
         'icon-image': 'taskIcon',
         'icon-size': 0.8,
         'text-field': ['get', 'taskName'],
-        'text-size': 14,
+        'text-size': 10,
         'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
         'text-offset': [0, 1.8],
         'text-anchor': 'top',
-        'text-allow-overlap': false,
+        'icon-allow-overlap': true,
+        'text-allow-overlap': true,
         visibility: 'visible',
       },
       paint: {
@@ -254,7 +269,7 @@
         'text-halo-width': 1,
       },
     });
-    map.on('click', 'tasklayer', (e) => {
+    map.on('click', 'AchievementManageRaster', (e) => {
       // 显示弹窗
       if (e.features.length > 0) {
         // 获取第一个（也是唯一的）被点击的特征
@@ -268,18 +283,29 @@
     });
   }
 
+  // 清除图层
+  function clearTaskLayer(layerName) {
+    // 检查图层是否存在
+    if (map.getLayer(layerName)) {
+      // 删除图层
+      map.removeLayer(layerName);
+    }
+    // 检查数据源是否存在
+    if (map.getSource('wmsSource')) {
+      // 删除数据源
+      map.removeSource('wmsSource');
+    }
+  }
+
   onMounted(() => {
     mapboxgl.accessToken = MAPBOX_TOKEN;
     map = initMap();
-    // 县区边界
-    handlerDealStreet();
-    handlerDealCountry();
-    map.on('load', () => {
-      map.flyTo({
-        center: [118.30207505530701, 35.30123435040745],
-        zoom: 8,
-      });
-    });
+    // map.on('load', () => {
+    //   map.flyTo({
+    //     center: [118.30207505530701, 35.30123435040745],
+    //     zoom: 7.848587811931849,
+    //   });
+    // });
   });
 
   // 抛出函数