feat: 部分功能新增

This commit is contained in:
kun 2023-10-20 18:32:09 +08:00
parent b4f02c8da4
commit 90015511b6
8 changed files with 555 additions and 5 deletions

View File

@ -45,6 +45,8 @@ export const GlobalStore = defineStore({
activeSn: "",
// 右侧抽屉选择的Id值
activeId: "",
// 视角书签
viewBookmarkArr: "",
// themeConfig
themeConfig: {
// 当前页面是否全屏

View File

@ -23,6 +23,7 @@ export interface GlobalState {
activeType: string;
activeSn: string;
activeId: string;
viewBookmarkArr: string;
}
/* themeConfigProp */

View File

@ -0,0 +1,213 @@
<template>
<div class="main-content">
<div class="main-content-title">
<span>飞行漫游</span>
<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
</div>
<div class="btn-operate">
<el-button type="primary" @click="addRoute">新增路线</el-button>
<el-button type="primary">导入</el-button>
<el-button type="primary">导出</el-button>
</div>
<div class="table-operate">
<el-table :data="tableData" rowKey="id">
<el-table-column prop="name" align="center" label="名称" />
<el-table-column align="center" label="操作">
<template #default="{ row, $index }">
<el-button link type="primary" @click="flyToModel(row)">漫游</el-button>
<!-- <el-button link type="primary">编辑</el-button> -->
<el-button link type="primary" @click="deleteRoute(row, $index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script lang="ts" setup>
//cesium
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "mars3d-cesium";
//mars3d
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import { GlobalStore } from "@/stores";
const globalStore = GlobalStore();
const props = defineProps(["mapInstance"]);
const emits = defineEmits(["hiddenConfim"]);
const tableData = ref<any>([]);
let map: any = props.mapInstance;
let graphicLayer: any;
let dataIndex = 0 as any;
const colors = [
"rgb(40, 40, 255)",
"rgb(0, 88, 176)",
"rgb(0, 128, 255)",
"rgb(0, 217, 0)",
"rgb(0, 151, 0)",
"rgb(255, 199, 83)",
"rgb(255, 144, 30)",
"rgb(202, 101, 0)",
"rgb(255, 0, 0)"
];
onMounted(() => {
graphicLayer = new mars3d.layer.GraphicLayer({
hasEdit: false,
isAutoEditing: false //
});
map.addLayer(graphicLayer);
});
// 线
const deleteRoute = (row: any, index: number) => {
const routeData = graphicLayer.getGraphicById(row.id);
routeData && routeData.remove(true);
tableData.value.splice(index, 1);
};
// 线
const flyToModel = (row: any) => {
const routeData = graphicLayer.getGraphicById("0");
console.log(routeData);
//
routeData.flyTo();
routeData.start();
};
// 线
const productRoute = (obj: any) => {
console.log(obj.id);
const item = {
id: obj.id,
name: "路线-" + dataIndex
};
tableData.value.unshift(item);
const routePath = new mars3d.graphic.FixedRoute({
id: dataIndex + "",
name: "111",
speed: 10000,
positions: obj.points,
model: {
url: "//data.mars3d.cn/gltf/mars/MQ-9-Predator.glb",
scale: 1,
minimumPixelSize: 60
},
path: {
color: "#ffff00",
opacity: 0.5,
width: 1,
leadTime: 0
},
coneTrack: {
angle: 15, //
color: "rgba(255,0,255,0.5)"
},
updateClock: false,
point: {
color: "#ffff00",
pixelSize: 5,
distanceDisplayCondition: true,
distanceDisplayCondition_near: 80000,
distanceDisplayCondition_far: Number.MAX_VALUE
},
label: {
text: "测试",
font_size: 20,
pixelOffsetX: 0,
pixelOffsetY: -20,
scaleByDistance: true,
scaleByDistance_far: 80000,
scaleByDistance_farValue: 0.4,
distanceDisplayCondition: true,
distanceDisplayCondition_far: 80000
}
});
graphicLayer.addGraphic(routePath);
dataIndex++;
};
// 线
const addRoute = () => {
graphicLayer.startDraw({
type: "polyline",
style: {
pixelSize: 12,
color: "#3388ff"
},
success: function (graphic: any) {
console.log(graphic);
productRoute(graphic);
// eslint-disable-next-line no-console
// console.log(JSON.stringify(graphic.coordinates));
}
});
};
const closeDiv = () => {
emits("hiddenConfim");
};
onUnmounted(() => {
map = null;
});
</script>
<style scoped lang="scss">
@mixin flex {
display: flex;
align-items: center;
}
//
@keyframes fadeIn {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
transform: none;
}
}
.main-content {
position: absolute;
top: 60px;
right: 10px;
padding-bottom: 10px;
background-image: none !important;
border: 1px solid #008aff70;
border-radius: 2px !important;
background-color: rgba(23, 49, 71, 0.8);
width: 300px;
box-shadow: 0 4px 15px 1px #02213bb3;
animation: fadeIn 1s;
&-title {
@include flex;
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-color: #173147;
span {
font-size: 16px;
color: #0089fe;
margin-right: auto;
}
:deep() {
.el-icon {
cursor: pointer;
}
}
}
.btn-operate {
@include flex;
justify-content: center;
margin-top: 10px;
:deep() {
.el-button {
margin-left: 10px;
}
}
}
.table-operate {
width: 95%;
margin: 0 auto;
margin-top: 10px;
}
}
</style>

View File

@ -0,0 +1,109 @@
<template>
<div class="main-content">
<div class="main-content-title">
<span>地图打印</span>
<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
</div>
<div class="btn-operate">
<el-button type="primary" @click="downLoadImg">存为图片</el-button>
<el-button type="primary" @click="printImg">打印</el-button>
</div>
</div>
</template>
<script lang="ts" setup>
//cesium
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "mars3d-cesium";
//mars3d
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import { GlobalStore } from "@/stores";
import printJS from "print-js";
const importRef = ref();
const globalStore = GlobalStore();
const props = defineProps(["mapInstance"]);
const emits = defineEmits(["hiddenConfim"]);
let map: any = props.mapInstance;
onMounted(() => {});
//
const printImg = () => {
printJS({
printable: "mars3dContainer",
type: "html",
targetStyles: ["*"],
maxWidth: 2500,
style: "@page{size:auto; margin: 0;}" + "@media print { @page {size: landscape } }"
});
};
//
const downLoadImg = () => {
map.expImage();
};
const closeDiv = () => {
emits("hiddenConfim");
};
onUnmounted(() => {
map = null;
});
</script>
<style scoped lang="scss">
@mixin flex {
display: flex;
align-items: center;
}
//
@keyframes fadeIn {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
transform: none;
}
}
.main-content {
position: absolute;
top: 60px;
right: 10px;
padding-bottom: 10px;
background-image: none !important;
border: 1px solid #008aff70;
border-radius: 2px !important;
background-color: rgba(23, 49, 71, 0.8);
width: 300px;
box-shadow: 0 4px 15px 1px #02213bb3;
animation: fadeIn 1s;
&-title {
@include flex;
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-color: #173147;
span {
font-size: 16px;
color: #0089fe;
margin-right: auto;
}
:deep() {
.el-icon {
cursor: pointer;
}
}
}
.btn-operate {
@include flex;
justify-content: center;
margin-top: 10px;
:deep() {
.el-button {
margin-left: 10px;
}
}
}
}
</style>

View File

@ -50,7 +50,6 @@ import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import { Console } from "console";
import { GlobalStore } from "@/stores";
const importRef = ref();
const globalStore = GlobalStore();

View File

@ -0,0 +1,203 @@
<template>
<div class="main-content">
<div class="main-content-title">
<span>视角书签</span>
<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
</div>
<div class="input-add">
<el-input v-model="textVal" placeholder="请输入" />
<el-button type="primary" @click="addView">添加</el-button>
</div>
<div class="list-box" v-if="listArr.length > 0">
<div class="list-item" v-for="(item, index) in listArr" :key="index">
<img :src="item.img" alt="" @click="flytoView(item)" />
<!-- <el-image style="width: 100%; height: 200px" :src="item.img" @click="flytoView(item)" /> -->
<div>
<span>{{ item.name }}</span>
<el-icon size="14" color="#fff" @click="delteMark(index)" style="cursor: pointer"><Delete /></el-icon>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
//cesium
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "mars3d-cesium";
//mars3d
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import { GlobalStore } from "@/stores";
import { base64ToImg } from "@/api/modules/common";
const props = defineProps(["mapInstance"]);
const emits = defineEmits(["hiddenConfim"]);
const globalStore = GlobalStore();
const listArr = ref<any>([]);
const textVal = ref("");
let map: any = props.mapInstance;
onMounted(() => {
try {
const data = JSON.parse(globalStore.viewBookmarkArr);
if (data && data.length > 0) {
console.log("历史数据", data);
for (let i = 0; i < data.length; i++) {
const item = data[i];
//
// if (listArr.value[0].img === "") {
// formState.imgObject.splice(0, 1)
// formState.found = true
// }
listArr.value.push(item);
}
}
} catch (err) {}
});
//
const flytoView = (item: any) => {
map.setCameraView(item.center);
};
//
const delteMark = (index: number) => {
listArr.value.splice(index, 1);
//
globalStore.viewBookmarkArr = JSON.stringify(listArr.value);
};
//
const addView = () => {
if (!textVal.value) {
ElMessage("请先输入名称");
return;
}
// 使
if (listArr.value.some((item: any) => item.name === textVal.value)) {
ElMessage(textVal.value + " 已存在,请更换名称");
return;
}
const item = {
name: textVal.value,
center: map.getCameraView(),
img: ""
};
map
.expImage({
download: false,
width: 300
})
.then(async (response: any) => {
console.log(response);
// const { result } = await base64ToImg({
// base64: response.image
// });
item.img = response.image;
listArr.value.unshift(item);
console.log(listArr.value);
//
globalStore.viewBookmarkArr = JSON.stringify(listArr.value);
textVal.value = "";
});
};
const closeDiv = () => {
emits("hiddenConfim");
};
onUnmounted(() => {
map = null;
});
</script>
<style scoped lang="scss">
@mixin flex {
display: flex;
align-items: center;
}
//
@keyframes fadeIn {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
transform: none;
}
}
.main-content {
position: absolute;
top: 60px;
right: 10px;
padding-bottom: 10px;
background-image: none !important;
border: 1px solid #008aff70;
border-radius: 2px !important;
background-color: rgba(23, 49, 71, 0.8);
width: 300px;
box-shadow: 0 4px 15px 1px #02213bb3;
animation: fadeIn 1s;
&-title {
@include flex;
width: 100%;
height: 40px;
padding: 0 5px 0 10px;
background-color: #173147;
span {
font-size: 16px;
color: #0089fe;
margin-right: auto;
}
:deep() {
.el-icon {
cursor: pointer;
}
}
}
.input-add {
@include flex;
justify-content: center;
padding: 0 10px;
margin-top: 10px;
:deep() {
.el-input {
// width: 40%;
margin-right: 10px;
}
}
}
.list-box::-webkit-scrollbar {
width: 0; /* 隐藏滚动条 */
}
.list-box {
max-height: 500px;
overflow-y: scroll;
padding: 0 10px;
margin-top: 10px;
.list-item {
border: 1px solid #fff;
padding-bottom: 10px;
> img {
width: 100%;
height: 200px;
}
> div {
@include flex;
margin-top: 5px;
span {
display: inline-block;
width: 92%;
font-size: 14px;
color: white;
text-align: center;
}
}
}
.list-item:not(:last-child) {
margin-bottom: 10px;
}
.list-item:hover {
background-color: #3e3d35;
border-color: #2f659a;
}
}
}
</style>

View File

@ -30,6 +30,11 @@
"enableZoom": true,
"enableCollisionDetection": true,
"minimumCollisionTerrainHeight": 15000
},
"contextOptions": {
"webgl": {
"preserveDrawingBuffer": true
}
}
},
"control": {

View File

@ -88,6 +88,12 @@
<RegionalNavigation :mapInstance="map" v-if="regionalNavigationShow" @hiddenConfim="regionalNavigationShow = false" />
<!-- 我的标记弹框 -->
<MyTags :mapInstance="map" v-if="myTagsShow" @hiddenConfim="myTagsShow = false" />
<!-- 视角书签弹框 -->
<ViewBookmark :mapInstance="map" v-if="ViewBookmarkShow" @hiddenConfim="ViewBookmarkShow = false" />
<!-- 地图打印弹框 -->
<MapPrint :mapInstance="map" v-if="MapPrintShow" @hiddenConfim="MapPrintShow = false" />
<!-- 飞行漫游弹框 -->
<FlyRoam :mapInstance="map" v-if="FlyRoamShow" @hiddenConfim="FlyRoamShow = false" />
</div>
<!-- <div class="option-list">
@ -197,6 +203,12 @@ import SpaceAnalysis from "./components/spaceAnalysis.vue";
import CoordinatePicking from "./components/coordinatePicking.vue";
import RegionalNavigation from "./components/regionalNavigation.vue";
import MyTags from "./components/myTags.vue";
import ViewBookmark from "./components/viewBookmark.vue";
import MapPrint from "./components/mapPrint.vue";
import FlyRoam from "./components/flyRoam.vue";
const FlyRoamShow = ref(false); //
const MapPrintShow = ref(false); //
const ViewBookmarkShow = ref(false); //
const myTagsShow = ref(false); //
const regionalNavigationShow = ref(false); //
const pickingShow = ref(false); //
@ -317,10 +329,10 @@ const data = [
{ 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: "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" },
@ -360,6 +372,12 @@ const clickMenu = (name: any) => {
regionalNavigationShow.value = true;
} else if (name == "我的标记") {
myTagsShow.value = true;
} else if (name == "视角书签") {
ViewBookmarkShow.value = true;
} else if (name == "地图打印") {
MapPrintShow.value = true;
} else if (name == "飞行漫游") {
FlyRoamShow.value = true;
}
};
// Canvas