gitY
/
LinYeFangHuo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

图层加载,图斑点击查看编辑

main
徐景良 2025-05-15 09:32:38 +08:00
parent 32d262429a 5e98ab6d7f
commit 0936906ae2
1 changed files with 86 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
src/views/demo/layer/index.vue
View File

@ -28,16 +28,16 @@
<a-dropdown>
<template #overlay>
<a-menu >
<a-menu-item key="1" @click="addData('point')" >
<a-menu>
<a-menu-item key="1" @click="addData('point')">
<UserOutlined />
点数据
</a-menu-item>
<a-menu-item key="2" @click="addData('polyline')">
<a-menu-item key="2" @click="addData('polyline')">
<UserOutlined />
线数据
</a-menu-item>
<a-menu-item key="3" @click="addData('polygon')">
<a-menu-item key="3" @click="addData('polygon')">
<UserOutlined />
面数据
</a-menu-item>
@ -50,14 +50,6 @@
</a-dropdown>
<a-button type="primary" @click="exportTemplate"> 导出模版 </a-button>
<a-upload
:accept="'.xlsx,.csv,.xls,.zip'"
:showUploadList="false"
:custom-request="customRequest"
style="margin-right: 0px"
>
<a-button type="primary"> 数据导入 </a-button>
</a-upload>
<a-button type="primary" @click="changeBatchProcessingModal(true)"> 批量操作 </a-button>
<a-button type="primary" @click="styleHandle"> 样式配置 </a-button>
</div>
@ -147,14 +139,13 @@
:multiple="false"
:maxCount="1"
:customRequest="handleCustomRequest"
v-if="!fileUrl"
>
<p class="ant-upload-drag-icon">
<inbox-outlined></inbox-outlined>
</p>
<p class="ant-upload-text">上传SLD文件</p>
</a-upload-dragger>
<div v-else>
<div v-if="fileUrl">
<p>{{ fileUrlView.name }}</p>
<a-button type="primary" @click="editorHandle">在编辑器中打开</a-button>
</div>
@ -167,7 +158,7 @@
</div>
</div>
<AddModel @register="registerAddModal" :treeData="treeData" @success="handleSuccess" />
<EditorModel @register="registerEditorModal" />
<EditorModel @register="registerEditorModal" @editorCancel="editorCancel" />
<a-modal
:keyboard="false"
:maskClosable="false"
@ -197,7 +188,13 @@
import { CloseOutlined, InboxOutlined } from '@ant-design/icons-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { columns } from './data';
import { tableDataByTableName, updateTableData, addTableData, uploadSldStyle } from '@/api/application/layer';
import {
tableDataByTableName,
updateTableData,
addTableData,
uploadSldStyle,
getSldFilePath,
} from '@/api/application/layer';
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import { useMessage } from '@/hooks/web/useMessage';
import { uploadFile, fun_Delete } from '@/api/demo/files';
@ -208,7 +205,16 @@
import { EventBus } from '@/utils/eventBus';
import {GetGeometryCenter,EditDrawingGeometry,AddDrawingGeometry,PreviewDrawingGeometry,DrawingEnd,GeojsonToWkt} from "./geometryHandler.ts"
import {
GetGeometryCenter,
EditDrawingGeometry,
AddDrawingGeometry,
PreviewDrawingGeometry,
DrawingEnd,
GeojsonToWkt
} from './geometryHandler.ts';
import * as mars3d from 'mars3d';
@ -217,28 +223,17 @@
let globalMap: mars3d.Map;
const onMapLoad = (map) => {
globalMap = map;
// 单击和双击事件
globalMap.on(mars3d.EventType.click,(e)=>{
// 点击查询
})
}
};
EventBus.on("editLayerEnd",function(e){
formState.value.geom = e;
})
});
// 加载图层
const handlerLoadLayer = (record) => {
console.log("record",record);
//
let layer = globalMap.getLayerById(record.id);
if(layer){
@ -246,47 +241,41 @@
}else{
let tileLayer = new mars3d.layer.WmsLayer({
name: record.applicationName,
id:record.id,
url: VITE_GLOB_GEOSERVER_BASE_URL+"/geoserver/my_workspace/wms",
layers: "my_workspace:"+record.tableName,
parameters: {
transparent: true,
format: "image/png"
},
getFeatureInfoParameters: {
feature_count: 10
},
// 单击高亮及其样式
highlight: {
type: "wallP",
diffHeight: 100,
materialType: mars3d.MaterialType.LineFlow,
materialOptions: {
image: "https://data.mars3d.cn/img/textures/fence.png",
color: "#ffff00",
speed: 10, // 速度，建议取值范围1-100
axisY: true
name: record.applicationName,
id:record.id,
url: VITE_GLOB_GEOSERVER_BASE_URL+"/geoserver/my_workspace/wms",
layers: "my_workspace:"+record.tableName,
parameters: {
transparent: true,
format: 'image/png',
},
getFeatureInfoParameters: {
feature_count: 10
},
// 单击高亮及其样式
highlight: {
type: "wallP",
diffHeight: 100,
materialType: mars3d.MaterialType.LineFlow,
materialOptions: {
image: "https://data.mars3d.cn/img/textures/fence.png",
color: "#ffff00",
speed: 10, // 速度，建议取值范围1-100
axisY: true
}
},
popup: "all",
flyTo: true,
featureToGraphic:function(e){ // 获取点击查询到的数据
let wkt = GeojsonToWkt(e.data.geometry);
let editData = {...e.data.properties}
editData.geom = wkt;
viewData(editData)
}
},
popup: "all",
flyTo: true,
featureToGraphic:function(e){ // 获取点击查询到的数据
console.log("e.data",e.data);
let wkt = GeojsonToWkt(e.data.geometry);
let editData = {...e.data.properties}
editData.geom = wkt;
viewData(editData)
}
})
// getClickFeature(tileLayer);
globalMap.addLayer(tileLayer);
}
}
};
const { VITE_GLOB_API_URL } = getAppEnvConfig();
const { createConfirm, createMessage } = useMessage();
@ -377,7 +366,7 @@
});
}
if(showTable.value == 'edit'){
if (showTable.value == 'edit') {
updateTableData(params).then((res) => {
console.log('res', res);
if (res) {
@ -388,17 +377,16 @@
createMessage.error('编辑失败!');
}
});
}else if(showTable.value == 'add'){
} else if (showTable.value == 'add') {
params.list = [];
params.list = [];
headData.value?.forEach((item,index)=>{
headData.value?.forEach((item, index) => {
params.list.push({
name: item.dataIndex,
value: formState.value[item] ? formState.value[item] : null,
});
})
console.log("params",params.list);
});
console.log('params', params.list);
addTableData(params).then((res) => {
console.log('res', res);
@ -424,9 +412,6 @@
};
const handleSelect = (record) => {
tableName.value = record.tableName;
applicationName.value = record.applicationName;
tableVisible.value = true;
@ -447,21 +432,22 @@
isUpdate: false,
});
};
const checkedLayer = (e) => {
console.log("e123",e);
handlerLoadLayer(e);
}
const hanlerLoadLayer = () => {
}
const hanlerLoadLayer = () => {};
const handleSuccess = () => {
treeRef.value.fetch();
};
const addData = (type) => {
AddDrawingGeometry(globalMap,type);
AddDrawingGeometry(globalMap, type);
showTable.value = 'add';
}
};
const detailData = ref([]);
const editData = (record) => {
selectVal.value = record;
@ -472,7 +458,6 @@
};
const viewData = (record) => {
PreviewDrawingGeometry(globalMap,record.geom);
selectVal.value = record;
formState.value = record;
@ -522,10 +507,20 @@
};
const styleHandle = () => {
fileUrl.value = '';
fileUrlView.value = {};
styleName.value = '';
showTable.value = 'style';
getSldFilePath({ tablename: tableName.value }).then((res) => {
if (res) {
fileUrlView.value.name = res.filepath;
fileUrl.value = res.filepath;
fileUrlView.value.url = res.filepath;
fileUrlView.value.id = res.fileid;
styleName.value = res.stylename;
} else {
fileUrl.value = '';
fileUrlView.value = {};
styleName.value = '';
}
});
};
const handleChange = (info) => {
fileList.value = info.fileList;
@ -556,6 +551,7 @@
filepath: fileUrl.value,
styleName: styleName.value,
tablename: tableName.value,
id: fileUrlView.value.id,
};
uploadSldStyle(params).then((res) => {
console.log(res);
@ -636,34 +632,10 @@
openTempeleteModel(true);
};
onMounted(() => {});
const customRequest = (file) => {
console.log('handleCustomRequest', file);
const name = file.file.name.toLowerCase();
if (name.endsWith('.zip')) {
const formData = new FormData();
formData.append('files', file.file);
Upload(formData).then((res) => {
console.log(res);
const filePath = res[0].filePath;
let params = {
tableName: tableName.value,
zipFilePath: filePath,
};
UploadShape(params).then((result) => {
message.success('导入成功');
reload();
});
});
} else {
const formData = new FormData();
formData.append('file', file.file);
UploadExcelAll({ File: formData, tableName: tableName.value }).then((res) => {
message.success('导入成功');
reload();
});
}
// procedure.value ++
return false;
const editorCancel = () => {
fileList.value = [];
fileUrlView.value = {};
fileUrl.value = '';
};
</script>