Merge branch 'main' of http://123.132.248.154:10000/gitY/DiKongGanZhiPingTai
commit
9836661532
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 992 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="pathModal">
|
||||
<!-- 左侧目录 -->
|
||||
<div class="leftMenuDiv">
|
||||
<PathLeftMenu
|
||||
ref="pathLeftMenuRef"
|
||||
@changeLeftMenuShow="changeLeftMenuShow"
|
||||
/>
|
||||
</div>
|
||||
<!-- 地图 -->
|
||||
<div class="mapDiv" :style="{ width: dynamicWidth }">
|
||||
<PathMap
|
||||
ref="pathMapRef"
|
||||
/>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<div class="areaInfoDiv" v-if="detailsInfoShow">
|
||||
<PathAreaInfo
|
||||
@closeDetailsInfo="closeDetailsInfo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { PathLeftMenu, PathMap, PathAreaInfo } from './path';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
const { createMessage, createConfirm } = useMessage();
|
||||
|
||||
// 地图ref
|
||||
const pathMapRef = ref();
|
||||
const detailsInfoShow = ref(false)
|
||||
|
||||
// 地图宽度
|
||||
const dynamicWidth = computed(() => {
|
||||
let width = 0;
|
||||
// // 左侧目录
|
||||
// if (leftMenuShow.value) {
|
||||
// width += 340;
|
||||
// } else {
|
||||
// width += 64;
|
||||
// }
|
||||
// 地图作业区域
|
||||
if (detailsInfoShow.value) {
|
||||
width += 320;
|
||||
}
|
||||
return '100%';
|
||||
});
|
||||
onMounted(() => {
|
||||
|
||||
});
|
||||
function changeLeftMenuShow() {
|
||||
detailsInfoShow.value = true;
|
||||
}
|
||||
// 关闭右侧标注
|
||||
function closeDetailsInfo() {
|
||||
detailsInfoShow.value = false;
|
||||
pathMapRef.value.areaRestoreDefault();
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.pathModal {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.leftMenuDiv {
|
||||
position:absolute;
|
||||
top:20px;
|
||||
left:20px;
|
||||
z-index:1;
|
||||
display:flex;
|
||||
gap:15px;
|
||||
width: 340px;
|
||||
}
|
||||
|
||||
.mapDiv {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
// width: auto;
|
||||
}
|
||||
|
||||
.areaInfoDiv {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
export { default as PathLeftMenu } from './pathLeftMenu.vue';
|
||||
export { default as PathMap } from './pathMap.vue';
|
||||
export { default as PathAreaInfo } from './pathAreaInfo.vue';
|
||||
@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<div class="annotationTitle">
|
||||
<LeftOutlined class="iconsbox" @click="closeDetailsInfo"/>
|
||||
详细信息
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<div class="libox">
|
||||
<div class="title">内容</div>
|
||||
<div class="titletext">疑似发现火情</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<div class="libox yellow">
|
||||
<div class="title">置信度</div>
|
||||
<div class="text">95%</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<div class="libox">
|
||||
<div class="title">地址</div>
|
||||
<div class="text">
|
||||
<img class="posimg" src="/public/images/ai/location.png" />
|
||||
<div class="location">临沂市费县探沂镇209国道大兴安陵西北方向山坡下…</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<div class="libox">
|
||||
<div class="title">时间</div>
|
||||
<div class="titletext time">2025-05-07 13:45:23</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<div class="libox">
|
||||
<div class="title1">拍摄<br />设备</div>
|
||||
<div class="text1 time">EGUQ12212U</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<div class="libox">
|
||||
<div class="title1">AI大<br />模型</div>
|
||||
<div class="text1 time">AI-HUI CHUANG model2025-12-21/2U</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="imgbox">
|
||||
<div class="bannercontainer">
|
||||
<a-image-preview-group>
|
||||
<div class="bannerbox" v-for="item in bannerArr">
|
||||
<div class="bannerimg">
|
||||
<a-image :width="232" :height="140" :src="item" />
|
||||
</div>
|
||||
</div>
|
||||
</a-image-preview-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, nextTick } from 'vue';
|
||||
import { LeftOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
const props = defineProps([]);
|
||||
const emits = defineEmits([
|
||||
'closeDetailsInfo'
|
||||
]);
|
||||
const bannerArr = ref([
|
||||
"/public/banner1.png", "/public/banner.png","/public/banner1.png", "/public/banner.png",
|
||||
"/public/banner1.png", "/public/banner.png","/public/banner1.png", "/public/banner.png"
|
||||
])
|
||||
// 关闭
|
||||
function closeDetailsInfo() {
|
||||
emits('closeDetailsInfo');
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
// 页面不能被选中
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
user-select: none;
|
||||
|
||||
position: relative;
|
||||
width: 320px;
|
||||
height: 100%;
|
||||
background: #0D0E15;
|
||||
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||
padding: 15px;
|
||||
}
|
||||
.imgbox{
|
||||
width: calc(100% - 580px);
|
||||
height: 185px;
|
||||
background: #0D0E15;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 570px;
|
||||
z-index: 100;
|
||||
overflow-x: scroll;
|
||||
.bannercontainer{
|
||||
width: calc(100% - 10px);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.bannerbox{
|
||||
.bannerimg{
|
||||
width: 232px;
|
||||
height: 140px;
|
||||
border-radius: 10px;
|
||||
margin-left: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.annotationTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
min-height: 45px;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
.iconsbox{
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.libox{
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
.titletext{
|
||||
width: 250px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-left: 8px;
|
||||
}
|
||||
.time{
|
||||
font-family: Bebas;
|
||||
font-size: 12px;
|
||||
}
|
||||
.title1{
|
||||
width: 44px;
|
||||
height: 52px;
|
||||
background: #303749;
|
||||
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||
border-left: 1px solid #0081FF;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
.text1{
|
||||
width: 250px;
|
||||
font-family: Bebas;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
line-height: 52px;
|
||||
padding-left: 10px;
|
||||
background: #303749;
|
||||
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||
}
|
||||
.title{
|
||||
width: 44px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
background: #303749;
|
||||
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||
line-height: 17px;
|
||||
padding-left: 4px;
|
||||
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||
}
|
||||
.text{
|
||||
line-height: 17px;
|
||||
padding-left: 8px;
|
||||
display: flex;
|
||||
.posimg{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.location{
|
||||
width: 215px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yellow{
|
||||
color: #F4B307;
|
||||
}
|
||||
/* 整个滚动条的样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 5px; /* 滚动条宽度 */
|
||||
}
|
||||
/* 滚动轨道的样式 */
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(255,0,255,0); /* 轨道背景颜色 */
|
||||
}
|
||||
/* 滚动滑块的样式 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: #555; /* 滑块背景颜色 */
|
||||
}
|
||||
/* 滑块悬停状态 */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #777;
|
||||
}
|
||||
|
||||
/* 滚动条按钮（上下箭头） */
|
||||
::-webkit-scrollbar-button {
|
||||
display: none; /* 隐藏默认箭头 */
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div class="leftMenu">
|
||||
<div class="leftMenuContent">
|
||||
<div class="leftMenuContent_2">
|
||||
<div class="leftMenuContent_title">
|
||||
{{ showMenuInfoName }}
|
||||
</div>
|
||||
<div class="leftMenuContent_list">
|
||||
<!-- AI成果 -->
|
||||
<div v-if="showMenuInfoName == 'AI成果'" style="margin: 10px 10px 20px 16px">
|
||||
<a-select
|
||||
v-model:value="areatype"
|
||||
style="width: 120px; margin-right: 15px;background: #151823;"
|
||||
@change="handleChangeSelect"
|
||||
>
|
||||
<a-select-option value="all">全部类型</a-select-option>
|
||||
<a-select-option value="dfence">全部作业区</a-select-option>
|
||||
<a-select-option value="nfz">全部限飞区</a-select-option>
|
||||
<a-select-option value="noland">全部禁降区</a-select-option>
|
||||
</a-select>
|
||||
<a-select
|
||||
v-model:value="areastate"
|
||||
style="width: 120px"
|
||||
@change="handleChangeSelect"
|
||||
>
|
||||
<a-select-option value="all">全部状态</a-select-option>
|
||||
<a-select-option value="0">已启用</a-select-option>
|
||||
<a-select-option value="1">已禁用</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<div v-for="(item,index) in 8" :key="item.id" @click="listsClick(index)">
|
||||
<!-- AI成果 -->
|
||||
<div class="showMenuInfo_area" :class="indexNum==index?'active':''">
|
||||
<div class="rightbox">
|
||||
<img class="fireimg" src="/public/images/ai/fire.png" />
|
||||
<div class="text">置信度60%</div>
|
||||
</div>
|
||||
<img class="img" src="/public/banner1.png" />
|
||||
<div class="bannerbox">
|
||||
<div class="title">疑似发现火情</div>
|
||||
<div class="line"></div>
|
||||
<div class="locationbox">
|
||||
<img class="posimg" src="/public/images/ai/location.png" />
|
||||
<div class="location">临沂市费县探沂镇209国道大兴庄村东200米</div>
|
||||
</div>
|
||||
<div class="timebox">
|
||||
<div class="time">2025-05-07 13:45</div>
|
||||
<div class="btn">查看详情</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, onMounted } from 'vue';
|
||||
import {
|
||||
CloseOutlined,
|
||||
AntDesignOutlined,
|
||||
DoubleLeftOutlined,
|
||||
DoubleRightOutlined,
|
||||
EnvironmentOutlined,
|
||||
CodeSandboxOutlined,
|
||||
ExpandAltOutlined,
|
||||
BorderOutlined,
|
||||
LogoutOutlined,
|
||||
EyeOutlined,
|
||||
EyeInvisibleOutlined,
|
||||
AimOutlined,
|
||||
DeleteOutlined,
|
||||
FileImageOutlined,
|
||||
CheckCircleOutlined,
|
||||
StopOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { UpdateWorkArea, UpdateAnnotation } from '@/api/demo/mediaLibrary';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
const { createMessage, createConfirm } = useMessage();
|
||||
|
||||
const props = defineProps([
|
||||
|
||||
]);
|
||||
const emits = defineEmits([
|
||||
'changeLeftMenuShow'
|
||||
]);
|
||||
const showMenuInfoName = ref('AI成果');
|
||||
const areatype = ref('all')
|
||||
const areastate = ref('all')
|
||||
const indexNum = ref()
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
function handleChangeSelect() {
|
||||
|
||||
}
|
||||
function listsClick(e){
|
||||
indexNum.value = e
|
||||
emits('changeLeftMenuShow');
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.leftMenu {
|
||||
width:100%;
|
||||
height:100%;
|
||||
background: #0D0E15;
|
||||
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 10px 30px 1px rgba(0,0,6,0.15), inset 0px 0px 20px 8px rgba(58,87,232,0.73);
|
||||
border-radius: 6px;
|
||||
position:relative;
|
||||
|
||||
.leftMenuContent {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: calc(100%-50px);
|
||||
|
||||
.leftMenuContent_2 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.leftMenuContent_title {
|
||||
font-size: 16px;
|
||||
padding:15px 15px;
|
||||
color:#fff;
|
||||
border-bottom:1px solid rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.leftMenuContent_list {
|
||||
overflow-y: auto;
|
||||
max-height: 720px;
|
||||
|
||||
// AI成果
|
||||
.showMenuInfo_area {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: 115px;
|
||||
padding: 12px 8px;
|
||||
margin: 6px 15px;
|
||||
background: #313C62;
|
||||
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||
border-radius: 6px;
|
||||
.rightbox{
|
||||
width: 81px;
|
||||
height: 23px;
|
||||
background: url("/public/images/ai/posbg.png") no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 9px;
|
||||
color: #FFFFFF;
|
||||
.fireimg{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 3px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.img{
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
.bannerbox{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 10px;
|
||||
.title{
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 22px;
|
||||
margin-bottom: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 180px;
|
||||
}
|
||||
.line{
|
||||
width: 190px;
|
||||
height: 1px;
|
||||
border-bottom: 1px dashed #90A1B0;
|
||||
opacity: 0.3;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.locationbox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
line-height: 14px;
|
||||
.posimg{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
.location{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 3px;
|
||||
width: 180px;
|
||||
font-family: HarmonyOS_Sans_SC;
|
||||
font-size: 12px;
|
||||
color: #D3F1FF;
|
||||
line-height: 14px;
|
||||
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
.timebox{
|
||||
margin-top: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.time{
|
||||
font-family: Bebas;
|
||||
font-size: 10px;
|
||||
color: #FFFFFF;
|
||||
line-height: 13px;
|
||||
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
.btn{
|
||||
width: 67px;
|
||||
height: 25px;
|
||||
background: #00B569;
|
||||
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.active{
|
||||
outline: 2px solid #2D8CF0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div ref="vChartRef" id="mars3d-container" class="mars3d-container">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, onMounted, defineEmits } from 'vue';
|
||||
import * as mars3d from 'mars3d';
|
||||
import * as Cesium from 'mars3d-cesium';
|
||||
|
||||
const props = defineProps([
|
||||
|
||||
]);
|
||||
const emits = defineEmits([
|
||||
]);
|
||||
|
||||
const vChartRef: any = ref<HTMLElement>();
|
||||
let map: mars3d.Map; // 地图对象
|
||||
let graphicLayers = new mars3d.layer.GraphicLayer({
|
||||
isAutoEditing: true,
|
||||
});
|
||||
onMounted(() => {
|
||||
initMap();
|
||||
});
|
||||
|
||||
const initMap = () => {
|
||||
map = new mars3d.Map(vChartRef.value, {
|
||||
scene: {
|
||||
center: {
|
||||
lat: 35.134608,
|
||||
lng: 118.29853,
|
||||
alt: 8306.3,
|
||||
heading: 360,
|
||||
pitch: -45,
|
||||
},
|
||||
scene3DOnly: false,
|
||||
shadows: false,
|
||||
removeDblClick: true,
|
||||
sceneMode: 3,
|
||||
showSun: true,
|
||||
showMoon: true,
|
||||
showSkyBox: true,
|
||||
showSkyAtmosphere: true,
|
||||
fog: true,
|
||||
fxaa: true,
|
||||
requestRenderMode: true,
|
||||
contextOptions: {
|
||||
requestWebgl1: false,
|
||||
webgl: {
|
||||
preserveDrawingBuffer: true,
|
||||
alpha: false,
|
||||
stencil: true,
|
||||
powerPreference: 'high-performance',
|
||||
},
|
||||
},
|
||||
globe: {
|
||||
depthTestAgainstTerrain: false,
|
||||
baseColor: '#546a53',
|
||||
showGroundAtmosphere: true,
|
||||
enableLighting: false,
|
||||
},
|
||||
cameraController: {
|
||||
zoomFactor: 3,
|
||||
minimumZoomDistance: 1,
|
||||
maximumZoomDistance: 50000000,
|
||||
enableRotate: true,
|
||||
enableTranslate: true,
|
||||
enableTilt: true,
|
||||
enableZoom: true,
|
||||
enableCollisionDetection: true,
|
||||
minimumCollisionTerrainHeight: 15000,
|
||||
},
|
||||
},
|
||||
control: {
|
||||
homeButton: true,
|
||||
baseLayerPicker: false,
|
||||
sceneModePicker: true,
|
||||
vrButton: false,
|
||||
fullscreenButton: true,
|
||||
navigationHelpButton: true,
|
||||
animation: false,
|
||||
timeline: false,
|
||||
infoBox: false,
|
||||
geocoder: false,
|
||||
selectionIndicator: false,
|
||||
showRenderLoopErrors: true,
|
||||
contextmenu: {
|
||||
hasDefault: true,
|
||||
},
|
||||
mouseDownView: true,
|
||||
zoom: {
|
||||
insertIndex: 1,
|
||||
},
|
||||
compass: {
|
||||
bottom: 'toolbar',
|
||||
left: '5px',
|
||||
rotation: true,
|
||||
},
|
||||
distanceLegend: {
|
||||
left: '10px',
|
||||
bottom: '2px',
|
||||
},
|
||||
locationBar: {
|
||||
crs: 'CGCS2000_GK_Zone_3',
|
||||
crsDecimal: 0,
|
||||
template:
|
||||
"<div>经度:{lng}</div> <div>纬度:{lat}</div> <div class='hide1000'>横{crsx} 纵{crsy}</div> <div>海拔：{alt}米</div> <div class='hide700'>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div class='hide700'>视高：{cameraHeight}米</div>",
|
||||
cacheTime: 50,
|
||||
},
|
||||
},
|
||||
method: {
|
||||
templateValues: {
|
||||
dataServer: '//data.mars3d.cn',
|
||||
gltfServerUrl: '//data.mars3d.cn/gltf',
|
||||
},
|
||||
},
|
||||
terrain: {
|
||||
url: '//data.mars3d.cn/terrain',
|
||||
show: true,
|
||||
clip: true,
|
||||
},
|
||||
basemaps: [
|
||||
{
|
||||
id: 10,
|
||||
name: '地图底图',
|
||||
type: 'group',
|
||||
opacity: 1,
|
||||
},
|
||||
{
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
eventParent: {
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
},
|
||||
private: false,
|
||||
id: 'm-770c35e7-9054-4259-b5ee-c15f108becd0',
|
||||
opacity: 1,
|
||||
pid: 2021,
|
||||
parent: {
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
},
|
||||
zIndex: 1,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
eventParent: {
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
},
|
||||
private: false,
|
||||
id: 'm-3b881368-574b-48a5-88b2-8b3c2c48fd62',
|
||||
opacity: 1,
|
||||
pid: 2021,
|
||||
parent: {
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
},
|
||||
zIndex: 2,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
opacity: 1,
|
||||
},
|
||||
],
|
||||
layers: [],
|
||||
});
|
||||
if (map) {
|
||||
map.addLayer(graphicLayers);
|
||||
handlerLocation([118.2958779, 35.1342553]);
|
||||
// 监听地图点击事件
|
||||
map.on(mars3d.EventType.click, function (event) {
|
||||
|
||||
});
|
||||
}
|
||||
};
|
||||
// 图斑定位
|
||||
const handlerLocation = (lngLat) => {
|
||||
const position = Cesium.Cartesian3.fromDegrees(lngLat[0], lngLat[1]);
|
||||
map.flyToPoint(position);
|
||||
};
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.mars3d-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue