diff --git a/src/views/goverment/largeScreen/components/spaceAnalysis.vue b/src/views/goverment/largeScreen/components/spaceAnalysis.vue
index 3633652..436cc54 100644
--- a/src/views/goverment/largeScreen/components/spaceAnalysis.vue
+++ b/src/views/goverment/largeScreen/components/spaceAnalysis.vue
@@ -65,6 +65,7 @@
添加可视域
+ 保存
@@ -126,6 +127,7 @@
添加矩形
添加多边形
+ 保存
@@ -292,7 +294,7 @@ import dayjs from "dayjs";
import { ref, watch, onMounted, computed, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
const props = defineProps(["mapInstance"]);
-const emits = defineEmits(["hiddenConfim"]);
+const emits = defineEmits(["hiddenConfim", "saveJson"]);
const mainMenuShow = ref(true);
const subMenuShow = ref(false);
const sunshineText = ref("播放");
@@ -338,11 +340,13 @@ const menuList = ref([
{ name: "模型压平", icon: new URL("../../../../assets/images/Mars3DIcon/mxyp.png", import.meta.url).href },
{ name: "限高分析", icon: new URL("../../../../assets/images/Mars3DIcon/xgfx.png", import.meta.url).href }
]);
+const clearBool = ref(true);
+const initGraphicLength = ref(0);
let map: any = props.mapInstance;
+let graphicLayer: any;
let measure: any;
let measureVolume: any;
let shadows: any;
-let graphicLayer: any;
let terrainClip: any;
let underground: any;
let slope: any;
@@ -357,6 +361,7 @@ onMounted(() => {
graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer);
// map.scene.globe.depthTestAgainstTerrain = true; // 不加无法投射到地形上
+ initGraphicLength.value = graphicLayer.getGraphics().length;
// 地形开挖
terrainClip = new mars3d.thing.TerrainClip({
diffHeight: allProperty.value.diffHeight, // 井的深度
@@ -391,10 +396,19 @@ onMounted(() => {
});
map.addThing(contourLine);
});
+// 保存配置的图上JSON数据
+const saveJson = async () => {
+ // if (graphicLayer.length == 0) {
+ // ElMessage("当前没有任何数据,无需保存!");
+ // return;
+ // }
+ clearBool.value = false;
+ emits("saveJson", graphicLayer);
+};
// 限定高度--绘制面
const drawheightLimitPoly = () => {
- map.graphicLayer.clear();
- map.graphicLayer.startDraw({
+ graphicLayer.clear();
+ graphicLayer.startDraw({
type: "polygon",
style: {
color: "#ffff00",
@@ -406,15 +420,15 @@ const drawheightLimitPoly = () => {
const positions = graphic.positionsShow;
limitHeight.positions = positions;
- map.graphicLayer.clear();
+ graphicLayer.clear();
console.log("绘制坐标为", JSON.stringify(mars3d.LngLatArray.toArray(positions))); // 方便测试拷贝坐标
}
});
};
// 限定高度--绘制矩形
const drawheightLimitDrawExtent = () => {
- map.graphicLayer.clear();
- map.graphicLayer.startDraw({
+ graphicLayer.clear();
+ graphicLayer.startDraw({
type: "rectangle",
style: {
color: "#ffff00",
@@ -426,7 +440,7 @@ const drawheightLimitDrawExtent = () => {
const positions = graphic.getOutlinePositions(false);
limitHeight.positions = positions;
- map.graphicLayer.clear();
+ graphicLayer.clear();
}
});
};
@@ -436,8 +450,8 @@ const limitHeightOperate = (e: any) => {
};
// 模型压平--绘制多边形
const btnModelFlattenDraw = () => {
- map.graphicLayer.clear();
- map.graphicLayer.startDraw({
+ graphicLayer.clear();
+ graphicLayer.startDraw({
type: "polygon",
style: {
color: "#007be6",
@@ -446,7 +460,7 @@ const btnModelFlattenDraw = () => {
success: function (graphic: any) {
// 绘制成功后回调
const positions = graphic.positionsShow;
- map.graphicLayer.clear();
+ graphicLayer.clear();
console.log("绘制坐标为", JSON.stringify(mars3d.LngLatArray.toArray(positions))); // 方便测试拷贝坐标
@@ -456,8 +470,8 @@ const btnModelFlattenDraw = () => {
};
// 模型压平--绘制矩形
const btnModelFlattenDrawExtent = () => {
- map.graphicLayer.clear();
- map.graphicLayer.startDraw({
+ graphicLayer.clear();
+ graphicLayer.startDraw({
type: "rectangle",
style: {
color: "#007be6",
@@ -467,7 +481,7 @@ const btnModelFlattenDrawExtent = () => {
success: function (graphic: any) {
// 绘制成功后回调
const positions = graphic.getOutlinePositions(false);
- map.graphicLayer.clear();
+ graphicLayer.clear();
console.log("绘制坐标为", JSON.stringify(mars3d.LngLatArray.toArray(positions))); // 方便测试拷贝坐标
@@ -540,7 +554,7 @@ const drawSectionPoly = () => {
success: function (graphic: any) {
// 绘制成功后回调
const positions = graphic.positionsShow;
- map.graphicLayer.clear();
+ graphicLayer.clear();
modelPlanClip.clipOutSide = allProperty.value.clipOutSide;
modelPlanClip.positions = positions;
@@ -562,7 +576,7 @@ const drawSectionLine = () => {
success: function (graphic: any) {
// 绘制成功后回调
const positions = graphic.positionsShow;
- map.graphicLayer.clear();
+ graphicLayer.clear();
modelPlanClip.positions = positions;
}
@@ -581,7 +595,7 @@ const modelSectionOperate = (e: any, label: any) => {
// 图上选中模型
const selectModal = () => {
// 拾取点位
- map.graphicLayer.startDraw({
+ graphicLayer.startDraw({
type: "point",
style: {
color: "#00fff2"
@@ -657,16 +671,20 @@ const surfaceOpacityOperate = (e: any, label: any) => {
};
// 地形开挖---多边形
const btnDraw = () => {
- map.graphicLayer.startDraw({
+ graphicLayer.startDraw({
type: "polygon",
style: {
color: "#007be6",
opacity: 0.5,
outline: false
},
+ attr: {
+ key: "terrainClip",
+ diffHeight: allProperty.value.diffHeight
+ },
success: (graphic: any) => {
const positions = graphic.positionsShow;
- map.graphicLayer.clear();
+ graphicLayer.clear();
console.log(JSON.stringify(mars3d.LngLatArray.toArray(positions))); // 打印下边界
// 挖地区域
@@ -676,15 +694,19 @@ const btnDraw = () => {
};
// 地形开挖---矩形
const btnDrawExtent = () => {
- map.graphicLayer.startDraw({
+ graphicLayer.startDraw({
type: "rectangle",
style: {
color: "#007be6",
- opacity: 0.8
+ opacity: 0
+ },
+ attr: {
+ key: "terrainClip",
+ diffHeight: allProperty.value.diffHeight
},
success: (graphic: any) => {
const positions = graphic.getOutlinePositions(false);
- map.graphicLayer.clear();
+ // graphicLayer.clear();
console.log(JSON.stringify(mars3d.LngLatArray.toArray(positions))); // 打印下边界
@@ -703,7 +725,7 @@ const selectHeight = () => {
ElMessage("请先开始方量分析");
}
// 拾取高度
- map.graphicLayer.startDraw({
+ graphicLayer.startDraw({
type: "point",
style: {
color: "#00fff2"
@@ -711,7 +733,7 @@ const selectHeight = () => {
success: (graphic: any) => {
console.log(666);
const height = graphic.point?.alt;
- map.graphicLayer.removeGraphic(graphic);
+ graphicLayer.removeGraphic(graphic);
if (!height) {
return;
}
@@ -768,7 +790,11 @@ const volumeOperate = (e: any, label: any) => {
const clearShow = () => {
console.log(selectedName.value);
if (selectedName.value == "可视域") {
- graphicLayer.clear();
+ graphicLayer.getGraphics().map(item => {
+ if (item.type == "viewShed") {
+ graphicLayer.removeGraphic(item);
+ }
+ });
} else if (selectedName.value == "方量分析") {
measure.clear();
measureVolume = null;
@@ -819,7 +845,7 @@ const backMainMenu = () => {
} else if (name == "可视域") {
} else if (name == "方量分析") {
} else if (name == "地形开挖") {
- terrainClip.clear(); // 清除挖地区域
+ // terrainClip.clear(); // 清除挖地区域
} else if (name == "地表透明") {
underground.remove(); // 清除地表透明
allProperty.value.enabled = false;
diff --git a/src/views/goverment/largeScreen/index.vue b/src/views/goverment/largeScreen/index.vue
index 8b59ae3..a47c46d 100644
--- a/src/views/goverment/largeScreen/index.vue
+++ b/src/views/goverment/largeScreen/index.vue
@@ -129,7 +129,7 @@
-
+
@@ -466,11 +466,21 @@ onMounted(async () => {
});
// 展示保存的地图标绘配置
const showMapData = (arr: any) => {
+ console.log(arr);
if (arr && arr.length > 0) {
arr.map(item => {
- if (item.type != "fixedRoute") {
- graphicLayer.addGraphic(item);
- console.log("111111111111111");
+ if (item.attr.key == "terrainClip") {
+ // 地形开挖
+ const terrainClip = new mars3d.thing.TerrainClip({
+ diffHeight: item.attr.diffHeight, // 井的深度
+ image: "src/assets/images/Mars3DImg/textures/poly-stone.jpg",
+ imageBottom: "src/assets/images/Mars3DImg/textures/poly-soil.jpg",
+ splitNum: 80, // 井边界插值数
+ enabled: true
+ });
+ const positions = item.points || item.positions;
+ // 挖地区域
+ terrainClip.addArea(positions);
} else if (item.type == "fixedRoute") {
const newRoutePath = new mars3d.graphic.FixedRoute({
id: item.id,
@@ -520,6 +530,9 @@ const showMapData = (arr: any) => {
// 启动漫游
newRoutePath.flyTo();
newRoutePath.start();
+ } else {
+ graphicLayer.addGraphic(item);
+ console.log("111111111111111");
}
});
}
@@ -554,6 +567,22 @@ const saveAddLayer = async (subGraphicLayer: any) => {
ElMessage.success("操作成功");
}
};
+// 单独保存空间分析操作
+const saveAnalysisLayer = async (subGraphicLayer: any) => {
+ const geojson = subGraphicLayer.getGraphics(false);
+ console.log(geojson);
+ let allArr = layerJsonArr.value.concat(geojson);
+ let requestData: any = { configKey: "layerConfig", configValue: JSON.stringify(allArr) };
+ if (layerJsonArr.value.length > 0) {
+ requestData.configId = layerId.value;
+ }
+ console.log(layerJsonArr.value);
+ const res = await updateSystemConfig(requestData);
+ console.log(res);
+ if (res.code == 200) {
+ ElMessage.success("操作成功");
+ }
+};
const qingtianSkybox = new mars3d.GroundSkyBox({
// 晴天天空盒
sources: {