fix: BUG修改
This commit is contained in:
kun
parent
c217c8f020
commit
932193e255
BIN
src/assets/images/Mars3DIcon/dqdh.png
Normal file
BIN
src/assets/images/Mars3DIcon/dqdh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 658 B |
BIN
src/assets/images/Mars3DIcon/dt.png
Normal file
BIN
src/assets/images/Mars3DIcon/dt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/images/Mars3DIcon/dtdy.png
Normal file
BIN
src/assets/images/Mars3DIcon/dtdy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 519 B |
BIN
src/assets/images/Mars3DIcon/fpdb.png
Normal file
BIN
src/assets/images/Mars3DIcon/fpdb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 445 B |
BIN
src/assets/images/Mars3DIcon/fxmy.png
Normal file
BIN
src/assets/images/Mars3DIcon/fxmy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 679 B |
BIN
src/assets/images/Mars3DIcon/gj.png
Normal file
BIN
src/assets/images/Mars3DIcon/gj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 924 B |
BIN
src/assets/images/Mars3DIcon/jldb.png
Normal file
BIN
src/assets/images/Mars3DIcon/jldb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 388 B |
BIN
src/assets/images/Mars3DIcon/kjfx.png
Normal file
BIN
src/assets/images/Mars3DIcon/kjfx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 698 B |
BIN
src/assets/images/Mars3DIcon/lxdh.png
Normal file
BIN
src/assets/images/Mars3DIcon/lxdh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 443 B |
BIN
src/assets/images/Mars3DIcon/sjsq.png
Normal file
BIN
src/assets/images/Mars3DIcon/sjsq.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 509 B |
BIN
src/assets/images/Mars3DIcon/tc.png
Normal file
BIN
src/assets/images/Mars3DIcon/tc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 699 B |
BIN
src/assets/images/Mars3DIcon/tsbh.png
Normal file
BIN
src/assets/images/Mars3DIcon/tsbh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 407 B |
BIN
src/assets/images/Mars3DIcon/tsls.png
Normal file
BIN
src/assets/images/Mars3DIcon/tsls.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 546 B |
BIN
src/assets/images/Mars3DIcon/wdbj.png
Normal file
BIN
src/assets/images/Mars3DIcon/wdbj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 561 B |
BIN
src/assets/images/Mars3DIcon/zbdw.png
Normal file
BIN
src/assets/images/Mars3DIcon/zbdw.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
@ -3,20 +3,20 @@
|
||||
<el-header>
|
||||
<div class="header-lf">
|
||||
<div @click="goHome" class="logo flx-center">
|
||||
<img
|
||||
<!-- <img
|
||||
:src="globalStore.systemConfigLogo ? globalStore.systemConfigLogo : 'src/assets/images/login/china.png'"
|
||||
alt="logo"
|
||||
/>
|
||||
<span>Mars3D综合态势展示系统</span>
|
||||
/> -->
|
||||
<span>佳信捷3D综合态势展示系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-menu">
|
||||
<div @click="backCenter">
|
||||
<img src="@/assets/images/icon/fire.png" alt="" srcset="" />
|
||||
<!-- <img src="@/assets/images/icon/fire.png" alt="" srcset="" /> -->
|
||||
<span>首页</span>
|
||||
</div>
|
||||
<div @click="router.push('/config')">
|
||||
<img src="@/assets/images/icon/fire.png" alt="" srcset="" />
|
||||
<!-- <img src="@/assets/images/icon/fire.png" alt="" srcset="" /> -->
|
||||
<span>信息展示</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -145,7 +145,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, watch } from "vue";
|
||||
import { ref, onMounted, onUnmounted, onBeforeUnmount, watch } from "vue";
|
||||
//引入cesium基础库
|
||||
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
|
||||
import * as Cesium from "mars3d-cesium";
|
||||
@ -258,70 +258,76 @@ const editBaseMapsConfig = async () => {
|
||||
const modelOperate = (e: any, label: any) => {
|
||||
console.log(e);
|
||||
console.log(formData.value);
|
||||
let graphic = graphicLayer.getGraphicById(formData.value.id);
|
||||
// console.log(graphic);
|
||||
let loadJson = {
|
||||
scale: formData.value.scale,
|
||||
heading: formData.value.heading,
|
||||
pitch: formData.value.pitch,
|
||||
roll: formData.value.roll,
|
||||
silhouette: formData.value.silhouette,
|
||||
silhouetteColor: formData.value.silhouetteColor,
|
||||
silhouetteSize: formData.value.silhouetteSize,
|
||||
hasShadows: formData.value.hasShadows,
|
||||
clampToGround: formData.value.clampToGround
|
||||
};
|
||||
graphic.setStyle(loadJson);
|
||||
// layer.style = loadJson;
|
||||
if (graphicLayer) {
|
||||
let graphic = graphicLayer.getGraphicById(formData.value.id);
|
||||
let loadJson = {
|
||||
scale: formData.value.scale,
|
||||
heading: formData.value.heading,
|
||||
pitch: formData.value.pitch,
|
||||
roll: formData.value.roll,
|
||||
silhouette: formData.value.silhouette,
|
||||
silhouetteColor: formData.value.silhouetteColor,
|
||||
silhouetteSize: formData.value.silhouetteSize,
|
||||
hasShadows: formData.value.hasShadows,
|
||||
clampToGround: formData.value.clampToGround
|
||||
};
|
||||
graphic.setStyle(loadJson);
|
||||
// layer.style = loadJson;
|
||||
}
|
||||
};
|
||||
// 线效果操作
|
||||
const lineEffectOperate = (e: any, label: any) => {
|
||||
console.log(e);
|
||||
console.log(formData.value.width);
|
||||
let graphic = graphicLayer.getGraphicById(formData.value.id);
|
||||
console.log(graphic);
|
||||
let loadJson = {
|
||||
width: formData.value.width,
|
||||
materialType: mars3d.MaterialType[formData.value.type],
|
||||
materialOptions: {
|
||||
color: formData.value.color,
|
||||
speed: formData.value.speed,
|
||||
startTime: random(1000, 3000),
|
||||
percent: 0.1,
|
||||
alpha: 0.01
|
||||
console.log(graphicLayer);
|
||||
if (graphicLayer) {
|
||||
let graphic = graphicLayer.getGraphicById(formData.value.id);
|
||||
console.log(graphic);
|
||||
let loadJson = {
|
||||
width: formData.value.width,
|
||||
materialType: mars3d.MaterialType[formData.value.type],
|
||||
materialOptions: {
|
||||
color: formData.value.color,
|
||||
speed: formData.value.speed,
|
||||
startTime: random(1000, 3000),
|
||||
percent: 0.1,
|
||||
alpha: 0.01
|
||||
}
|
||||
};
|
||||
if (formData.value.type == "ODLine") {
|
||||
loadJson.materialOptions.bgColor = formData.value.bgColor;
|
||||
}
|
||||
};
|
||||
if (formData.value.type == "ODLine") {
|
||||
loadJson.materialOptions.bgColor = formData.value.bgColor;
|
||||
// graphic.redraw(loadJson);
|
||||
graphic.setStyle(loadJson);
|
||||
}
|
||||
// graphic.redraw(loadJson);
|
||||
graphic.setStyle(loadJson);
|
||||
};
|
||||
// 点坐标效果操作
|
||||
const pointPositionOperate = (e: any, label: any) => {
|
||||
console.log(formData.value);
|
||||
let graphic = graphicLayer.getGraphicById(formData.value.id);
|
||||
console.log(graphic);
|
||||
let _rotation = Math.random();
|
||||
let loadJson = {
|
||||
radius: formData.value.radius,
|
||||
materialType: mars3d.MaterialType[formData.value.type],
|
||||
materialOptions: {
|
||||
// 扫描材质
|
||||
image: formData.value.type == "CircleScan" ? formData.value.image : "",
|
||||
color: formData.value.color,
|
||||
speed: formData.value.speed
|
||||
},
|
||||
clampToGround: true // 是否贴地
|
||||
};
|
||||
if (formData.value.type == "CircleScan") {
|
||||
loadJson.stRotation = new Cesium.CallbackProperty(function (e) {
|
||||
_rotation += 0.1;
|
||||
return _rotation;
|
||||
}, false);
|
||||
loadJson.classificationType = Cesium.ClassificationType.BOTH;
|
||||
if (graphicLayer) {
|
||||
let graphic = graphicLayer.getGraphicById(formData.value.id);
|
||||
console.log(graphic);
|
||||
let _rotation = Math.random();
|
||||
let loadJson = {
|
||||
radius: formData.value.radius,
|
||||
materialType: mars3d.MaterialType[formData.value.type],
|
||||
materialOptions: {
|
||||
// 扫描材质
|
||||
image: formData.value.type == "CircleScan" ? formData.value.image : "",
|
||||
color: formData.value.color,
|
||||
speed: formData.value.speed
|
||||
},
|
||||
clampToGround: true // 是否贴地
|
||||
};
|
||||
if (formData.value.type == "CircleScan") {
|
||||
loadJson.stRotation = new Cesium.CallbackProperty(function (e) {
|
||||
_rotation += 0.1;
|
||||
return _rotation;
|
||||
}, false);
|
||||
loadJson.classificationType = Cesium.ClassificationType.BOTH;
|
||||
}
|
||||
graphic.setStyle(loadJson);
|
||||
}
|
||||
graphic.setStyle(loadJson);
|
||||
};
|
||||
let initCenter: any; // 初始中心经纬度
|
||||
let requestNum: number = 0; // 请求中心点次数
|
||||
@ -669,6 +675,19 @@ const initMars3d = (option: any) => {
|
||||
}, 200);
|
||||
}
|
||||
};
|
||||
onBeforeUnmount(async () => {
|
||||
// if (props.type == "底图") {
|
||||
// await getBaseMapsInfo();
|
||||
// } else if (props.type == "白膜") {
|
||||
// await getAlbugineaInfo();
|
||||
// } else if (props.type == "点坐标效果") {
|
||||
// await getPointPositionInfo();
|
||||
// } else if (props.type == "线效果") {
|
||||
// await getLineEffectInfo();
|
||||
// } else if (props.type == "模型") {
|
||||
// await getModelInfo();
|
||||
// }
|
||||
});
|
||||
onMounted(async () => {
|
||||
if (props.type == "底图") {
|
||||
await getBaseMapsInfo();
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
<el-header>
|
||||
<div class="header-lf">
|
||||
<div @click="goHome" class="logo flx-center">
|
||||
<img
|
||||
<!-- <img
|
||||
:src="globalStore.systemConfigLogo ? globalStore.systemConfigLogo : 'src/assets/images/login/china.png'"
|
||||
alt="logo"
|
||||
/>
|
||||
<span>Mars3D综合态势展示系统</span>
|
||||
/> -->
|
||||
<span>佳信捷3D综合态势展示系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<ToolBarRight />
|
||||
|
||||
@ -246,6 +246,14 @@ const closeDiv = () => {
|
||||
};
|
||||
onMounted(() => {
|
||||
console.log(map, "66666");
|
||||
const point = map.getCenter();
|
||||
point.format();
|
||||
currJD = point.lng;
|
||||
currWD = point.lat;
|
||||
currGD = point.alt;
|
||||
allProperty.value.jd = marsUtilFormtNum(currJD, 6);
|
||||
allProperty.value.wd = marsUtilFormtNum(currWD, 6);
|
||||
allProperty.value.alt = marsUtilFormtNum(currGD, 6);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
map = null;
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
</div>
|
||||
<div class="item-classify-item">
|
||||
<span>时间选择：</span>
|
||||
<el-slider v-model="allProperty.timeVal" :min="0" :max="1440" :step="1" @change="timeChange" />
|
||||
<el-slider v-model="allProperty.timeVal" :min="0" :max="1440" :step="1" @input="timeChange" />
|
||||
</div>
|
||||
<div class="item-classify-item">
|
||||
<span>当前时间：</span>
|
||||
@ -48,19 +48,19 @@
|
||||
<div class="item-classify">
|
||||
<div class="item-classify-item">
|
||||
<span>四周方向：</span>
|
||||
<el-slider v-model="allProperty.heading" :max="360" @change="e => viewShedOperate(e, 'heading')" />
|
||||
<el-slider v-model="allProperty.heading" :max="360" @input="e => viewShedOperate(e, 'heading')" />
|
||||
</div>
|
||||
<div class="item-classify-item">
|
||||
<span>视角距离：</span>
|
||||
<el-slider v-model="allProperty.distance" :step="10" :max="5000" @change="e => viewShedOperate(e, 'distance')" />
|
||||
<el-slider v-model="allProperty.distance" :step="10" :max="5000" @input="e => viewShedOperate(e, 'distance')" />
|
||||
</div>
|
||||
<div class="item-classify-item">
|
||||
<span>透明度：</span>
|
||||
<el-slider v-model="allProperty.opacity" :step="0.1" :max="1" @change="e => viewShedOperate(e, 'opacity')" />
|
||||
<el-slider v-model="allProperty.opacity" :step="0.1" :max="1" @input="e => viewShedOperate(e, 'opacity')" />
|
||||
</div>
|
||||
<div class="item-classify-item">
|
||||
<span>视椎线框：</span>
|
||||
<el-switch v-model="allProperty.showFrustum" @change="e => viewShedOperate(e, 'showFrustum')" />
|
||||
<el-switch v-model="allProperty.showFrustum" @input="e => viewShedOperate(e, 'showFrustum')" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sunshing-play">
|
||||
@ -79,6 +79,7 @@
|
||||
<div class="item-classify-item">
|
||||
<span>基准面高(米)：</span>
|
||||
<el-input-number v-model="allProperty.height" controls-position="right" @change="e => volumeOperate(e, 'height')" />
|
||||
<el-button v-if="allProperty.height != 0" type="primary" @click="selectHeight">点选高度</el-button>
|
||||
</div>
|
||||
<div class="item-classify-item">
|
||||
<span>围墙底高(米)：</span>
|
||||
@ -101,7 +102,6 @@
|
||||
</div>
|
||||
<div class="volume-operate">
|
||||
<el-button type="primary" @click="addVolume">绘制区域</el-button>
|
||||
<el-button type="primary" @click="selectHeight">点选高度</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地形开挖 -->
|
||||
@ -145,7 +145,7 @@
|
||||
</div>
|
||||
<div class="item-classify-item">
|
||||
<span>透明度：</span>
|
||||
<el-slider v-model="allProperty.alpha" :step="0.1" :max="1" @change="e => surfaceOpacityOperate(e, 'alpha')" />
|
||||
<el-slider v-model="allProperty.alpha" :step="0.1" :max="1" @input="e => surfaceOpacityOperate(e, 'alpha')" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -264,7 +264,7 @@
|
||||
</div> -->
|
||||
<div class="item-classify-item">
|
||||
<span>限制高度：</span>
|
||||
<el-slider v-model="allProperty.limitHeight" :max="1000" @change="limitHeightOperate" />
|
||||
<el-slider v-model="allProperty.limitHeight" :max="1000" @input="limitHeightOperate" />
|
||||
</div>
|
||||
<div class="item-classify-item">
|
||||
<span>当前高度：</span>
|
||||
@ -354,6 +354,18 @@ const hours = computed(() => Math.floor(allProperty.value.timeVal / 60));
|
||||
const minutes = computed(() => Math.floor(allProperty.value.timeVal / 60));
|
||||
onMounted(() => {
|
||||
console.log(map, "66666");
|
||||
graphicLayer = new mars3d.layer.GraphicLayer();
|
||||
map.addLayer(graphicLayer);
|
||||
map.scene.globe.depthTestAgainstTerrain = true; // 不加无法投射到地形上
|
||||
// 地形开挖
|
||||
terrainClip = new mars3d.thing.TerrainClip({
|
||||
diffHeight: allProperty.value.diffHeight, // 井的深度
|
||||
image: "src/assets/images/Mars3DImg/textures/poly-stone.jpg",
|
||||
imageBottom: "src/assets/images/Mars3DImg/textures/poly-soil.jpg",
|
||||
splitNum: 80, // 井边界插值数
|
||||
enabled: true
|
||||
});
|
||||
map.addThing(terrainClip);
|
||||
measure = new mars3d.thing.Measure({
|
||||
label: {
|
||||
color: "#ffffff",
|
||||
@ -371,53 +383,6 @@ onMounted(() => {
|
||||
measure.on(mars3d.EventType.end, function (e: any) {
|
||||
console.log(e);
|
||||
});
|
||||
// 日照分析
|
||||
shadows = new mars3d.thing.Shadows({
|
||||
multiplier: 1600
|
||||
});
|
||||
map.addThing(shadows);
|
||||
shadows.on(mars3d.EventType.change, function (e: any) {
|
||||
allProperty.value.timeVal = shadows.time.getHours() * 60 + shadows.time.getMinutes();
|
||||
});
|
||||
// 可视域分析
|
||||
map.scene.globe.depthTestAgainstTerrain = true; // 不加无法投射到地形上
|
||||
graphicLayer = new mars3d.layer.GraphicLayer();
|
||||
map.addLayer(graphicLayer);
|
||||
// 地形开挖
|
||||
terrainClip = new mars3d.thing.TerrainClip({
|
||||
diffHeight: allProperty.value.diffHeight, // 井的深度
|
||||
image: "images/Mars3DImg/textures/poly-stone.jpg",
|
||||
imageBottom: "images/Mars3DImg/textures/poly-soil.jpg",
|
||||
splitNum: 80 // 井边界插值数
|
||||
});
|
||||
map.addThing(terrainClip);
|
||||
// 地下透明
|
||||
map.scene.contextOptions = { webgl: { alpha: true } };
|
||||
underground = new mars3d.thing.Underground({
|
||||
alpha: 0.5
|
||||
});
|
||||
map.addThing(underground);
|
||||
// 坡度坡向
|
||||
slope = new mars3d.thing.Slope({
|
||||
arrow: {
|
||||
scale: 0.3, // 箭头长度的比例（范围0.1-0.9）
|
||||
color: Cesium.Color.YELLOW,
|
||||
width: 15, // 箭头宽度
|
||||
// materialType: mars3d.MaterialType.LineFlow,
|
||||
// materialOptions: {
|
||||
// color: "#1a9850",
|
||||
// image: "img/textures/line-arrow-right.png",
|
||||
// speed: 10
|
||||
// },
|
||||
// clampToGround: true,
|
||||
show: true
|
||||
},
|
||||
tooltip: function (event) {
|
||||
const attr = event.graphic?.attr;
|
||||
return `坡度: ${attr.slopeStr1} (${attr.slopeStr2})<br />坡向: ${attr.direction}°`;
|
||||
}
|
||||
});
|
||||
map.addThing(slope);
|
||||
// 渲染效果
|
||||
contourLine = new mars3d.thing.ContourLine({
|
||||
contourShow: false, // 是否显示等高线
|
||||
@ -425,41 +390,6 @@ onMounted(() => {
|
||||
shadingAlpha: 0.6 /// 地表渲染的透明度
|
||||
});
|
||||
map.addThing(contourLine);
|
||||
// 模型剖切
|
||||
map.scene.center = { lat: 31.841619, lng: 117.140395, alt: 1259, heading: 90, pitch: -51 };
|
||||
// 加模型
|
||||
const graphic = new mars3d.graphic.ModelPrimitive({
|
||||
position: [117.150365, 31.841954, 50.26],
|
||||
style: {
|
||||
url: "//data.mars3d.cn/gltf/mars/dikuai/d1.gltf",
|
||||
scale: 1
|
||||
}
|
||||
});
|
||||
graphicLayer.addGraphic(graphic);
|
||||
modelPlanClip = new mars3d.thing.ModelPlanClip({
|
||||
graphic: graphic,
|
||||
height: 1, // 开挖的深度
|
||||
clipOutSide: false,
|
||||
edgeColor: Cesium.Color.GREY,
|
||||
edgeWidth: 2.0
|
||||
});
|
||||
map.addThing(modelPlanClip);
|
||||
// 限高分析
|
||||
map.fixedLight = true; // 固定光照，避免gltf模型随时间存在亮度不一致。
|
||||
// 限高分析类
|
||||
limitHeight = new mars3d.thing.LimitHeight({
|
||||
color: "rgba(255,0,0,0.5)",
|
||||
height: 80, // 限高
|
||||
bottomHeight: 32, // 模型地面的海拔高度（单位：米）
|
||||
positions: [
|
||||
[117.210446, 31.829032, 0],
|
||||
[117.226334, 31.826662, 0],
|
||||
[117.226694, 31.807882, 0],
|
||||
[117.209776, 31.808359, 0],
|
||||
[117.209778, 31.808341, 0]
|
||||
]
|
||||
});
|
||||
map.addThing(limitHeight);
|
||||
});
|
||||
// 限定高度--绘制面
|
||||
const drawheightLimitPoly = () => {
|
||||
@ -668,7 +598,9 @@ const slopeAspectOperate = (e: any, label: any) => {
|
||||
};
|
||||
// 绘制多边形坡向坡度
|
||||
const btnSlopeAspectDraw = () => {
|
||||
map.graphicLayer.startDraw({
|
||||
slope.clear();
|
||||
contourLine.clear();
|
||||
graphicLayer.startDraw({
|
||||
type: "polygon",
|
||||
style: {
|
||||
color: "#29cf34",
|
||||
@ -695,7 +627,9 @@ const btnSlopeAspectDraw = () => {
|
||||
};
|
||||
// 绘制矩形坡向坡度
|
||||
const btnSlopeAspectDrawExtent = () => {
|
||||
map.graphicLayer.startDraw({
|
||||
slope.clear();
|
||||
contourLine.clear();
|
||||
graphicLayer.startDraw({
|
||||
type: "rectangle",
|
||||
style: {
|
||||
color: "#007be6",
|
||||
@ -723,18 +657,19 @@ const surfaceOpacityOperate = (e: any, label: any) => {
|
||||
};
|
||||
// 地形开挖---多边形
|
||||
const btnDraw = () => {
|
||||
map.graphicLayer.startDraw({
|
||||
graphicLayer.startDraw({
|
||||
type: "polygon",
|
||||
style: {
|
||||
color: "#007be6",
|
||||
opacity: 0.8
|
||||
opacity: 0.5,
|
||||
outline: false
|
||||
},
|
||||
success: (graphic: any) => {
|
||||
const positions = graphic.positionsShow;
|
||||
map.graphicLayer.clear();
|
||||
|
||||
console.log(JSON.stringify(mars3d.LngLatArray.toArray(positions))); // 打印下边界
|
||||
|
||||
console.log(positions);
|
||||
// 挖地区域
|
||||
const areaItem = terrainClip.addArea(positions);
|
||||
}
|
||||
@ -746,12 +681,11 @@ const btnDrawExtent = () => {
|
||||
type: "rectangle",
|
||||
style: {
|
||||
color: "#007be6",
|
||||
opacity: 0.5,
|
||||
outline: false
|
||||
opacity: 0.8
|
||||
},
|
||||
success: (graphic: any) => {
|
||||
const positions = graphic.getOutlinePositions(false);
|
||||
map.graphicLayer.clear();
|
||||
graphicLayer.clear();
|
||||
|
||||
console.log(JSON.stringify(mars3d.LngLatArray.toArray(positions))); // 打印下边界
|
||||
|
||||
@ -833,17 +767,23 @@ const volumeOperate = (e: any, label: any) => {
|
||||
};
|
||||
// 清楚地图指定效果
|
||||
const clearShow = () => {
|
||||
console.log(selectedName.value);
|
||||
if (selectedName.value == "可视域") {
|
||||
graphicLayer.clear();
|
||||
} else if (selectedName.value == "方量分析") {
|
||||
measure.clear();
|
||||
measureVolume = null;
|
||||
} else if (selectedName.value == "坡向坡度") {
|
||||
} else if (selectedName.value == "地形开挖") {
|
||||
terrainClip.clear();
|
||||
} else if (selectedName.value == "坡度坡向") {
|
||||
slope.clear();
|
||||
contourLine.clear();
|
||||
} else if (selectedName.value == "模型压平") {
|
||||
console.log(tilesetLayer);
|
||||
tilesetLayer && tilesetLayer.remove(true);
|
||||
} else if (selectedName.value == "限高分析") {
|
||||
limitHeight.clear();
|
||||
map.graphicLayer.clear();
|
||||
graphicLayer.clear();
|
||||
}
|
||||
};
|
||||
// 添加可视域
|
||||
@ -871,6 +811,21 @@ const viewShedOperate = (e: any, label: any) => {
|
||||
};
|
||||
// 返回主菜单
|
||||
const backMainMenu = () => {
|
||||
const name = selectedName.value;
|
||||
console.log(name);
|
||||
if (name == "日照分析") {
|
||||
shadows.remove(true);
|
||||
} else if (name == "可视域") {
|
||||
} else if (name == "方量分析") {
|
||||
} else if (name == "地形开挖") {
|
||||
terrainClip.clear(); // 清除挖地区域
|
||||
} else if (name == "地表透明") {
|
||||
} else if (name == "坡度坡向") {
|
||||
} else if (name == "模型剖切") {
|
||||
} else if (name == "模型压平") {
|
||||
tilesetLayer && tilesetLayer.remove(true);
|
||||
} else if (name == "限高分析") {
|
||||
}
|
||||
mainMenuShow.value = true;
|
||||
subMenuShow.value = false;
|
||||
};
|
||||
@ -902,15 +857,83 @@ const closeDiv = () => {
|
||||
const mapOperate = (name: any) => {
|
||||
console.log(name);
|
||||
selectedName.value = name;
|
||||
if (name == "空间距离") {
|
||||
} else if (name == "贴地距离") {
|
||||
} else if (name == "剖面") {
|
||||
} else if (name == "水平面积") {
|
||||
} else if (name == "贴地面积") {
|
||||
} else if (name == "角度") {
|
||||
} else if (name == "三角测量") {
|
||||
} else if (name == "坐标测量") {
|
||||
} else if (name == "高度差") {
|
||||
if (name == "日照分析") {
|
||||
shadows = new mars3d.thing.Shadows({
|
||||
multiplier: 1600
|
||||
});
|
||||
map.addThing(shadows);
|
||||
shadows.on(mars3d.EventType.change, function (e: any) {
|
||||
allProperty.value.timeVal = shadows.time.getHours() * 60 + shadows.time.getMinutes();
|
||||
});
|
||||
} else if (name == "可视域") {
|
||||
map.addLayer(graphicLayer);
|
||||
} else if (name == "方量分析") {
|
||||
} else if (name == "地形开挖") {
|
||||
} else if (name == "地表透明") {
|
||||
// 地下透明
|
||||
map.scene.contextOptions = { webgl: { alpha: true } };
|
||||
underground = new mars3d.thing.Underground({
|
||||
enabled: false
|
||||
});
|
||||
map.addThing(underground);
|
||||
} else if (name == "坡度坡向") {
|
||||
slope = new mars3d.thing.Slope({
|
||||
arrow: {
|
||||
scale: 0.3, // 箭头长度的比例（范围0.1-0.9）
|
||||
color: Cesium.Color.YELLOW,
|
||||
width: 15, // 箭头宽度
|
||||
// materialType: mars3d.MaterialType.LineFlow,
|
||||
// materialOptions: {
|
||||
// color: "#1a9850",
|
||||
// image: "img/textures/line-arrow-right.png",
|
||||
// speed: 10
|
||||
// },
|
||||
// clampToGround: true,
|
||||
show: true
|
||||
},
|
||||
tooltip: function (event) {
|
||||
const attr = event.graphic?.attr;
|
||||
return `坡度: ${attr.slopeStr1} (${attr.slopeStr2})<br />坡向: ${attr.direction}°`;
|
||||
}
|
||||
});
|
||||
map.addThing(slope);
|
||||
} else if (name == "模型剖切") {
|
||||
map.scene.center = { lat: 31.841619, lng: 117.140395, alt: 1259, heading: 90, pitch: -51 };
|
||||
// 加模型
|
||||
const graphic = new mars3d.graphic.ModelPrimitive({
|
||||
position: [117.150365, 31.841954, 50.26],
|
||||
style: {
|
||||
url: "//data.mars3d.cn/gltf/mars/dikuai/d1.gltf",
|
||||
scale: 1
|
||||
}
|
||||
});
|
||||
graphicLayer.addGraphic(graphic);
|
||||
modelPlanClip = new mars3d.thing.ModelPlanClip({
|
||||
graphic: graphic,
|
||||
height: 1, // 开挖的深度
|
||||
clipOutSide: false,
|
||||
edgeColor: Cesium.Color.GREY,
|
||||
edgeWidth: 2.0
|
||||
});
|
||||
map.addThing(modelPlanClip);
|
||||
} else if (name == "模型压平") {
|
||||
} else if (name == "限高分析") {
|
||||
// 限高分析
|
||||
map.fixedLight = true; // 固定光照，避免gltf模型随时间存在亮度不一致。
|
||||
// 限高分析类
|
||||
limitHeight = new mars3d.thing.LimitHeight({
|
||||
color: "rgba(255,0,0,0.5)",
|
||||
height: 80, // 限高
|
||||
bottomHeight: 32, // 模型地面的海拔高度（单位：米）
|
||||
positions: [
|
||||
[117.210446, 31.829032, 0],
|
||||
[117.226334, 31.826662, 0],
|
||||
[117.226694, 31.807882, 0],
|
||||
[117.209776, 31.808359, 0],
|
||||
[117.209778, 31.808341, 0]
|
||||
]
|
||||
});
|
||||
map.addThing(limitHeight);
|
||||
}
|
||||
mainMenuShow.value = false;
|
||||
subMenuShow.value = true;
|
||||
@ -949,7 +972,7 @@ onUnmounted(() => {
|
||||
border: 1px solid #008aff70;
|
||||
border-radius: 2px !important;
|
||||
background-color: rgba(23, 49, 71, 0.8);
|
||||
width: 300px;
|
||||
// min-width: 300px;
|
||||
min-height: 370px;
|
||||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||||
animation: fadeIn 1s;
|
||||
@ -971,9 +994,11 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
&-menu {
|
||||
width: 90%;
|
||||
width: 300px;
|
||||
height: max-content;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: scroll;
|
||||
.menu-item {
|
||||
display: inline-block;
|
||||
@ -996,6 +1021,7 @@ onUnmounted(() => {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
> div {
|
||||
width: 300px;
|
||||
padding: 10px;
|
||||
.title {
|
||||
color: #fff;
|
||||
@ -1067,6 +1093,9 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.volumeAnalysis {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,25 +17,33 @@
|
||||
<!-- 菜单操作 -->
|
||||
<div class="menu-operate">
|
||||
<div class="menu-operate-item" v-for="(item, i) in data" :key="i">
|
||||
<div v-if="item.widget && !item.children" class="toolbar-item" @click="showWidget(item.name)">
|
||||
<el-icon size="18" color="#fff" v-if="i == 0"><PictureRounded /></el-icon>
|
||||
<el-icon size="18" color="#fff" v-else-if="i == 1"><DocumentCopy /></el-icon>
|
||||
<div class="toolbar-item" @click="showWidget(item.name)">
|
||||
<img :src="item.icon" alt="" srcset="" style="width: 16px; height: 16px" />
|
||||
<span class="title">{{ item.name }}</span>
|
||||
<el-icon size="14" v-if="item.children" color="#fff"><ArrowDown /></el-icon>
|
||||
</div>
|
||||
<el-dropdown v-if="item.children && !item.widget" trigger="click">
|
||||
<!-- <el-dropdown v-if="item.children" trigger="click" popper-class="dropdown-style">
|
||||
<div class="toolbar-item">
|
||||
<el-icon size="18" color="#fff"><Operation /></el-icon>
|
||||
<img :src="item.icon" alt="" srcset="" style="width: 16px; height: 16px" />
|
||||
<span class="title">{{ item.name }}</span>
|
||||
<el-icon size="14" color="#fff"><ArrowDown /></el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="dropdown">
|
||||
<el-dropdown-item v-for="child in item.children" :key="child.name" @click="clickMenu(child.name)"
|
||||
><el-icon size="16"><PictureRounded /></el-icon> <span>{{ child.name }}</span></el-dropdown-item
|
||||
<el-dropdown-item v-for="child in item.children" :key="child.name" @click="clickMenu(child.name)">
|
||||
<img :src="child.icon" alt="" srcset="" style="width: 14px; height: 14px" />
|
||||
<span>{{ child.name }}</span></el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-dropdown> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 工具菜单操作 -->
|
||||
<div class="tool-menu-operate" v-if="toolListShow">
|
||||
<div class="tool-item" v-for="(item, index) in data[2].children" :key="index" @click="clickMenu(item.name)">
|
||||
<img :src="item.icon" alt="" srcset="" style="width: 14px; height: 14px" />
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底图菜单操作页面 -->
|
||||
@ -253,6 +261,7 @@ import {
|
||||
polylineCombineList,
|
||||
gltfModelList
|
||||
} from "@/api/modules/mapCommon";
|
||||
const toolListShow = ref(false);
|
||||
const configJson = ref<any>({});
|
||||
const screenComparisonShow = ref(false); // 分屏对比弹框
|
||||
const leftRollerList = ref<any>([]);
|
||||
@ -456,25 +465,24 @@ const lantianSkybox = new mars3d.GroundSkyBox({
|
||||
}
|
||||
});
|
||||
const data = [
|
||||
{ name: "底图", icon: "PictureRounded", widget: "manage-basemap" },
|
||||
{ name: "图层", icon: "PictureRounded", widget: "manage-layers" },
|
||||
{ name: "底图", icon: new URL("@/assets/images/Mars3DIcon/dt.png", import.meta.url).href },
|
||||
{ name: "图层", icon: new URL("@/assets/images/Mars3DIcon/tc.png", import.meta.url).href },
|
||||
{
|
||||
name: "工具",
|
||||
icon: "tool",
|
||||
icon: new URL("@/assets/images/Mars3DIcon/gj.png", import.meta.url).href,
|
||||
children: [
|
||||
{ name: "图上量算", icon: "ruler", widget: "measure" },
|
||||
{ name: "空间分析", icon: "analysis", widget: "analysis" },
|
||||
{ name: "坐标定位", icon: "local", widget: "location-point" },
|
||||
{ name: "地区导航", icon: "navigation", widget: "location-region" },
|
||||
{ name: "我的标记", icon: "mark", widget: "addmarker" },
|
||||
{ name: "视角书签", icon: "bookmark", widget: "bookmark" },
|
||||
{ name: "地图打印", icon: "printer", widget: "print" },
|
||||
{ name: "飞行漫游", icon: "take-off", widget: "roamLine-list" },
|
||||
{ name: "图上标绘", icon: "hand-painted-plate", widget: "plot" },
|
||||
{ name: "路线导航", icon: "connection", widget: "query-route" },
|
||||
{ name: "卷帘对比", icon: "switch-contrast", widget: "map-split" },
|
||||
{ name: "分屏对比", icon: "full-screen-play", widget: "map-compare" }
|
||||
// { name: "百度街景", icon: h(City, { theme: "outline", size: "18" }), widget: "street-view" }
|
||||
{ name: "图上量算", icon: new URL("@/assets/images/Mars3DIcon/tsls.png", import.meta.url).href },
|
||||
{ name: "空间分析", icon: new URL("@/assets/images/Mars3DIcon/kjfx.png", import.meta.url).href },
|
||||
{ name: "坐标定位", icon: new URL("@/assets/images/Mars3DIcon/zbdw.png", import.meta.url).href },
|
||||
{ name: "地区导航", icon: new URL("@/assets/images/Mars3DIcon/dqdh.png", import.meta.url).href },
|
||||
{ name: "我的标记", icon: new URL("@/assets/images/Mars3DIcon/wdbj.png", import.meta.url).href },
|
||||
{ name: "视角书签", icon: new URL("@/assets/images/Mars3DIcon/sjsq.png", import.meta.url).href },
|
||||
{ name: "地图打印", icon: new URL("@/assets/images/Mars3DIcon/dtdy.png", import.meta.url).href },
|
||||
{ name: "飞行漫游", icon: new URL("@/assets/images/Mars3DIcon/fxmy.png", import.meta.url).href },
|
||||
{ name: "图上标绘", icon: new URL("@/assets/images/Mars3DIcon/tsbh.png", import.meta.url).href },
|
||||
{ name: "路线导航", icon: new URL("@/assets/images/Mars3DIcon/lxdh.png", import.meta.url).href },
|
||||
{ name: "卷帘对比", icon: new URL("@/assets/images/Mars3DIcon/jldb.png", import.meta.url).href },
|
||||
{ name: "分屏对比", icon: new URL("@/assets/images/Mars3DIcon/fpdb.png", import.meta.url).href }
|
||||
]
|
||||
}
|
||||
];
|
||||
@ -578,6 +586,8 @@ const showWidget = (name: string) => {
|
||||
} else if (name == "图层") {
|
||||
basicMapShow.value = false;
|
||||
layersShow.value = true;
|
||||
} else if (name == "工具") {
|
||||
toolListShow.value = !toolListShow.value;
|
||||
}
|
||||
console.log(666);
|
||||
};
|
||||
@ -613,6 +623,7 @@ const clickMenu = (name: any) => {
|
||||
// 分屏对比
|
||||
screenComparison();
|
||||
}
|
||||
toolListShow.value = false;
|
||||
};
|
||||
// 获取Canvas对象
|
||||
const getCanvas = (text: any) => {
|
||||
@ -1283,9 +1294,9 @@ onUnmounted(() => {
|
||||
background-image: none !important;
|
||||
border: 1px solid #008aff70;
|
||||
border-radius: 2px !important;
|
||||
background-color: rgba(23, 49, 71, 0.8);
|
||||
background: rgba(28, 44, 84, 0.6);
|
||||
height: 40px;
|
||||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||||
// box-shadow: 0 4px 15px 1px #02213bb3;
|
||||
z-index: 10;
|
||||
&-item {
|
||||
.toolbar-item {
|
||||
@ -1299,7 +1310,7 @@ onUnmounted(() => {
|
||||
margin-left: 5px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(0, 138, 255, 0.5);
|
||||
background-color: rgba(51, 89, 181, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1315,6 +1326,47 @@ onUnmounted(() => {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
.tool-menu-operate {
|
||||
@include flex;
|
||||
position: absolute;
|
||||
top: 56px;
|
||||
right: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid #008aff70;
|
||||
width: 110px;
|
||||
background: rgba(11, 22, 51, 0.6);
|
||||
border-radius: 0px;
|
||||
opacity: 1;
|
||||
border: 1px solid #3b60a7;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.tool-item:not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.tool-item {
|
||||
width: 90px;
|
||||
height: 26px;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 14px;
|
||||
width: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
span {
|
||||
font-size: 13px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
.tool-item:hover {
|
||||
background: rgba(51, 89, 181, 0.6);
|
||||
}
|
||||
}
|
||||
.basic-map {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
@ -1522,18 +1574,6 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
// .dropdown {
|
||||
// background-color: rgba(23, 49, 71, 0.8) !important;
|
||||
// // border: 1px solid rgba(23, 49, 71, 0.8) !important;
|
||||
// :deep() {
|
||||
// .el-dropdown-menu__item {
|
||||
// color: white;
|
||||
// }
|
||||
// .el-dropdown-menu__item:not(.is-disabled):hover {
|
||||
// background-color: rgba(0, 138, 255, 0.5);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
.option-list {
|
||||
width: 200px;
|
||||
height: 350px;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<img src="@/assets/images/login/login-bg-earth.png" alt="" srcset="" />
|
||||
<div class="login-title">Mars3D综合态势展示系统</div>
|
||||
<div class="login-title">佳信捷3D综合态势展示系统</div>
|
||||
<div class="login-pannel">
|
||||
<p class="login-pannel_text">欢迎登录！</p>
|
||||
<el-form ref="loginFormRef" class="form" :model="loginForm" :rules="loginRules" size="large">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user