From 513d65679869e6ca07ddf13e75406f8c537afec8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com> Date: Tue, 27 Aug 2024 16:43:17 +0800 Subject: [PATCH] =?UTF-8?q?=E6=88=90=E6=9E=9C=E7=AE=A1=E7=90=86-=E8=88=AA?= =?UTF-8?q?=E9=A3=9E=E5=9B=BE=E7=89=87-=E8=B0=83=E6=95=B4=E5=9B=BE?= =?UTF-8?q?=E5=B1=82=E7=9A=84=E9=A1=BA=E5=BA=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/demo/cloudQuery.ts | 2 +- .../achievement/AchievementManage/index.vue | 10 +-- .../clound/mapComponent.vue | 78 ++++++++++++------- 3 files changed, 58 insertions(+), 32 deletions(-) diff --git a/src/api/demo/cloudQuery.ts b/src/api/demo/cloudQuery.ts index 5c27aac8..f5a3b821 100644 --- a/src/api/demo/cloudQuery.ts +++ b/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, }); } diff --git a/src/views/demo/system/achievement/AchievementManage/index.vue b/src/views/demo/system/achievement/AchievementManage/index.vue index eb721913..2b99e5bd 100644 --- a/src/views/demo/system/achievement/AchievementManage/index.vue +++ b/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, ); } diff --git a/src/views/demo/system/geoservermanagement/clound/mapComponent.vue b/src/views/demo/system/geoservermanagement/clound/mapComponent.vue index 44be0283..f32404da 100644 --- a/src/views/demo/system/geoservermanagement/clound/mapComponent.vue +++ b/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, + // }); + // }); }); // 抛出函数