From 615d0a359d04107e745a446a1f28a92695baee5c Mon Sep 17 00:00:00 2001 From: Rain <904416525@qq.com> Date: Tue, 15 Oct 2024 15:35:35 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E9=80=9F=20=E4=B8=AD=E9=93=81=20?= =?UTF-8?q?=E5=A4=A7=E5=B1=8F-mars3d=E5=90=88=E5=B9=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mars3d/MarsBox.vue | 214 ++- src/components/mars3d/MarsBoxarea.vue | 274 ++-- src/router/index.js | 15 + .../constructionManage/projectareaadmin.vue | 2 +- .../constructionManage/projectareaadminer.vue | 395 ++++++ .../quality/businessModule/checkPoint.vue | 1085 ++++---------- .../quality/businessModule/checkPointer.vue | 1262 +++++++++++++++++ src/views/projectFront/quality/businesser.vue | 50 + 8 files changed, 2358 insertions(+), 939 deletions(-) create mode 100644 src/views/projectFront/constructionManage/projectareaadminer.vue create mode 100644 src/views/projectFront/quality/businessModule/checkPointer.vue create mode 100644 src/views/projectFront/quality/businesser.vue diff --git a/src/components/mars3d/MarsBox.vue b/src/components/mars3d/MarsBox.vue index cc62e4d5..93a84188 100644 --- a/src/components/mars3d/MarsBox.vue +++ b/src/components/mars3d/MarsBox.vue @@ -1,12 +1,14 @@ @@ -77,7 +105,14 @@ export default { // 选中自定义图形 marsheader: "1", // 共用参数-1-项目/2-区域 - publicparameters: "1" + publicparameters: "1", + // 获取经纬度-开关 + latlntswtich: "", + // 经纬度 + latlntdata: { + lat: "", + latlntdata: "" + } }; }, mounted() { @@ -114,6 +149,7 @@ export default { // navigationHelpButton: true, // 帮助按钮 // fullscreenButton: true, // 全屏按钮 contextmenu: { hasDefault: true } // 右键菜单 + // locationBar: true, }, // terrain: { // url: "//data.mars3d.cn/terrain", @@ -132,14 +168,22 @@ export default { ] }); - if (this.$parent.cardForm.configValue) { + const locationBar = new mars3d.control.LocationBar({ + template: + "
经度:{lng}
纬度:{lat}
海拔：{alt}米
层级：{level}
方向：{heading}度
俯仰角：{pitch}度
视高：{cameraHeight}米
帧率：{fps} FPS
" + }); + + // 添加控件到地图 + this.map.addControl(locationBar); + + if (this.$parent.$parent.cardForm.configValue) { console.log( "this.$parent.cardForm.configValue", - this.$parent.cardForm.configValue + this.$parent.$parent.cardForm.configValue ); console.log( "this.$parent.cardForm.configValue", - JSON.parse(this.$parent.cardForm.configValue, null, 2) + JSON.parse(this.$parent.$parent.cardForm.configValue, null, 2) ); // 绘制过区域 // const geojsonData = { @@ -197,7 +241,7 @@ export default { this.graphicLayer = new mars3d.layer.GraphicLayer(); this.map.addLayer(this.graphicLayer); - let a = JSON.parse(this.$parent.cardForm.configValue, null, 2); + let a = JSON.parse(this.$parent.$parent.cardForm.configValue, null, 2); console.log("a", a); console.log("a.geojsonData", a.geojsonData); console.log("a.features", a.features); @@ -215,14 +259,39 @@ export default { this.graphicLayer = new mars3d.layer.GraphicLayer(); this.map.addLayer(this.graphicLayer); } - // this.bindLayerPopup(); this.bindGraphicClick(); + + // 绑定地图点击事件 + this.map.on(mars3d.EventType.click, this.handleMapClick); }, methods: { + // 处理地图点击事件 + handleMapClick(event) { + const position = event.position; // 获取点击位置的屏幕坐标 (x, y) + const cartesian = this.map.scene.globe.pick( + this.map.camera.getPickRay(position), + this.map.scene + ); // 获取点击位置的笛卡尔坐标 + + if (cartesian) { + const cartographic = mars3d.Cesium.Cartographic.fromCartesian( + cartesian + ); // 转换为地理坐标 + const longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude); // 转换为经度 + const latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude); // 转换为纬度 + const altitude = cartographic.height; // 获取海拔高度 + + console.log(`经度: ${longitude}, 纬度: ${latitude}, 海拔: ${altitude}`); + + // 这里可以根据需要将经纬度信息显示在界面上 + // 例如：this.showCoordinates(longitude, latitude, altitude); + } + }, + // 通知父组件关闭 onclonemap() { - this.$parent.onMarsBoxMap(); + this.$parent.$parent.onMarsBoxMap(); }, addDemoGraphic14(item) { @@ -260,7 +329,7 @@ export default { // maxPointNum: 2, //可以限定最大点数，2个点绘制后自动结束 // hasMidPoint: false, style: { - color: "#3d6397", + color: "#93a9cc", width: 3, clampToGround: false, dashArray: [10, 5], // 设置虚线样式，10表示实线长度，5表示空白长度 @@ -327,10 +396,9 @@ export default { // 更新图形样式 updateGraphicStyle() { - console.log("this.selectedGraphic", this.selectedGraphic); - console.log("this.selectedGraphic.id", this.selectedGraphic.id); - if (this.selectedGraphic) { + console.log("this.selectedGraphic", this.selectedGraphic); + console.log("this.selectedGraphic.id", this.selectedGraphic.id); this.selectedGraphic.style.color = this.itemdata.fillColor; this.selectedGraphic.style.label.color = this.itemdata.textColor; this.selectedGraphic.style.label.text = this.itemdata.texttitle; // 修正这里 @@ -365,78 +433,84 @@ export default { // 删除 deleteSelectedGraphic() { if (this.selectedGraphic) { + this.updateGraphicStyle(); this.graphicLayer.removeGraphic(this.selectedGraphic); this.selectedGraphic = null; + this.itemdata = {}; } }, // 保存区域 saveArea() { - this.updateGraphicStyle(); + if (this.graphicLayer) { + this.updateGraphicStyle(); - const graphics = this.graphicLayer.getGraphics(); - const features = graphics - .map(graphic => { - const geometry = graphic.positions; // 获取图形的坐标点 - console.log("图形坐标点:", geometry); // 调试信息 + const graphics = this.graphicLayer.getGraphics(); + const features = graphics + .map(graphic => { + const geometry = graphic.positions; // 获取图形的坐标点 + console.log("图形坐标点:", geometry); // 调试信息 - // 将笛卡尔坐标转换为经纬度坐标 - const positions = geometry.map(point => { - const cartographic = Cesium.Cartographic.fromCartesian(point); - return [ - Cesium.Math.toDegrees(cartographic.longitude), - Cesium.Math.toDegrees(cartographic.latitude) - ]; - }); + // 将笛卡尔坐标转换为经纬度坐标 + const positions = geometry.map(point => { + const cartographic = Cesium.Cartographic.fromCartesian(point); + return [ + Cesium.Math.toDegrees(cartographic.longitude), + Cesium.Math.toDegrees(cartographic.latitude) + ]; + }); - const properties = { - id: graphic.attr.id, - description: graphic.attr.description, - fillColor: graphic.style.color, - textColor: graphic.style.label.color, - texttitle: graphic.style.label.text - }; - - // 根据图形的类型（如多边形、线等）创建相应的GeoJSON几何对象 - let geoJSONGeometry; - - if (graphic.type === "polygonP") { - geoJSONGeometry = { - type: "polygon", - coordinates: [positions] + const properties = { + id: graphic.attr.id, + description: graphic.attr.description, + fillColor: graphic.style.color, + textColor: graphic.style.label.color, + texttitle: graphic.style.label.text }; - } else if (graphic.type === "polygon") { - geoJSONGeometry = { - type: "Polygon", - coordinates: [positions] + + // 根据图形的类型（如多边形、线等）创建相应的GeoJSON几何对象 + let geoJSONGeometry; + + if (graphic.type === "polygonP") { + geoJSONGeometry = { + type: "polygon", + coordinates: [positions] + }; + } else if (graphic.type === "polygon") { + geoJSONGeometry = { + type: "Polygon", + coordinates: [positions] + }; + } else if (graphic.type === "polyline") { + geoJSONGeometry = { + type: "LineString", + coordinates: positions + }; + } else { + // 其他类型的图形处理 + return null; + } + + return { + type: "Feature", + geometry: geoJSONGeometry, + properties: properties }; - } else if (graphic.type === "polyline") { - geoJSONGeometry = { - type: "LineString", - coordinates: positions - }; - } else { - // 其他类型的图形处理 - return null; - } + }) + .filter(feature => feature !== null); // 过滤掉无效的图形 - return { - type: "Feature", - geometry: geoJSONGeometry, - properties: properties - }; - }) - .filter(feature => feature !== null); // 过滤掉无效的图形 + const geoJSON = { + type: "FeatureCollection", + features: features + }; - const geoJSON = { - type: "FeatureCollection", - features: features - }; + console.log("导出的GeoJSON数据", JSON.stringify(geoJSON, null, 2)); - console.log("导出的GeoJSON数据", JSON.stringify(geoJSON, null, 2)); - - this.$parent.cardForm.configValue = JSON.stringify(geoJSON); - // this.onclonemap(); - this.$parent.saveCardFncon(); + this.$parent.$parent.cardForm.configValue = JSON.stringify(geoJSON); + // this.onclonemap(); + this.$parent.$parent.saveCardFncon(); + } else { + this.$parent.$parent.MarsBoxSwtich = false; + } } }, beforeDestroy() { diff --git a/src/components/mars3d/MarsBoxarea.vue b/src/components/mars3d/MarsBoxarea.vue index 48bf72a5..dc11c962 100644 --- a/src/components/mars3d/MarsBoxarea.vue +++ b/src/components/mars3d/MarsBoxarea.vue @@ -1,10 +1,11 @@ @@ -75,10 +104,18 @@ export default { // 唯一值 datatitle: 1, // 选中自定义图形 - marsheader: "1" + marsheader: "1", + // 获取经纬度-开关 + latlntswtich: false, + // 经纬度 + latlntdata: { + lat: "", + lon: "" + } }; }, mounted() { + console.log("====================加载地图======================"); this.mars3dContainer = this.$refs.mars3dContainer; // 初始化Mars3D地图 this.map = new mars3d.Map(this.mars3dContainer, { @@ -111,7 +148,8 @@ export default { // sceneModePicker: true, // 二三维切换按钮 // navigationHelpButton: true, // 帮助按钮 // fullscreenButton: true, // 全屏按钮 - contextmenu: { hasDefault: true } // 右键菜单 + contextmenu: { hasDefault: true }, // 右键菜单 + locationBar: true }, // terrain: { // url: "//data.mars3d.cn/terrain", @@ -130,17 +168,32 @@ export default { ] }); - if (this.$parent.MarsBoxareadata) { + // 获取locationBar控件的DOM元素 + // var locationBarElement = document.querySelector(".mars3d-com"); + + // // 如果元素存在，则调整其位置 + // if (locationBarElement) { + // locationBarElement.style.position = "absolute"; + // locationBarElement.style.top = "-200px"; // 将位置往上移动200px + // } + + // const locationBar = new mars3d.control.LocationBar({ + // template: + // "
经度:{lng}
纬度:{lat}
海拔：{alt}米
层级：{level}
方向：{heading}度
俯仰角：{pitch}度
视高：{cameraHeight}米
帧率：{fps} FPS
", + // }); + // this.map.addControl(locationBar); + + if (this.$parent.$parent.MarsBoxareadata) { console.log("this.$parent.MarsBoxareadata", this.$parent.MarsBoxareadata); console.log( "this.$parent.MarsBoxareadata", - JSON.parse(this.$parent.MarsBoxareadata, null, 2) + JSON.parse(this.$parent.$parent.MarsBoxareadata, null, 2) ); this.graphicLayer = new mars3d.layer.GraphicLayer(); this.map.addLayer(this.graphicLayer); - let a = JSON.parse(this.$parent.MarsBoxareadata, null, 2); + let a = JSON.parse(this.$parent.$parent.MarsBoxareadata, null, 2); console.log("a.geojsonData.features.length > 1", a.features.length > 0); if (a.features.length > 0) { @@ -159,11 +212,46 @@ export default { // this.bindLayerPopup(); this.bindGraphicClick(); + + // 绑定地图点击事件 + this.map.on(mars3d.EventType.click, this.handleMapClick); }, methods: { + // 保存经纬度 + onlatlnt() { + this.$parent.$parent.onsetlatlnt({ + lon: this.latlntdata.lon, + lat: this.latlntdata.lat + }); + }, + // 处理地图点击事件 + handleMapClick(event) { + const position = event.position; // 获取点击位置的屏幕坐标 (x, y) + const cartesian = this.map.scene.globe.pick( + this.map.camera.getPickRay(position), + this.map.scene + ); // 获取点击位置的笛卡尔坐标 + + if (cartesian) { + const cartographic = mars3d.Cesium.Cartographic.fromCartesian( + cartesian + ); // 转换为地理坐标 + const longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude); // 转换为经度 + const latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude); // 转换为纬度 + const altitude = cartographic.height; // 获取海拔高度 + + console.log(`经度: ${longitude}, 纬度: ${latitude}, 海拔: ${altitude}`); + this.latlntdata.lat = latitude; + this.latlntdata.lon = longitude; + + // 这里可以根据需要将经纬度信息显示在界面上 + // 例如：this.showCoordinates(longitude, latitude, altitude); + } + }, + // 通知父组件关闭 onclonemap() { - this.$parent.onclose(); + this.$parent.$parent.onclose(); }, addDemoGraphic14(item) { @@ -201,7 +289,7 @@ export default { // maxPointNum: 2, //可以限定最大点数，2个点绘制后自动结束 // hasMidPoint: false, style: { - color: "#3d6397", + color: "#93a9cc", width: 3, clampToGround: false, materialType: mars3d.MaterialType.PolylineDash, // 设置材质类型为虚线 @@ -268,10 +356,10 @@ export default { // 更新图形样式 updateGraphicStyle() { - console.log("this.selectedGraphic", this.selectedGraphic); - console.log("this.selectedGraphic.id", this.selectedGraphic.id); - if (this.selectedGraphic) { + console.log("this.selectedGraphic", this.selectedGraphic); + console.log("this.selectedGraphic.id", this.selectedGraphic.id); + this.selectedGraphic.style.color = this.itemdata.fillColor; this.selectedGraphic.style.label.color = this.itemdata.textColor; this.selectedGraphic.style.label.text = this.itemdata.texttitle; // 修正这里 @@ -306,94 +394,108 @@ export default { // 删除 deleteSelectedGraphic() { if (this.selectedGraphic) { + this.updateGraphicStyle(); + this.graphicLayer.removeGraphic(this.selectedGraphic); this.selectedGraphic = null; + this.itemdata = {}; } }, // 保存区域 saveArea() { - this.updateGraphicStyle(); + if (this.graphicLayer) { + this.updateGraphicStyle(); - const graphics = this.graphicLayer.getGraphics(); - const features = graphics - .map(graphic => { - const geometry = graphic.positions; // 获取图形的坐标点 - console.log("图形坐标点:", geometry); // 调试信息 + const graphics = this.graphicLayer.getGraphics(); + const features = graphics + .map(graphic => { + const geometry = graphic.positions; // 获取图形的坐标点 + console.log("图形坐标点:", geometry); // 调试信息 - // 将笛卡尔坐标转换为经纬度坐标 - const positions = geometry.map(point => { - const cartographic = Cesium.Cartographic.fromCartesian(point); - return [ - Cesium.Math.toDegrees(cartographic.longitude), - Cesium.Math.toDegrees(cartographic.latitude) - ]; - }); + // 将笛卡尔坐标转换为经纬度坐标 + const positions = geometry.map(point => { + const cartographic = Cesium.Cartographic.fromCartesian(point); + return [ + Cesium.Math.toDegrees(cartographic.longitude), + Cesium.Math.toDegrees(cartographic.latitude) + ]; + }); - const properties = { - id: graphic.attr.id, - description: graphic.attr.description, - fillColor: graphic.style.color, - textColor: graphic.style.label.color, - texttitle: graphic.style.label.text - }; - - // 根据图形的类型（如多边形、线等）创建相应的GeoJSON几何对象 - let geoJSONGeometry; - console.log("graphic.type", graphic.type); - - if (graphic.type === "polygonP") { - geoJSONGeometry = { - type: "polygon", - coordinates: [positions] + const properties = { + id: graphic.attr.id, + description: graphic.attr.description, + fillColor: graphic.style.color, + textColor: graphic.style.label.color, + texttitle: graphic.style.label.text }; - } else if (graphic.type === "polygon") { - geoJSONGeometry = { - type: "Polygon", - coordinates: [positions] + + // 根据图形的类型（如多边形、线等）创建相应的GeoJSON几何对象 + let geoJSONGeometry; + console.log("graphic.type", graphic.type); + + if (graphic.type === "polygonP") { + geoJSONGeometry = { + type: "polygon", + coordinates: [positions] + }; + } else if (graphic.type === "polygon") { + geoJSONGeometry = { + type: "Polygon", + coordinates: [positions] + }; + } else if (graphic.type === "polyline") { + geoJSONGeometry = { + type: "LineString", + coordinates: positions + }; + } else { + // 其他类型的图形处理 + return null; + } + + return { + type: "Feature", + geometry: geoJSONGeometry, + properties: properties }; - } else if (graphic.type === "polyline") { - geoJSONGeometry = { - type: "LineString", - coordinates: positions - }; - } else { - // 其他类型的图形处理 - return null; - } + }) + .filter(feature => feature !== null); // 过滤掉无效的图形 - return { - type: "Feature", - geometry: geoJSONGeometry, - properties: properties - }; - }) - .filter(feature => feature !== null); // 过滤掉无效的图形 + const geoJSON = { + type: "FeatureCollection", + features: features + }; - const geoJSON = { - type: "FeatureCollection", - features: features - }; + console.log("导出的GeoJSON数据", JSON.stringify(geoJSON, null, 2)); - console.log("导出的GeoJSON数据", JSON.stringify(geoJSON, null, 2)); + const a = geoJSON.features; + const formattedCoordinates = a + .map(feature => { + return feature.geometry.coordinates + .map(coord => { + return `${coord[0]}|${coord[1]}`; + }) + .join(", "); + }) + .join(", "); - const a = geoJSON.features; - const formattedCoordinates = a - .map(feature => { - return feature.geometry.coordinates - .map(coord => { - return `${coord[0]}|${coord[1]}`; - }) - .join(", "); - }) - .join(", "); + console.log(formattedCoordinates); + this.itemdata = { + // 填充色 + fillColor: "", + // 文字颜色 + textColor: "", + // 填充文字 + texttitle: "" + }; - console.log(formattedCoordinates); - - - this.$parent.MarsBoxareadata = JSON.stringify(geoJSON); - this.$parent.fenceShapedata = formattedCoordinates; - // this.$parent.submit("form"); - this.$parent.MarsBoxSwtich = false; + this.$parent.$parent.MarsBoxareadata = JSON.stringify(geoJSON); + this.$parent.$parent.fenceShapedata = formattedCoordinates; + // this.$parent.submit("form"); + this.$parent.$parent.MarsBoxSwtich = false; + } else { + this.$parent.$parent.MarsBoxSwtich = false; + } } }, beforeDestroy() { diff --git a/src/router/index.js b/src/router/index.js index 04f6141a..86406dac 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -629,6 +629,14 @@ const routes2 = [{ "@/views/projectFront/constructionManage/projectareaadmin.vue" ), }, + // { + // path: "/project/constructionManage/projectareaadminer", + // name: "项目基础信息管理_项目区域管理_绘制", + // component: () => + // import ( + // "@/views/projectFront/constructionManage/projectareaadminer.vue" + // ), + // }, // 施工管理 //施工管理--装置管理 { @@ -1414,6 +1422,13 @@ const routes2 = [{ require(["@/views/projectFront/quality/business.vue"], resolve), }, + { + path: "/project/quality/businesser", //区域管理-绘制 + name: "质量管理_业务中心1", + component: (resolve) => + require(["@/views/projectFront/quality/businesser.vue"], resolve), + }, + { path: "/project/safeSame/business", //安全管理 -- 业务中心 name: "安全管理_业务中心1", diff --git a/src/views/projectFront/constructionManage/projectareaadmin.vue b/src/views/projectFront/constructionManage/projectareaadmin.vue index d922873f..9bd1106d 100644 --- a/src/views/projectFront/constructionManage/projectareaadmin.vue +++ b/src/views/projectFront/constructionManage/projectareaadmin.vue @@ -384,4 +384,4 @@ export default { top: 50%; transform: translate(-50%, -50%); } - \ No newline at end of file + diff --git a/src/views/projectFront/constructionManage/projectareaadminer.vue b/src/views/projectFront/constructionManage/projectareaadminer.vue new file mode 100644 index 00000000..5bdfb214 --- /dev/null +++ b/src/views/projectFront/constructionManage/projectareaadminer.vue @@ -0,0 +1,395 @@ + + + \ No newline at end of file diff --git a/src/views/projectFront/quality/businessModule/checkPoint.vue b/src/views/projectFront/quality/businessModule/checkPoint.vue index 23f38dc6..b7f94db4 100644 --- a/src/views/projectFront/quality/businessModule/checkPoint.vue +++ b/src/views/projectFront/quality/businessModule/checkPoint.vue @@ -1,147 +1,158 @@ diff --git a/src/views/projectFront/quality/businessModule/checkPointer.vue b/src/views/projectFront/quality/businessModule/checkPointer.vue new file mode 100644 index 00000000..8ec62a11 --- /dev/null +++ b/src/views/projectFront/quality/businessModule/checkPointer.vue @@ -0,0 +1,1262 @@ + + + diff --git a/src/views/projectFront/quality/businesser.vue b/src/views/projectFront/quality/businesser.vue new file mode 100644 index 00000000..f391a794 --- /dev/null +++ b/src/views/projectFront/quality/businesser.vue @@ -0,0 +1,50 @@ + + + \ No newline at end of file