diff --git a/package.json b/package.json index fb10562..58b2b83 100644 --- a/package.json +++ b/package.json @@ -85,6 +85,7 @@ "@microsoft/signalr": "^8.0.0", "@shikijs/monaco": "^1.1.6", "@turf/turf": "^7.1.0", + "@terraformer/wkt": "2.1.2", "@vben/hooks": "workspace:*", "@volar/cdn": "~1.11.1", "@volar/monaco": "~1.11.1", diff --git a/src/packages/components/Tasks/Tasks/TaskBanner/index.vue b/src/packages/components/Tasks/Tasks/TaskBanner/index.vue index 79ef162..0397680 100644 --- a/src/packages/components/Tasks/Tasks/TaskBanner/index.vue +++ b/src/packages/components/Tasks/Tasks/TaskBanner/index.vue @@ -83,7 +83,6 @@ onMounted(()=>{ }else{ props.chartConfig.option.dataset.imgArr = [VITE_GLOB_API_URL+"/"+resData[0].image] } - props.chartConfig.option.dataset.data = data; }); diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalButton/index.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalButton/index.vue index c9a98c6..7c6f171 100644 --- a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalButton/index.vue +++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalButton/index.vue @@ -48,6 +48,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any) => { // console.log('resData', resData); }); + }; onMounted(() => { @@ -56,7 +57,6 @@ EventBus.on(props.chartConfig.id + 'dataupdate', (data) => { const keys = Object.keys(data); - let interactConfigEvents = props.chartConfig.events.interactConfigEvents; interactConfigEvents.forEach((item, index) => { item?.movementList.forEach((m, mindex) => { diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/index.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/index.vue index 3017945..c739a90 100644 --- a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/index.vue +++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/index.vue @@ -122,13 +122,13 @@ >
{{ videoItem.title }}
{{ item.videos.title }}
option.status.hide, - (newValue) => { - if (!isEdit) { - if (!newValue) { - let data = getDataBySerialNumberValue(option.dataStyle.serialNumberValue); - if (data.manufacturer == '海康') { - MonitorHKRef.value.initPlugin(); - } - } - } - }, - ); - // 切换视频 watch( () => option.dataStyle.serialNumberValue, diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_WuRenJiShiShiHuaMian/index.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_WuRenJiShiShiHuaMian/index.vue index 4f62842..e498376 100644 --- a/src/packages/components/Zhigan/Zhigan/ZhiGan_WuRenJiShiShiHuaMian/index.vue +++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_WuRenJiShiShiHuaMian/index.vue @@ -52,13 +52,13 @@
option.status.hide, - () => { - if (!option.status.hide) { - } - }, - ); - // 初始化视频控件 onMounted(() => { // 用于规避视频id重复 diff --git a/src/packages/components/Zhiku/Zhiku/HuoQingDetailTimeLine/index.vue b/src/packages/components/Zhiku/Zhiku/HuoQingDetailTimeLine/index.vue index b5b38bb..b247d2a 100644 --- a/src/packages/components/Zhiku/Zhiku/HuoQingDetailTimeLine/index.vue +++ b/src/packages/components/Zhiku/Zhiku/HuoQingDetailTimeLine/index.vue @@ -122,13 +122,13 @@ >
{{ videoItem.title }}
{{ item.videos.title }}
option.status.hide, - () => { - if (!option.status.hide) { - } - }, - ); - // 初始化视频控件 onMounted(() => { // 用于规避视频id重复 diff --git a/src/views/demo/layer/BatchProcessingModal/ExportComponent/index.vue b/src/views/demo/layer/BatchProcessingModal/ExportComponent/index.vue index 97e6fdb..189289d 100644 --- a/src/views/demo/layer/BatchProcessingModal/ExportComponent/index.vue +++ b/src/views/demo/layer/BatchProcessingModal/ExportComponent/index.vue @@ -102,7 +102,7 @@ const submitModal = ref(false) const fieId:any = ref([]) const excelLoading = ref(false) const shpLoading = ref(false) -const props = defineProps(['tableColumn','tableName']) +const props = defineProps(['tableColumn','tableName','applicationName']) const emits = defineEmits(['changeBatchProcessingModal']) const sqlValue = ref('') const filterList:any = ref([]) @@ -153,17 +153,18 @@ const exportFile = (type) => { page: 1, limit: 99999999, tableName: props.tableName, + tableCNName: props.applicationName, filter: filterList.value, field: fieId.value } if (type == 'excel') { excelLoading.value = true url = VITE_GLOB_API_URL + '/api/ApplicationData/ExportExcel'; - fileName = '数据导出' + new Date().getTime() + '.xls'; + fileName = props.applicationName + '.xls'; } else if (type == 'shp') { shpLoading.value = true url = VITE_GLOB_API_URL + '/api/ApplicationData/ExportShapefile'; - fileName = '数据导出' + new Date().getTime() + '.zip'; + fileName = props.applicationName + '.zip'; } axios({ method: 'post', diff --git a/src/views/demo/layer/BatchProcessingModal/index.vue b/src/views/demo/layer/BatchProcessingModal/index.vue index 303c634..9ba52c2 100644 --- a/src/views/demo/layer/BatchProcessingModal/index.vue +++ b/src/views/demo/layer/BatchProcessingModal/index.vue @@ -13,7 +13,7 @@
- +
@@ -27,7 +27,7 @@ import ExportComponent from './ExportComponent/index.vue' import BatchOperationsComponent from './BatchOperationsComponent/index.vue' import { GetTableColumnList } from '@/api/demo/BatchProcessingModal' const emits = defineEmits(['changeBatchProcessingModal']) -const props = defineProps(['tableName']) +const props = defineProps(['tableName','applicationName']) const control = ref(0) const tableColumn = ref([]) diff --git a/src/views/demo/layer/Map.vue b/src/views/demo/layer/Map.vue index 5874585..c0097d1 100644 --- a/src/views/demo/layer/Map.vue +++ b/src/views/demo/layer/Map.vue @@ -18,6 +18,9 @@ default: '', }, }); + + const emit = defineEmits(['onLoad']) + onMounted(() => { let options = { scene: { @@ -243,6 +246,10 @@ isFirstLoad.value = false; // 初始化矢量图层 handlerInitEntityLayer(); + + map.on(mars3d.EventType.load, function (event) { + emit('onLoad', map); + }) }; let graphicLayer = null; diff --git a/src/views/demo/layer/geometryHandler.ts b/src/views/demo/layer/geometryHandler.ts new file mode 100644 index 0000000..12159dd --- /dev/null +++ b/src/views/demo/layer/geometryHandler.ts @@ -0,0 +1,255 @@ +import { wktToGeoJSON,geojsonToWKT } from "@terraformer/wkt" +import * as turf from '@turf/turf' +import * as mars3d from 'mars3d'; +import { EventBus } from '@/utils/eventBus'; + +// wkt 转 geojson +const WktToGeojson = (wktData)=> { + return wktToGeoJSON(wktData); +} + +// geojson 转 wkt +const GeojsonToWkt = (geojsonData)=> { + return geojsonToWKT(geojsonData) +} + +// 获取数据中心点 +const GetGeometryCenter = (geometry) => { + let geojson = null; + + // wkt + if(typeof geometry == 'string'){ + geojson = wktToGeoJSON(geometry); + } + + let coordinates = null; + let centerPointGeojson = null; + + switch(geojson?.type){ + + case "Point": + coordinates = geojson.coordinates; + break; + + case "Polygon": + let polygon = turf.polygon(geojson.coordinates); + centerPointGeojson = turf.centerOfMass(polygon); + coordinates = centerPointGeojson.geometry.coordinates; + break; + + case "MultiPolygon": + let multiPolygon = turf.multiPolygon(geojson.coordinates); + centerPointGeojson = turf.centerOfMass(multiPolygon); + coordinates = centerPointGeojson.geometry.coordinates; + break; + } + return coordinates; +} + + + + + +let drawingGraphicLayer = new mars3d.layer.GeoJsonLayer(); + +// 编辑图斑 +const EditDrawingGeometry = (map,geometry) => { + + // 获取geojson + let geojson = null; + + if(typeof geometry == 'string'){ + let jsonData = WktToGeojson(geometry) + + geojson = { + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "geometry": jsonData + } + ] + } + } + console.log("geojson",geojson); + + // 加载图层 + drawingGraphicLayer = new mars3d.layer.GeoJsonLayer({ + name: "编辑图层", + data:geojson, + isAutoEditing:true, + symbol: { + styleOptions: { + color: "#0d3685", + outlineColor: "#0d3685", + opacity: 0.8, + clampToGround:true, + "color": "#2f00b0", + "pixelSize": 10, + "opacity": 1, + "outline": true, + "outlineColor": "#ffffff", + "outlineOpacity": 0.6, + "outlineWidth": 2, + "scaleByDistance_far": 1000000, + "scaleByDistance_farValue": 0.1, + "scaleByDistance_near": 1000, + "scaleByDistance_nearValue": 1, + "distanceDisplayCondition_far": 10000, + "visibleDepth": true + } + }, + popup: [], + popupOptions: { + showNull: true + }, + flyTo: true + }) + + drawingGraphicLayer.bindContextMenu([ + { + text: "开始编辑对象", + icon: "fa fa-edit", + show: function (e) { + const graphic = e.graphic + if (!graphic || !graphic.hasEdit) { + return false + } + return !graphic.isEditing + }, + callback: (e) => { + const graphic = e.graphic + if (!graphic) { + return false + } + if (graphic) { + drawingGraphicLayer.startEditing(graphic) + } + } + }, + { + text: "停止编辑对象", + icon: "fa fa-edit", + show: function (e) { + const graphic = e.graphic + if (!graphic || !graphic.hasEdit) { + return false + } + return graphic.isEditing + }, + callback: (e) => { + const graphic = e.graphic + if (!graphic) { + return false + } + if (graphic) { + graphic.stopEditing() + } + } + }, + { + text: "还原编辑(还原到初始)", + icon: "fa fa-pencil", + show: (event) => { + function hasRestore(graphic) { + if (!graphic || !graphic.hasEdit || !graphic.isEditing) { + return false + } + return graphic.editing?.hasRestore() + } + + const graphic = event.graphic + if (hasRestore(graphic)) { + return true + } + if (graphic.isPrivate && graphic.parent) { + return hasRestore(graphic.parent) // 右击是编辑点时 + } + return false + }, + callback: (event) => { + const graphic = event.graphic + if (graphic.editing?.restore) { + graphic.editing.restore() // 撤销编辑，可直接调用 + } else if (graphic.parent?.editing?.restore) { + graphic.parent.editing.restore() // 右击是编辑点时 + } + } + }, + { + text: "撤销编辑(还原到上一步)", + icon: "fa fa-pencil", + show: (event) => { + function hasRevoke(graphic) { + if (!graphic || !graphic.hasEdit || !graphic.isEditing) { + return false + } + return graphic.editing?.hasRevoke() + } + + const graphic = event.graphic + if (hasRevoke(graphic)) { + return true + } + if (graphic.isPrivate && graphic.parent) { + return hasRevoke(graphic.parent) // 右击是编辑点时 + } + return false + }, + callback: (event) => { + const graphic = event.graphic + if (graphic.editing?.revoke) { + graphic.editing.revoke() // 撤销编辑，可直接调用 + } else if (graphic.parent?.editing?.revoke) { + graphic.parent.editing.revoke() // 右击是编辑点时 + } + } + } + ]) + map.addLayer(drawingGraphicLayer) + + // 获取编辑结果 + drawingGraphicLayer.on(mars3d.EventType.editStop, function (e) { + let resultGeojson = e.graphic.toGeoJSON({standard:true,noAlt:true}) + + let resultWkt = GeojsonToWkt(resultGeojson.geometry) + EventBus.emit("editLayerEnd",resultWkt) + }) + + // +} + +// 添加图斑 +const AddDrawingGeometry = (map) => { + +} + +// 查看图斑 +const DetailDrawingGeometryy = (map,geometry) => { + // 获取geojson + let geojson = null; + + if(typeof geometry == 'string'){ + let jsonData = WktToGeojson(geometry) + + geojson = { + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "geometry": jsonData + } + ] + } + } + + +} + +// 结束停止编辑 +const DrawingEnd = () => { + drawingGraphicLayer.clear(); +} + + +export {WktToGeojson,GeojsonToWkt,GetGeometryCenter,EditDrawingGeometry,AddDrawingGeometry,DrawingEnd} \ No newline at end of file diff --git a/src/views/demo/layer/index.vue b/src/views/demo/layer/index.vue index cd1999c..2c4ef3b 100644 --- a/src/views/demo/layer/index.vue +++ b/src/views/demo/layer/index.vue @@ -9,7 +9,7 @@ @remove="tableVisible = false" />
- +
@@ -149,6 +149,7 @@ style="top: 50px" > @@ -171,7 +172,24 @@ import { getAppEnvConfig } from '@/utils/env'; import BatchProcessingModal from './BatchProcessingModal/index.vue'; import { Upload, UploadShape, UploadExcelAll } from '@/api/demo/BatchProcessingModal' -import { message } from 'ant-design-vue'; + import { message } from 'ant-design-vue'; + + import { EventBus } from '@/utils/eventBus'; + import {GetGeometryCenter,EditDrawingGeometry,AddDrawingGeometry,DrawingEnd} from "./geometryHandler.ts" + import * as mars3d from 'mars3d'; + + let globalMap: mars3d.Map; + + const onMapLoad = (map) => { + globalMap = map; + } + + EventBus.on("editLayerEnd",function(e){ + + formState.value.geom = e; + + console.log("formState",formState.value); + }) const { VITE_GLOB_API_URL } = getAppEnvConfig(); const { createConfirm, createMessage } = useMessage(); @@ -226,6 +244,7 @@ import { message } from 'ant-design-vue'; const formState = ref({}); const tableName = ref(); + const applicationName = ref() const styleName = ref(); const rules = { name: [ @@ -263,6 +282,7 @@ import { message } from 'ant-design-vue'; console.log('res', res); if (res) { createMessage.success('编辑成功!'); + DrawingEnd(); showTable.value = ''; } else { createMessage.error('编辑失败!'); @@ -275,10 +295,12 @@ import { message } from 'ant-design-vue'; }; const resetForm = () => { showTable.value = ''; + DrawingEnd(); }; const handleSelect = (record) => { tableName.value = record.serverId; + applicationName.value = record.applicationName; tableVisible.value = true; keyWord.value = null; keyValue.value = null; @@ -304,6 +326,8 @@ import { message } from 'ant-design-vue'; selectVal.value = record; formState.value = record; showTable.value = 'edit'; + + EditDrawingGeometry(globalMap,record.geom) }; const viewData = (record) => { console.log('record', record); @@ -329,7 +353,14 @@ import { message } from 'ant-design-vue'; }; const fileUrl = ref(''); const fileUrlView: any = ref({}); - const posData = (record) => {}; + + + + const posData = (record) => { + let centerLngLat = GetGeometryCenter(record.geom) + globalMap.flyToPoint(centerLngLat,{radius:500}) + }; + const styleHandle = () => { fileUrl.value = ''; fileUrlView.value = {};