Fuyuu
/
dt-admin-pc-v2
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1.更换地图提供 

2.处理mitt事件
master
DIAMOND 9 months ago
parent
887b1f7da2
commit
77ec03d845
2 changed files with 570 additions and 430 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      src/views/earthMap/edit/EarthComp.vue
  2. 183
      src/views/military/modules/ai/monitorArea/components/VCEarthViewer.vue

15
src/views/earthMap/edit/EarthComp.vue
View File

@ -627,6 +627,9 @@
this.clearAlarmModel(eventSerialNum)
}
})
$mitt.on('fly', function (callback) {
that.fly(callback)
})
}
@ -841,7 +844,7 @@
});
}
async fly() {
async fly(callback:any = null) {
let position, rotation, viewDistance, duration;
//
let parentData =
@ -866,6 +869,11 @@
rotation = [data.rotationX, data.rotationY, data.rotationZ];
viewDistance = data.viewDistance;
duration = data.duration ? data.duration : 0;
// 处理mitt事件
if(callback){
callback(position,rotation,viewDistance,duration);
return
}
this._earth.camera.flyTo(position, viewDistance, rotation, duration);
// 地图复原事件
window.$flyTo = this.flyTo = () => {
@ -877,6 +885,11 @@
rotation = [parentData[0].rotationX, parentData[0].rotationY, parentData[0].rotationZ];
viewDistance = parentData[0].viewDistance;
duration = parentData[0].duration;
// 处理mitt事件
if(callback){
callback(position,rotation,viewDistance,duration);
return
}
// 先飞入到能看见红旗
this._earth.camera.flyTo(position, viewDistance, rotation, duration);
// 地图复原事件

183
src/views/military/modules/ai/monitorArea/components/VCEarthViewer.vue
View File

@ -5,33 +5,21 @@
功能概述：引入vc-drawings地图绘制插件，实现区域绘制并编辑保存数据，注意数据格式！注意数据格式！注意数据格式！
-->
<template>
<a-modal :visible="visible" :title="title" @ok="handleOk" @cancel="handleCancel" width="60vw" destroyOnClose wrapClassName="EarthMap">
<a-modal :visible="visible" :title="title" @ok="handleOk" @cancel="handleCancel" width="60vw" destroyOnClose
wrapClassName="EarthMap">
<a-row ref="viewerContainer" class="demo-viewer">
<vc-viewer>
<vc-viewer :showCredit="false">
<!-- 修改定位 和 位置偏移 -->
<vc-drawings
ref="drawingsRef"
position="top-left"
:main-fab-opts="mainFabOpts"
:offset="[10, 50]"
:editable="editable"
:clamp-to-ground="clampToGround"
@draw-evt="drawEvt"
@active-evt="activeEvt"
@editor-evt="editorEvt"
@mouse-evt="mouseEvt"
@clear-evt="clearEvt"
@ready="drawingsReadyDefault"
:pin-drawing-opts="pinDrawingOpts"
:point-drawing-opts="pointDrawingOpts"
:polygon-drawing-opts="polygonDrawingOpts"
:polyline-drawing-opts="polylineDrawingOpts"
:regular-drawing-opts="regularDrawingOpts"
:circle-drawing-opts="circleDrawingOpts"
:rectangle-drawing-opts="rectangleDrawingOpts"
></vc-drawings>
<vc-drawings ref="drawingsRef" position="top-left" :main-fab-opts="mainFabOpts" :offset="[10, 50]"
:editable="editable" :clamp-to-ground="clampToGround" @draw-evt="drawEvt" @active-evt="activeEvt"
@editor-evt="editorEvt" @mouse-evt="mouseEvt" @clear-evt="clearEvt" @ready="drawingsReadyDefault"
:pin-drawing-opts="pinDrawingOpts" :point-drawing-opts="pointDrawingOpts"
:polygon-drawing-opts="polygonDrawingOpts" :polyline-drawing-opts="polylineDrawingOpts"
:regular-drawing-opts="regularDrawingOpts" :circle-drawing-opts="circleDrawingOpts"
:rectangle-drawing-opts="rectangleDrawingOpts"></vc-drawings>
<vc-layer-imagery>
<vc-imagery-provider-tianditu map-style="img_c" :maximum-level="17" token="436ce7e50d27eede2f2929307e6b33c0"></vc-imagery-provider-tianditu>
<!-- <vc-imagery-provider-tianditu map-style="img_c" :maximum-level="17" token="436ce7e50d27eede2f2929307e6b33c0"></vc-imagery-provider-tianditu> -->
<vc-imagery-provider-tms :url="mapURL"></vc-imagery-provider-tms>
</vc-layer-imagery>
<vc-terrain-provider-cesium v-if="addTerrain"></vc-terrain-provider-cesium>
</vc-viewer>
@ -51,8 +39,12 @@
<script lang="ts" setup>
import { message } from 'ant-design-vue';
import $mitt from '@/utils/earthMap/mitt';
import { onMounted, watch } from 'vue';
import { ref, getCurrentInstance, nextTick } from 'vue';
import { useUserStore } from '/@/store/modules/user';
import { defHttp } from '/@/utils/http/axios';
const { proxy }: any = getCurrentInstance();
const props = defineProps({
title: {
@ -74,8 +66,15 @@
default: '',
},
});
//地图提供
const mapURL = import.meta.env.VITE_GLOB_EARTHMAP_URL + import.meta.env.VITE_GLOB_SATELLITE_URL
// const mapURL = "http://127.0.0.1:8088/dt/mapTile/satellite_zh/"
// console.log("mapURL",mapURL);
const userStore = useUserStore();
//部门信息
const sceneInfo: any = ref()
let $viewer = ref(undefined);
let $viewer: any = ref(undefined);
const drawingsRef = ref();
// 地形
const addTerrain: any = ref(false);
@ -423,20 +422,146 @@
}
}
);
onMounted(async () => {
await loadingData();
});
// 取消
function handleCancel() {
nextTick(() => {
proxy.$parent.mapVisible = false;
});
}
async function drawingsReadyDefault({ viewer, cesiumObject }) {
async function drawingsReadyDefault(e) {
let viewer = e.viewer
console.log("viewer", viewer);
console.log("e", e);
$viewer.value = viewer;
// 取消双击旋转事件
$viewer.value.cesiumWidget.screenSpaceEventHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
// 获取部门信息
await getSceneInfo();
// 飞入事件
await fly(viewer);
}
onMounted(async () => {
await loadingData();
// 获取部门信息
async function getSceneInfo() {
// 登录人部门信息
const orgCode: any = userStore.userInfo?.orgCode;
// this.orgCode = orgCode;
// console.log("orgCode",orgCode);
// 登录人部门信息长度为3则为总部，否则为岛屿
if (orgCode.length == 3) {
// 总部
await defHttp.get({
url: '/military/msMapScene/list',
params: {
pageNo: 1,
pageSize: 999,
sceneCode: "00001-00001*",
column: 'sysOrgCode',
order: 'asc',
}
}, { isTransformResponse: false }).then((response) => {
// console.log("response",response);
const records = response.result.records
// 设置岛屿信息为数组
sceneInfo.value = records;
return records;
});
} else {
await defHttp.get({
url: '/military/msMapScene/queryByOrgCode',
params: { orgCode: orgCode }
}, { isTransformResponse: false })
.then((response) => {
const data = response.result;
// 设置岛屿信息为Object
sceneInfo.value = data;
return data;
});
}
}
//飞入
function fly(viewer: any = null) {
let position, rotation, viewDistance, duration;
// 获取当前坐标系标准
let ellipsoid = viewer.scene.globe.ellipsoid;
//
let parentData =
sceneInfo.value instanceof Array
? sceneInfo.value.filter((item, index) => {
return item.sceneCode == "00001-00001";
})
: sceneInfo.value;
//过滤掉总部层级的
let data = sceneInfo.value instanceof Array ?
sceneInfo.value.filter((item, index) => {
return item.sceneCode.length > 3;
})
: sceneInfo.value;
// console.log("data",data);
// console.log("this.sceneInfo",this.sceneInfo);
if (data) {
if (!(data instanceof Array)) {
// debugger;
// 各岛礁
position = [data.lon, data.lat, data.altitude];
rotation = [data.rotationX, data.rotationY, data.rotationZ];
viewDistance = data.viewDistance;
duration = data.duration ? data.duration : 0;
// viewer.camera.flyTo(position, viewDistance, rotation, duration);
console.log("data", position, viewDistance, rotation, duration);
} else {
// 总指挥中心
position = [parentData[0].lon, parentData[0].lat, parentData[0].altitude];
rotation = [parentData[0].rotationX, parentData[0].rotationY, parentData[0].rotationZ];
viewDistance = parentData[0].viewDistance;
duration = parentData[0].duration;
console.log("data2", position, viewDistance, rotation, duration);
// 根据坐标系标准，将地理坐标转换为笛卡尔坐标
// let CartesianPosition = ellipsoid.cartographicToCartesian({
// x: position[0], y: position[1], z: position[2]
// });
// let CartesianPosition = ellipsoid.cartographicToCartesian(position[0],position[1],position[2]);
// console.log("CartesianPosition", CartesianPosition);
// 先飞入到能看见红旗
// viewer.camera.flyTo(CartesianPosition, viewDistance, rotation, duration);
// viewer.camera.flyTo({
// x: -990536.0465518984,
// y: 5531995.514841362,
// z: 3004737.189031571,
// duration: 1.0,
// });
// viewer.camera.position = {
// x: -990536.0465518984,
// y: 5531995.514841362,
// z: 3004737.189031571,
// }
// viewer.camera.position = CartesianPosition
// for (let record of data) {
// if (record.sceneCode.length == 11) {
// continue;
// }
// // 设置红旗
// this.setLoginPoint(record);
// }
}
} else {
// 没权限人员控制
}
}
function drawEvt(e, viewer) {
const restoreCursor = getComputedStyle(viewer.canvas).cursor;
@ -497,6 +622,8 @@
}
function cartesian3ToCartographic(cartesian3: any, viewer: any) {
console.log("cartesian3", cartesian3);
let ellipsoid = viewer.scene.globe.ellipsoid;
let cartographic = ellipsoid.cartesianToCartographic(cartesian3);
if (cartographic) {

Write Preview
Loading…
Cancel
Save