|
@@ -82,6 +82,22 @@
|
|
|
</el-modeltooltip>
|
|
|
</span>
|
|
|
</el-tab-pane>
|
|
|
+ <el-tab-pane name="fouth">
|
|
|
+ <span slot="label">
|
|
|
+ <el-modeltooltip class="item" effect="dark" content="测想定" placement="left">
|
|
|
+ <i class="el-icon-house"></i>
|
|
|
+ </el-modeltooltip>
|
|
|
+ </span>
|
|
|
+ <el-table :data="situation">
|
|
|
+ <el-table-column label="名称" prop="xdname"></el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="primary" @click="getJson(scope.row)">导入</el-button>
|
|
|
+ <el-button type="primary" @click="saveJson(scope.row)">保存</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-tab-pane>
|
|
|
</el-tabs>
|
|
|
<div class="buttons">
|
|
|
<el-button icon="el-icon-full-screen" circle @click="ismax()"></el-button>
|
|
@@ -95,12 +111,13 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import screenfull from 'screenfull';
|
|
|
-import fireController from '../../api/fireController';
|
|
|
+import screenfull from "screenfull";
|
|
|
+import fireController from "../../api/fireController";
|
|
|
+import { getToken } from "@/utils";
|
|
|
+import axios from "axios";
|
|
|
export default {
|
|
|
computed: {},
|
|
|
-
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
situation: [],
|
|
|
unit: [],
|
|
@@ -117,28 +134,164 @@ export default {
|
|
|
index: -1,
|
|
|
isActive: false
|
|
|
},
|
|
|
- whosmodel: 'red',
|
|
|
+ whosmodel: "red",
|
|
|
modelType: null,
|
|
|
- url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
|
|
|
+ url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
};
|
|
|
},
|
|
|
- mounted () {
|
|
|
- this.cesiumInit();
|
|
|
+ created() {
|
|
|
this.getData();
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.cesiumInit();
|
|
|
+ },
|
|
|
|
|
|
methods: {
|
|
|
- // 获取所有数据
|
|
|
- getData () {
|
|
|
+ async saveJson(row) {
|
|
|
+ await axios
|
|
|
+ .post("http://localhost:8084/admin/online/onlineOperation/updateDatasource/main", {
|
|
|
+ params: {
|
|
|
+ datasourceId: "1656243335922192384",
|
|
|
+ masterData: row,
|
|
|
+ slaveData: {}
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("update successfully ");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async getJson(row) {
|
|
|
+ let redunit = [];
|
|
|
+ let blueunit = [];
|
|
|
+ let satellite = [];
|
|
|
+ let center = [];
|
|
|
+ let fileInfoStr = row.blueunit;
|
|
|
+ let fileInfoArr = JSON.parse(fileInfoStr);
|
|
|
+ for (let i = 0; i < fileInfoArr.length; i++) {
|
|
|
+ await axios
|
|
|
+ .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
|
|
|
+ params: {
|
|
|
+ datasourceId: "1656243335922192384",
|
|
|
+ fieldName: "blueunit",
|
|
|
+ asImage: false,
|
|
|
+ dataId: row.id,
|
|
|
+ filename: fileInfoArr[i].filename,
|
|
|
+ Authorization: getToken(),
|
|
|
+ MenuId: "1656244747347431424"
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ // 处理成功的响应
|
|
|
+ blueunit.push(response.data);
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ // 处理错误
|
|
|
+ console.error(error);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ fileInfoStr = row.redunit;
|
|
|
+ fileInfoArr = JSON.parse(fileInfoStr);
|
|
|
+
|
|
|
+ for (let i = 0; i < fileInfoArr.length; i++) {
|
|
|
+ await axios
|
|
|
+ .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
|
|
|
+ params: {
|
|
|
+ datasourceId: "1656243335922192384",
|
|
|
+ fieldName: "redunit",
|
|
|
+ asImage: false,
|
|
|
+ dataId: row.id,
|
|
|
+ filename: fileInfoArr[i].filename,
|
|
|
+ Authorization: getToken(),
|
|
|
+ MenuId: "1656244747347431424"
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ // 处理成功的响应
|
|
|
+ redunit.push(response.data);
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ // 处理错误
|
|
|
+ console.error(error);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ fileInfoStr = row.center;
|
|
|
+ fileInfoArr = JSON.parse(fileInfoStr);
|
|
|
+
|
|
|
+ for (let i = 0; i < fileInfoArr.length; i++) {
|
|
|
+ await axios
|
|
|
+ .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
|
|
|
+ params: {
|
|
|
+ datasourceId: "1656243335922192384",
|
|
|
+ fieldName: "center",
|
|
|
+ asImage: false,
|
|
|
+ dataId: row.id,
|
|
|
+ filename: fileInfoArr[i].filename,
|
|
|
+ Authorization: getToken(),
|
|
|
+ MenuId: "1656244747347431424"
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ // 处理成功的响应
|
|
|
+ center.push(response.data);
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ // 处理错误
|
|
|
+ console.error(error);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ fileInfoStr = row.satellite;
|
|
|
+ fileInfoArr = JSON.parse(fileInfoStr);
|
|
|
+
|
|
|
+ for (let i = 0; i < fileInfoArr.length; i++) {
|
|
|
+ await axios
|
|
|
+ .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
|
|
|
+ params: {
|
|
|
+ datasourceId: "1656243335922192384",
|
|
|
+ fieldName: "satellite",
|
|
|
+ asImage: false,
|
|
|
+ dataId: row.id,
|
|
|
+ filename: fileInfoArr[i].filename,
|
|
|
+ Authorization: getToken(),
|
|
|
+ MenuId: "1656244747347431424"
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ // 处理成功的响应
|
|
|
+ satellite.push(response.data);
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ // 处理错误
|
|
|
+ console.error(error);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ const jsonData = {
|
|
|
+ id: row.id,
|
|
|
+ xdname: row.xdname,
|
|
|
+ type: row.type,
|
|
|
+ creator: row.creator,
|
|
|
+ createtime: row.createtime,
|
|
|
+ bluecnt: row.bluecnt,
|
|
|
+ target: row.target,
|
|
|
+ starttime: row.starttime,
|
|
|
+ steptime: row.steptime,
|
|
|
+ blueunit: blueunit,
|
|
|
+ redunit: redunit,
|
|
|
+ satellite: satellite,
|
|
|
+ center: center
|
|
|
+ };
|
|
|
+ console.log("jsonData :>> ", jsonData);
|
|
|
+ },
|
|
|
+ //获取所有数据
|
|
|
+ getData() {
|
|
|
this.getCenter();
|
|
|
this.getSatellite();
|
|
|
this.getUnit();
|
|
|
this.getSituation();
|
|
|
},
|
|
|
// 获取场景想定数据
|
|
|
- getSituation () {
|
|
|
+ getSituation() {
|
|
|
let params = {
|
|
|
- datasourceId: '1656243335922192384',
|
|
|
+ datasourceId: "1656243335922192384",
|
|
|
filterDtoList: [],
|
|
|
pageParam: {
|
|
|
pageNum: 1,
|
|
@@ -150,9 +303,9 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
// 获取作战单元数据
|
|
|
- getUnit () {
|
|
|
+ getUnit() {
|
|
|
let params = {
|
|
|
- datasourceId: '1657931215497334784',
|
|
|
+ datasourceId: "1657931215497334784",
|
|
|
filterDtoList: [],
|
|
|
pageParam: {
|
|
|
pageNum: 1,
|
|
@@ -164,9 +317,9 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
// 获取指挥中心数据
|
|
|
- getCenter () {
|
|
|
+ getCenter() {
|
|
|
let params = {
|
|
|
- datasourceId: '1654421731512684544',
|
|
|
+ datasourceId: "1654421731512684544",
|
|
|
filterDtoList: [],
|
|
|
pageParam: {
|
|
|
pageNum: 1,
|
|
@@ -178,9 +331,9 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
// 获取预警卫星数据
|
|
|
- getSatellite () {
|
|
|
+ getSatellite() {
|
|
|
let params = {
|
|
|
- datasourceId: '1654424480958648320',
|
|
|
+ datasourceId: "1654424480958648320",
|
|
|
filterDtoList: [],
|
|
|
pageParam: {
|
|
|
pageNum: 1,
|
|
@@ -191,8 +344,8 @@ export default {
|
|
|
this.satellite = res.data.dataList;
|
|
|
});
|
|
|
},
|
|
|
- cesiumInit () {
|
|
|
- this.viewer2D = new this.Cesium.Viewer('2DcesiumContainer', {
|
|
|
+ cesiumInit() {
|
|
|
+ this.viewer2D = new this.Cesium.Viewer("2DcesiumContainer", {
|
|
|
sceneMode: this.Cesium.SceneMode.SCENE2D,
|
|
|
animation: false, // 是否显示时间轴动画
|
|
|
baseLayerPicker: false,
|
|
@@ -204,16 +357,16 @@ export default {
|
|
|
navigationHelpButton: false,
|
|
|
selectionIndicator: false,
|
|
|
imageryProvider: new this.Cesium.UrlTemplateImageryProvider({
|
|
|
- url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
|
|
|
- layer: 'tdtVecBasicLayer',
|
|
|
- style: 'default',
|
|
|
- format: 'image/png',
|
|
|
- tileMatrixSetID: 'GoogleMapsCompatible',
|
|
|
+ url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
|
|
|
+ layer: "tdtVecBasicLayer",
|
|
|
+ style: "default",
|
|
|
+ format: "image/png",
|
|
|
+ tileMatrixSetID: "GoogleMapsCompatible",
|
|
|
show: false
|
|
|
})
|
|
|
});
|
|
|
|
|
|
- this.viewer3D = new this.Cesium.Viewer('3DcesiumContainer', {
|
|
|
+ this.viewer3D = new this.Cesium.Viewer("3DcesiumContainer", {
|
|
|
animation: false, // 是否显示时间轴动画
|
|
|
baseLayerPicker: false,
|
|
|
homeButton: false,
|
|
@@ -235,26 +388,26 @@ export default {
|
|
|
// }),
|
|
|
|
|
|
imageryProvider:
|
|
|
- // new this.Cesium.WebMapTileServiceImageryProvider({
|
|
|
- // url: "http://10.170.16.95:8080/geoserver/gwc/service/wmts/rest/map:map/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png",
|
|
|
- // layer: 'map:map',
|
|
|
- // style: 'raster',
|
|
|
- // format: 'image/png',
|
|
|
- // tileMatrixSetID: 'EPSG:900913', //一般使用EPSG:3857坐标系
|
|
|
+ // new this.Cesium.WebMapTileServiceImageryProvider({
|
|
|
+ // url: "http://10.170.16.95:8080/geoserver/gwc/service/wmts/rest/map:map/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png",
|
|
|
+ // layer: 'map:map',
|
|
|
+ // style: 'raster',
|
|
|
+ // format: 'image/png',
|
|
|
+ // tileMatrixSetID: 'EPSG:900913', //一般使用EPSG:3857坐标系
|
|
|
|
|
|
// }),
|
|
|
new this.Cesium.UrlTemplateImageryProvider({
|
|
|
- url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
|
|
|
- layer: 'tdtVecBasicLayer',
|
|
|
- style: 'default',
|
|
|
- format: 'image/png',
|
|
|
- tileMatrixSetID: 'GoogleMapsCompatible',
|
|
|
+ url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
|
|
|
+ layer: "tdtVecBasicLayer",
|
|
|
+ style: "default",
|
|
|
+ format: "image/png",
|
|
|
+ tileMatrixSetID: "GoogleMapsCompatible",
|
|
|
show: false
|
|
|
})
|
|
|
});
|
|
|
|
|
|
- this.viewer3D._cesiumWidget._creditContainer.style.display = 'none';
|
|
|
- this.viewer2D._cesiumWidget._creditContainer.style.display = 'none';
|
|
|
+ this.viewer3D._cesiumWidget._creditContainer.style.display = "none";
|
|
|
+ this.viewer2D._cesiumWidget._creditContainer.style.display = "none";
|
|
|
this.viewer3D.camera.setView({
|
|
|
destination: new this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000)
|
|
|
// 方向,俯视和仰视的视角
|
|
@@ -277,11 +430,11 @@ export default {
|
|
|
this.viewer3D.camera.percentageChanged = 0.01;
|
|
|
this.viewer3D.camera.changed.addEventListener(this.sync);
|
|
|
},
|
|
|
- removeAllModel () {
|
|
|
+ removeAllModel() {
|
|
|
this.viewer.entities.removeAll(); // 移除全部模型
|
|
|
},
|
|
|
- sync () {
|
|
|
- if (this.mousevalue == '3D') {
|
|
|
+ sync() {
|
|
|
+ if (this.mousevalue == "3D") {
|
|
|
// 三维地图中心点
|
|
|
let center = new this.Cesium.Cartesian2(
|
|
|
Math.floor(this.viewer3D.canvas.clientWidth / 2),
|
|
@@ -303,7 +456,7 @@ export default {
|
|
|
console.log(distance);
|
|
|
}
|
|
|
}
|
|
|
- if (this.mousevalue == '2D') {
|
|
|
+ if (this.mousevalue == "2D") {
|
|
|
// 二维地图中心点
|
|
|
let center = new this.Cesium.Cartesian2(
|
|
|
Math.floor(this.viewer2D.canvas.clientWidth / 2),
|
|
@@ -327,7 +480,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
// 将世界坐标系转换为经纬度坐标系
|
|
|
- convertWorldToCartographic (worldPosition) {
|
|
|
+ convertWorldToCartographic(worldPosition) {
|
|
|
const ellipsoid = this.viewer2D.scene.globe.ellipsoid;
|
|
|
const cartographic = ellipsoid.cartesianToCartographic(worldPosition);
|
|
|
const longitude = this.Cesium.Math.toDegrees(cartographic.longitude);
|
|
@@ -336,11 +489,11 @@ export default {
|
|
|
return { longitude, latitude, height };
|
|
|
},
|
|
|
// 监听地图变化
|
|
|
- changeActive (value) {
|
|
|
+ changeActive(value) {
|
|
|
this.mousevalue = value;
|
|
|
console.log(value);
|
|
|
},
|
|
|
- dimensionswitch (value) {
|
|
|
+ dimensionswitch(value) {
|
|
|
this.dimension = value;
|
|
|
if (value == 3) {
|
|
|
this.leftwidth = 24;
|
|
@@ -351,7 +504,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
// 全屏缩小
|
|
|
- ismax () {
|
|
|
+ ismax() {
|
|
|
if (screenfull.isEnabled && screenfull.isFullscreen) {
|
|
|
screenfull.exit();
|
|
|
} else {
|
|
@@ -359,7 +512,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
/* 获取camera中心点坐标 */
|
|
|
- getCenterPosition (is3D = false) {
|
|
|
+ getCenterPosition(is3D = false) {
|
|
|
let viewer = is3D ? this.viewer3D : this.viewer2D;
|
|
|
let result = viewer.camera.pickEllipsoid(
|
|
|
new this.Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2)
|
|
@@ -374,9 +527,8 @@ export default {
|
|
|
height: height
|
|
|
};
|
|
|
},
|
|
|
-
|
|
|
/* 地图放大 */
|
|
|
- big () {
|
|
|
+ big() {
|
|
|
let { lon, lat, height } = this.getCenterPosition(this.dimension === 3);
|
|
|
let viewer = this.dimension === 3 ? this.viewer3D : this.viewer2D;
|
|
|
// 镜头拉进
|
|
@@ -386,7 +538,7 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
/* 地图缩小 */
|
|
|
- small () {
|
|
|
+ small() {
|
|
|
let { lon, lat, height } = this.getCenterPosition(this.dimension === 3);
|
|
|
let viewer = this.dimension === 3 ? this.viewer3D : this.viewer2D;
|
|
|
// 镜头远离
|
|
@@ -395,14 +547,14 @@ export default {
|
|
|
duration: 1.0
|
|
|
});
|
|
|
},
|
|
|
- home () {
|
|
|
+ home() {
|
|
|
let viewer = this.dimension === 3 ? this.viewer3D : this.viewer2D;
|
|
|
viewer.camera.flyTo({
|
|
|
destination: this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000),
|
|
|
duration: 2.0
|
|
|
});
|
|
|
},
|
|
|
- Fly () {
|
|
|
+ Fly() {
|
|
|
this.shouldAnimate = !this.shouldAnimate;
|
|
|
this.viewer2D.clock.shouldAnimate = true;
|
|
|
this.viewer3D.clock.shouldAnimate = true;
|
|
@@ -412,7 +564,7 @@ export default {
|
|
|
this.stopRun();
|
|
|
}
|
|
|
},
|
|
|
- startRun (option = { multiplier: 1 }) {
|
|
|
+ startRun(option = { multiplier: 1 }) {
|
|
|
// 监听每次渲染前执行矩阵求解
|
|
|
this.viewer3D.scene.postUpdate.addEventListener(this.rotateSetting);
|
|
|
// 根据option修改一些参数
|
|
@@ -423,12 +575,12 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- stopRun () {
|
|
|
+ stopRun() {
|
|
|
let viewer = this.viewer3D;
|
|
|
viewer.clock.multiplier = 1;
|
|
|
viewer.scene.postUpdate.removeEventListener(this.rotateSetting);
|
|
|
},
|
|
|
- rotateSetting () {
|
|
|
+ rotateSetting() {
|
|
|
let Cesium = this.Cesium;
|
|
|
let viewer = this.viewer3D;
|
|
|
if (!viewer || viewer.scene.mode !== Cesium.SceneMode.SCENE3D) {
|
|
@@ -444,36 +596,36 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
/// / tabs 切换点击
|
|
|
- legendClick (tab, event) {
|
|
|
- var tab_content = document.querySelectorAll('.menu .el-tabs__content');
|
|
|
+ legendClick(tab, event) {
|
|
|
+ var tab_content = document.querySelectorAll(".menu .el-tabs__content");
|
|
|
if (this.currentLab.index == tab.index) {
|
|
|
- tab_content[0].style.display == 'none' || ''
|
|
|
- ? (tab_content[0].style.display = 'block')
|
|
|
- : (tab_content[0].style.display = 'none');
|
|
|
+ tab_content[0].style.display == "none" || ""
|
|
|
+ ? (tab_content[0].style.display = "block")
|
|
|
+ : (tab_content[0].style.display = "none");
|
|
|
}
|
|
|
if (this.currentLab.index != tab.index) {
|
|
|
this.currentLab.index = tab.index;
|
|
|
- tab_content[0].style.display = 'block';
|
|
|
+ tab_content[0].style.display = "block";
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- selectmodel (modelType) {
|
|
|
+ selectmodel(modelType) {
|
|
|
if (this.modelType == modelType) {
|
|
|
this.modelType == null;
|
|
|
} else {
|
|
|
this.modelType = modelType;
|
|
|
- var map = document.getElementById('map');
|
|
|
- map.style.cursor = 'crosshair';
|
|
|
- document.addEventListener('mousemove', function (event) {
|
|
|
- var modeltooltip = document.getElementById('modeltooltip');
|
|
|
- modeltooltip.style.display = 'block';
|
|
|
- modeltooltip.style.left = event.clientX - 180 + 'px';
|
|
|
- modeltooltip.style.top = event.clientY - 100 + 'px';
|
|
|
+ var map = document.getElementById("map");
|
|
|
+ map.style.cursor = "crosshair";
|
|
|
+ document.addEventListener("mousemove", function (event) {
|
|
|
+ var modeltooltip = document.getElementById("modeltooltip");
|
|
|
+ modeltooltip.style.display = "block";
|
|
|
+ modeltooltip.style.left = event.clientX - 180 + "px";
|
|
|
+ modeltooltip.style.top = event.clientY - 100 + "px";
|
|
|
});
|
|
|
|
|
|
- document.addEventListener('mouseout', function () {
|
|
|
- var modeltooltip = document.getElementById('modeltooltip');
|
|
|
- modeltooltip.style.display = 'none';
|
|
|
+ document.addEventListener("mouseout", function () {
|
|
|
+ var modeltooltip = document.getElementById("modeltooltip");
|
|
|
+ modeltooltip.style.display = "none";
|
|
|
});
|
|
|
}
|
|
|
}
|