成果管理-航飞图片-调整图层的顺序
parent
8375053042
commit
513d656798
|
|
@ -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,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
// });
|
||||
// });
|
||||
});
|
||||
|
||||
// 抛出函数
|
||||
|
|
|
|||
Loading…
Reference in New Issue