|
|
@@ -16,23 +16,53 @@
|
|
|
<div id="3DcesiumContainer" class="map"></div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-tabs type="border-card" v-model="activeName" tab-position="left" class="menu" :stretch="true"
|
|
|
+ <el-tabs type="border-card" v-model="panelName" tab-position="left" class="menu" :stretch="true"
|
|
|
@tab-click="legendClick">
|
|
|
<el-tab-pane name="1">
|
|
|
<el-tooltip placement="right" effect="light" slot="label">
|
|
|
<span slot="content" class="item">想定</span>
|
|
|
- <span><i class="el-icon-house"></i></span>
|
|
|
+ <span><i class="el-icon-document"></i></span>
|
|
|
</el-tooltip>
|
|
|
<el-table :data="situation">
|
|
|
<el-table-column label="名称" prop="xdname" width="150px"></el-table-column>
|
|
|
<el-table-column label="操作" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button type="primary" @click="getJson(scope.row)">导入</el-button>
|
|
|
+ <template slot-scope="scope" >
|
|
|
+ <el-button type="primary" @click="getJson(scope.row)" size="mini">导入</el-button>
|
|
|
+ <el-button type="primary" @click="seeJson(scope.row)" size="mini">查看</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</el-tab-pane>
|
|
|
- <el-tab-pane name="2" :disabled="this.mode==true">
|
|
|
+
|
|
|
+ <el-tab-pane name="2">
|
|
|
+ <el-tooltip placement="right" effect="light" slot="label">
|
|
|
+ <span slot="content" class="item">图层</span>
|
|
|
+ <span><i class="el-icon-map-location"></i></span>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-select v-model="maplayer.type" >
|
|
|
+ <el-option
|
|
|
+ v-for="item in mapOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-button type="primary" @click="setMapLayer()">确定</el-button>
|
|
|
+ <div class="image-container">
|
|
|
+ <div v-for="(image, index) in maplayerImages" :key="index" class="image-item">
|
|
|
+ <el-image
|
|
|
+ :src="image.url"
|
|
|
+ fit="cover"
|
|
|
+ style = "height:180px; width:180;"
|
|
|
+ :class="{ 'highlighted-red': maplayer.layer == image.layer }"
|
|
|
+ @click="maplayer.layer = image.layer"
|
|
|
+ ></el-image>
|
|
|
+ <div style="text-align: center;">{{ image.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane name="3" v-if="this.mode==false">
|
|
|
<el-button type="primary" @click="addRed()">新增</el-button>
|
|
|
<el-tooltip placement="right" effect="light" slot="label">
|
|
|
<span slot="content" class="item">红方兵力</span>
|
|
|
@@ -44,7 +74,7 @@
|
|
|
<el-table-column label="干扰" align="center" prop="method"></el-table-column>
|
|
|
</el-table>
|
|
|
</el-tab-pane>
|
|
|
- <el-tab-pane name="3" :disabled="this.mode==true">
|
|
|
+ <el-tab-pane name="4" v-if="this.mode==false">
|
|
|
<el-button type="primary" @click="addBlue()">新增</el-button>
|
|
|
<el-tooltip placement="right" effect="light" slot="label">
|
|
|
<span slot="content" class="item">蓝方兵力</span>
|
|
|
@@ -55,7 +85,7 @@
|
|
|
<el-table-column label="名称" align="center" prop="name"></el-table-column>
|
|
|
</el-table>
|
|
|
</el-tab-pane>
|
|
|
- <el-tab-pane name="4" :disabled="this.mode==true">
|
|
|
+ <el-tab-pane name="5" v-if="this.mode==false">
|
|
|
<el-button type="primary" @click="addSatellite()">新增</el-button>
|
|
|
<el-tooltip placement="right" effect="light" slot="label">
|
|
|
<span slot="content" class="item">蓝方卫星</span>
|
|
|
@@ -66,7 +96,8 @@
|
|
|
<el-table-column label="名称" align="center" prop="name"></el-table-column>
|
|
|
</el-table>
|
|
|
</el-tab-pane>
|
|
|
- <el-tab-pane name="5" :disabled="this.mode==false">
|
|
|
+
|
|
|
+ <el-tab-pane name="6" v-if="this.mode==true">
|
|
|
<el-tooltip placement="right" effect="light" slot="label">
|
|
|
<span slot="content" class="item">消息</span>
|
|
|
<span><i class="el-icon-chat-line-round"></i></span>
|
|
|
@@ -77,7 +108,7 @@
|
|
|
<el-table-column label="消息" align="center" prop="context"></el-table-column>
|
|
|
</el-table>
|
|
|
</el-tab-pane>
|
|
|
- <el-tab-pane name="6" :disabled="this.mode==false">
|
|
|
+ <el-tab-pane name="7" v-if="this.mode==true">
|
|
|
<el-tooltip placement="right" effect="light" slot="label">
|
|
|
<span slot="content" class="item">红方兵力</span>
|
|
|
<span><i class="el-icon-s-flag"></i></span>
|
|
|
@@ -102,16 +133,17 @@
|
|
|
</el-table>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
- <div class="buttons">
|
|
|
+ <div class="topbuttons">
|
|
|
<el-button icon="el-icon-full-screen" circle @click="ismax()"></el-button>
|
|
|
<el-button icon="el-icon-house" circle @click="home()"></el-button>
|
|
|
<el-button icon="el-icon-plus" circle @click="big()"></el-button>
|
|
|
<el-button icon="el-icon-minus" circle @click="small()"></el-button>
|
|
|
- <el-button icon="el-icon-download" circle @click="saveJson()" :disabled="this.mode==true"></el-button>
|
|
|
+ <el-button icon="el-icon-close" circle @click="removeEntitys();"></el-button>
|
|
|
+ </div>
|
|
|
+ <div class="bottombuttons">
|
|
|
+ <el-button icon="el-icon-download" circle @click="saveJson()" v-if="this.mode!=true"></el-button>
|
|
|
</div>
|
|
|
</el-row>
|
|
|
- <!-- <TimeLine :showLayers="showLayers" :timeDataArray="timeDataArray" class="TimeLine"></TimeLine> -->
|
|
|
- <div>
|
|
|
<el-dialog title="结果" :visible.sync="dialogVisible" width="50%">
|
|
|
<el-tabs v-model="activeNametwo">
|
|
|
<el-tab-pane label="消息列表" name="first">
|
|
|
@@ -152,14 +184,11 @@
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
-
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button @click="exportReport()">导出报告</el-button>
|
|
|
<el-button @click="dialogVisible = false">关闭</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
<el-dialog title="红方作战单元详细信息" :visible.sync="missileVisible" width="50%">
|
|
|
|
|
|
<el-row>
|
|
|
@@ -197,9 +226,6 @@
|
|
|
<el-button @click="missileVisible = false">关闭</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
- </div>
|
|
|
- <div v-if="isShow" class="modeltooltip" ref="modeltooltip">{{ modeltooltip }}</div>
|
|
|
- <div>
|
|
|
<el-dialog title="新增红方作战单元" :visible ="redVisible" width="50%">
|
|
|
<el-form ref="form" :model="redForm" label-width="80px">
|
|
|
<el-form-item label="单元名称">
|
|
|
@@ -231,8 +257,6 @@
|
|
|
<el-button @click="redVisible = false">关闭</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
<el-dialog title="新增蓝方作战单元" :visible ="blueVisible" width="50%">
|
|
|
<el-form ref="form" :model="blueForm" label-width="80px">
|
|
|
<el-form-item label="单元名称">
|
|
|
@@ -254,8 +278,19 @@
|
|
|
<el-button @click="blueVisible = false">关闭</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
+ <el-dialog title="想定文件信息" :visible.sync ="JsonVisible" width="50%">
|
|
|
+ <div style="display:flex;">
|
|
|
+ <div style="width:50%;">
|
|
|
+ <div>名称:{{ tree.info.xdname }}</div>
|
|
|
+ <div>类型:{{ tree.info.type }}</div>
|
|
|
+ <div>开始时间:{{ tree.info.starttime }}</div>
|
|
|
+ <div>结束时间:{{ tree.info.endtime }}</div>
|
|
|
+ <div>创建时间:{{ tree.info.createtime }}</div>
|
|
|
+ </div>
|
|
|
+ <v-jstree :data="tree.data">
|
|
|
+ </v-jstree>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
<el-dialog title="新增蓝方预卫星" :visible ="satelliteVisible" width="50%">
|
|
|
<el-form ref="form" :model="satelliteForm" label-width="80px">
|
|
|
<el-form-item label="卫星名称">
|
|
|
@@ -277,7 +312,7 @@
|
|
|
<el-button @click="satelliteVisible = false">关闭</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
- </div>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -343,10 +378,14 @@ export default {
|
|
|
TLE_LINE1: '',
|
|
|
TLE_LINE2: '',
|
|
|
},
|
|
|
+ panelName: "1",
|
|
|
+ //弹窗
|
|
|
redVisible: false,
|
|
|
blueVisible: false,
|
|
|
satelliteVisible: false,
|
|
|
missileVisible:false,
|
|
|
+ JsonVisible:false,
|
|
|
+
|
|
|
situation: [],
|
|
|
xdName: '',
|
|
|
nameIdList: [],
|
|
|
@@ -381,8 +420,33 @@ export default {
|
|
|
satellite3: null,
|
|
|
center3: null,
|
|
|
missile3: null,
|
|
|
-
|
|
|
},
|
|
|
+ maplayer:{
|
|
|
+ type: 5,
|
|
|
+ layer: 'normal'
|
|
|
+ },
|
|
|
+ mapOptions: [{
|
|
|
+ value: 2,
|
|
|
+ label: '二维地图'
|
|
|
+ }, {
|
|
|
+ value: 3,
|
|
|
+ label: '三维地图'
|
|
|
+ }, {
|
|
|
+ value: 5,
|
|
|
+ label: '全部地图'
|
|
|
+ }],
|
|
|
+ maplayerImages: [
|
|
|
+ {
|
|
|
+ url: require(`@/assets/image/normalmap.jpg`),
|
|
|
+ name: "卫星地图",
|
|
|
+ layer:'normal'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require(`@/assets/image/electron.jpg`),
|
|
|
+ name: "电子地图",
|
|
|
+ layer:'electron'
|
|
|
+ }
|
|
|
+ ],
|
|
|
// 选中的点
|
|
|
selectedMarker: null,
|
|
|
currentItem: ['1', '2', '3', '4'],
|
|
|
@@ -405,6 +469,15 @@ export default {
|
|
|
showLayers: null,
|
|
|
timeDataArray: ['Time 1', 'Time 2', 'Time 3', 'Time 4'],
|
|
|
jsonData: null,
|
|
|
+ tree: {
|
|
|
+ info: {
|
|
|
+ xdname: null,
|
|
|
+ type: null,
|
|
|
+ starttime: null,
|
|
|
+ endtime: null
|
|
|
+ }, //信息
|
|
|
+ data: [] //数据
|
|
|
+ },
|
|
|
mapNavOptions: {
|
|
|
// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和Cesium.Rectangle.
|
|
|
defaultResetView: Cesium.Cartographic.fromDegrees(110, 30, 2000000),
|
|
|
@@ -456,9 +529,6 @@ export default {
|
|
|
},
|
|
|
mounted() {
|
|
|
this.cesiumInit();
|
|
|
- // this.modelsInit();
|
|
|
- // this.pointMove();
|
|
|
- // this.startWebSocket();
|
|
|
},
|
|
|
methods: {
|
|
|
modelsInit(modelUrl,model){
|
|
|
@@ -488,6 +558,43 @@ export default {
|
|
|
this.models.satellite3 = model
|
|
|
}
|
|
|
|
|
|
+ },
|
|
|
+ setMapLayer(){
|
|
|
+ if(this.maplayer.type == 2){
|
|
|
+ if(this.maplayer.layer =='normal'){
|
|
|
+ this.$data._viewer2D.imageryLayers.get(0).show = true
|
|
|
+ this.$data._viewer2D.imageryLayers.get(1).show = false
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.$data._viewer2D.imageryLayers.get(0).show = false
|
|
|
+ this.$data._viewer2D.imageryLayers.get(1).show = true
|
|
|
+ }
|
|
|
+ }else
|
|
|
+ if(this.maplayer.type == 3){
|
|
|
+ if(this.maplayer.layer =='normal'){
|
|
|
+ this.$data._viewer3D.imageryLayers.get(0).show = true
|
|
|
+ this.$data._viewer3D.imageryLayers.get(1).show = false
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.$data._viewer3D.imageryLayers.get(0).show = false
|
|
|
+ this.$data._viewer3D.imageryLayers.get(1).show = true
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ console.log(this.maplayer.layer)
|
|
|
+ if(this.maplayer.layer =='normal'){
|
|
|
+ this.$data._viewer2D.imageryLayers.get(0).show = true
|
|
|
+ this.$data._viewer2D.imageryLayers.get(1).show = false
|
|
|
+ this.$data._viewer3D.imageryLayers.get(0).show = true
|
|
|
+ this.$data._viewer3D.imageryLayers.get(1).show = false
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.$data._viewer2D.imageryLayers.get(0).show = false
|
|
|
+ this.$data._viewer2D.imageryLayers.get(1).show = true
|
|
|
+ this.$data._viewer3D.imageryLayers.get(0).show = false
|
|
|
+ this.$data._viewer3D.imageryLayers.get(1).show = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
},
|
|
|
getImagePath(index) {
|
|
|
if (index == 1) {
|
|
|
@@ -597,6 +704,132 @@ export default {
|
|
|
this.markLine(point1, point2, "red")
|
|
|
}
|
|
|
},
|
|
|
+ async seeJson(row) {
|
|
|
+ //打开窗口
|
|
|
+ this.JsonVisible = true
|
|
|
+ let fileInfoStr = row.xdfile;
|
|
|
+ let fileInfoArr = JSON.parse(fileInfoStr);
|
|
|
+ this.$data._viewer2D.entities.removeAll();
|
|
|
+ this.$data._viewer3D.entities.removeAll();
|
|
|
+ await axios
|
|
|
+ .get("http://127.0.0.1:8084/admin/online/onlineOperation/downloadDatasource/main", {
|
|
|
+ params: {
|
|
|
+ datasourceId: "1656243335922192384",
|
|
|
+ fieldName: "xdfile",
|
|
|
+ asImage: false,
|
|
|
+ dataId: row.id,
|
|
|
+ filename: fileInfoArr[0].filename,
|
|
|
+ Authorization: getToken(),
|
|
|
+ MenuId: "1656244747347431424"
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ console.log('response.data :>> ', response.data);
|
|
|
+ this.setTree(response.data) //设置树形组件数据
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ // 处理错误
|
|
|
+ console.error(error);
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ setTree(data){
|
|
|
+ this.tree.info.xdname = data.xdname
|
|
|
+ this.tree.info.type = data.type
|
|
|
+ this.tree.info.createtime = data.createtime
|
|
|
+ this.tree.info.starttime = data.starttime
|
|
|
+ this.tree.info.endtime = data.endtime
|
|
|
+ this.tree.info.steptime = data.steptime
|
|
|
+ //第一层
|
|
|
+ if(data.redunit != null){
|
|
|
+ this.tree.data.push({
|
|
|
+ id: 0,
|
|
|
+ text: "红方方作战单元",
|
|
|
+ icon: "el-icon-s-flag",
|
|
|
+ opened: true,
|
|
|
+ children: []
|
|
|
+ })
|
|
|
+
|
|
|
+ for(let i = 0; i< data.redunit.length; i++){
|
|
|
+ this.tree.data[0].children.push({
|
|
|
+ id: 0+i,
|
|
|
+ text: data.redunit[i].type+"-"+data.redunit[i].name,
|
|
|
+ icon: "el-icon-aim",
|
|
|
+ opened: true,
|
|
|
+ children: []
|
|
|
+ })
|
|
|
+
|
|
|
+ // for(let j = 0; j< data.redunit[i].components_json.length; j++){
|
|
|
+ // this.tree.data[0].children[i].children[j].push({
|
|
|
+ // id: 0+i+j,
|
|
|
+ // text: data.redunit[i].type+"-"+data.redunit[i].name,
|
|
|
+ // icon: "el-icon-aim",
|
|
|
+ // opened: true,
|
|
|
+ // children: []
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if(data.blueunit != null){
|
|
|
+ this.tree.data.push({
|
|
|
+ id: 1,
|
|
|
+ text: "蓝方作战单元",
|
|
|
+ icon: "el-icon-s-flag",
|
|
|
+ opened: true,
|
|
|
+ children: []
|
|
|
+ })
|
|
|
+ for(let i = 0; i< data.blueunit.length; i++){
|
|
|
+ this.tree.data[1].children.push({
|
|
|
+ id: 1+i,
|
|
|
+ text: data.blueunit[i].type+"-"+data.blueunit[i].name,
|
|
|
+ icon: "el-icon-aim",
|
|
|
+ opened: true,
|
|
|
+ children: []
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if(data.satellite != null){
|
|
|
+ this.tree.data.push({
|
|
|
+ id: 2,
|
|
|
+ text: "蓝方侦察卫星",
|
|
|
+ icon: "el-icon-map-location",
|
|
|
+ opened: true,
|
|
|
+ children: []
|
|
|
+ })
|
|
|
+ for(let i = 0; i< data.satellite.length; i++){
|
|
|
+ let properties = data.satellite[i][data.satellite[i].name];
|
|
|
+ this.tree.data[2].children.push({
|
|
|
+ id: 20,
|
|
|
+ text: properties.type+"-"+ data.satellite.name,
|
|
|
+ icon: "el-icon-aim",
|
|
|
+ opened: true,
|
|
|
+ children: []
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if(data.center != null){
|
|
|
+ this.tree.data.push({
|
|
|
+ id: 3,
|
|
|
+ text: "蓝方指挥中心",
|
|
|
+ opened: true,
|
|
|
+ icon: "el-icon-ship",
|
|
|
+ children: []
|
|
|
+ })
|
|
|
+ for(let i = 0; i< data.center.length; i++){
|
|
|
+ let properties = data.center[i][data.center[i].name];
|
|
|
+ this.tree.data[3].children.push({
|
|
|
+ id: 30,
|
|
|
+ text: properties.type+"-" + data.center.name,
|
|
|
+ icon: "el-icon-aim",
|
|
|
+ opened: true,
|
|
|
+ children: []
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
showMissileInfo(row){
|
|
|
console.log('row :>> ', row);
|
|
|
this.selectMissile = row
|
|
|
@@ -666,7 +899,33 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
cesiumInit() {
|
|
|
+ //定义图层
|
|
|
+ let normalMapLayer = new Cesium.WebMapTileServiceImageryProvider({
|
|
|
+ url: "http://127.0.0.1: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:4326',
|
|
|
+ tilingScheme: new Cesium.GeographicTilingScheme(), // 切片方案，与TileMatrixSet中的切片组织相对应；调用EPSG4326坐标系时，切片方案必须为GeographicTilingScheme；
|
|
|
+ maximumLevel:10,
|
|
|
+ show: true
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ let demMapLayer = new Cesium.WebMapTileServiceImageryProvider({
|
|
|
+ url: "http://127.0.0.1:8080/geoserver/gwc/service/wmts/rest/electron:electron/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png",
|
|
|
+ layer: 'electron:electron',
|
|
|
+ style: 'raster',
|
|
|
+ format: 'image/png',
|
|
|
+ tileMatrixSetID: 'EPSG:4326',
|
|
|
+ tilingScheme: new Cesium.GeographicTilingScheme(), // 切片方案，与TileMatrixSet中的切片组织相对应；调用EPSG4326坐标系时，切片方案必须为GeographicTilingScheme；
|
|
|
+ maximumLevel:10,
|
|
|
+ show: true
|
|
|
+
|
|
|
+ })
|
|
|
+ //cesium初始化
|
|
|
this.$data._viewer2D = new Cesium.Viewer("2DcesiumContainer", {
|
|
|
+ requestRenderMode : true, //开启 requestRenderMode 以减少Cesium渲染一个新帧总的时间，并且降低应用中Cesium的CPU使用率。
|
|
|
sceneMode: Cesium.SceneMode.SCENE2D,
|
|
|
animation: this.mode, // 是否显示时间轴动画
|
|
|
baseLayerPicker: false,
|
|
|
@@ -677,17 +936,11 @@ export default {
|
|
|
sceneModePicker: false,
|
|
|
navigationHelpButton: false,
|
|
|
selectionIndicator: false,
|
|
|
- imageryProvider: new 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",
|
|
|
- show: false
|
|
|
- })
|
|
|
+ imageryProvider: normalMapLayer
|
|
|
});
|
|
|
|
|
|
this.$data._viewer3D = new Cesium.Viewer("3DcesiumContainer", {
|
|
|
+ requestRenderMode : true, //开启 requestRenderMode 以减少Cesium渲染一个新帧总的时间，并且降低应用中Cesium的CPU使用率。
|
|
|
animation: this.mode, // 是否显示时间轴动画
|
|
|
baseLayerPicker: false,
|
|
|
homeButton: false,
|
|
|
@@ -697,55 +950,25 @@ export default {
|
|
|
sceneModePicker: false,
|
|
|
navigationHelpButton: false,
|
|
|
selectionIndicator: false,
|
|
|
- // imageryProvider: new Cesium.WebMapServiceImageryProvider({
|
|
|
- // url: '/geoserver/map/wms',
|
|
|
- // // 这里是自定义的图层名称
|
|
|
- // layers: 'map',
|
|
|
- // parameters: {
|
|
|
- // service: 'WMS',
|
|
|
- // format: 'image/png',
|
|
|
- // transparent: true
|
|
|
- // }
|
|
|
- // }),
|
|
|
-
|
|
|
- imageryProvider:
|
|
|
- // new Cesium.WebMapTileServiceImageryProvider({
|
|
|
- // url: "http://127.0.0.1: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:4326',
|
|
|
- // tilingScheme: new Cesium.GeographicTilingScheme(), // 切片方案，与TileMatrixSet中的切片组织相对应；调用EPSG4326坐标系时，切片方案必须为GeographicTilingScheme；
|
|
|
- // maximumLevel:10,
|
|
|
-
|
|
|
- // }),
|
|
|
- new 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",
|
|
|
- show: false
|
|
|
- })
|
|
|
+ imageryProvider: normalMapLayer
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
+ //添加额外图层
|
|
|
+ this.$data._viewer3D.imageryLayers.addImageryProvider(demMapLayer);
|
|
|
+ this.$data._viewer2D.imageryLayers.addImageryProvider(demMapLayer);
|
|
|
+ //图层隐藏
|
|
|
+ this.setMapLayer()
|
|
|
+ //去除原有样式
|
|
|
this.$data._viewer3D._cesiumWidget._creditContainer.style.display = "none";
|
|
|
this.$data._viewer2D._cesiumWidget._creditContainer.style.display = "none";
|
|
|
+ //设置摄像机
|
|
|
this.$data._viewer3D.camera.setView({
|
|
|
destination: new Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000)
|
|
|
- // 方向，俯视和仰视的视角
|
|
|
- // orientation:{
|
|
|
- // heading: Cesium.Math.toRadians(90),//坐标系旋转90度
|
|
|
- // pitch: Cesium.Math.toRadians(-45) ,//设置俯仰角度为-45度
|
|
|
- // }
|
|
|
+
|
|
|
});
|
|
|
this.$data._viewer2D.camera.setView({
|
|
|
destination: new Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000)
|
|
|
- // 方向，俯视和仰视的视角
|
|
|
- // orientation:{
|
|
|
- // heading: Cesium.Math.toRadians(90),//坐标系旋转90度
|
|
|
- // pitch: Cesium.Math.toRadians(-45) ,//设置俯仰角度为-45度
|
|
|
- // }
|
|
|
+
|
|
|
});
|
|
|
// this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 1500000; //相机高度的最大值
|
|
|
this.$data._viewer2D.camera.percentageChanged = 0.01;
|
|
|
@@ -757,10 +980,10 @@ export default {
|
|
|
this.handler2D = new Cesium.ScreenSpaceEventHandler(this.$data._viewer2D.scene.canvas);
|
|
|
this.handler3D = new Cesium.ScreenSpaceEventHandler(this.$data._viewer3D.scene.canvas);
|
|
|
//设置导航组件
|
|
|
- // new CesiumNavigation(this.$data._viewer2D, this.mapNavOptions);
|
|
|
new CesiumNavigation(this.$data._viewer3D, this.mapNavOptions);
|
|
|
},
|
|
|
sync() {
|
|
|
+ //更新地图位置
|
|
|
if (this.mousevalue == "3D") {
|
|
|
// 三维地图中心点
|
|
|
let center = new Cesium.Cartesian2(
|
|
|
@@ -776,7 +999,7 @@ export default {
|
|
|
position = this.convertWorldToCartographic(position);
|
|
|
// 更新二维地图
|
|
|
this.$data._viewer2D.scene.camera.setView({
|
|
|
- destination: new Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance)
|
|
|
+ destination: new Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance),
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
@@ -795,10 +1018,11 @@ export default {
|
|
|
position = this.convertWorldToCartographic(position);
|
|
|
// 更新三维地图
|
|
|
this.$data._viewer3D.scene.camera.setView({
|
|
|
- destination: new Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance)
|
|
|
+ destination: new Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance),
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
},
|
|
|
// 将世界坐标系转换为经纬度坐标系
|
|
|
convertWorldToCartographic(worldPosition) {
|
|
|
@@ -860,6 +1084,7 @@ export default {
|
|
|
duration: 1.0
|
|
|
});
|
|
|
},
|
|
|
+ //返回到初始位置
|
|
|
home() {
|
|
|
let viewer = (this.dimension === 3 || this.dimension === 5) ? this.$data._viewer3D : this.$data._viewer2D;
|
|
|
viewer.camera.flyTo({
|
|
|
@@ -867,6 +1092,10 @@ export default {
|
|
|
duration: 2.0
|
|
|
});
|
|
|
},
|
|
|
+ removeEntitys(){
|
|
|
+ this.$data._viewer2D.entities.removeAll();
|
|
|
+ this.$data._viewer3D.entities.removeAll();
|
|
|
+ },
|
|
|
// tabs 切换点击
|
|
|
legendClick({ index }) {
|
|
|
this.selectModel();
|
|
|
@@ -939,7 +1168,6 @@ export default {
|
|
|
if (type == 'red') {
|
|
|
color = 'Red'
|
|
|
currentModel = [this.models.missile2!=null?Cesium.clone(this.models.missile2):null,this.models.missile3!=null?Cesium.clone(this.models.missile3):null];
|
|
|
- console.log("333333333333333333333333333333333333333333333333333"+this.models.missile2)
|
|
|
modelUrl = [missileModel2,missileModel3]
|
|
|
for(let i = 0;i < this.jsonData.redunit.length;i++)
|
|
|
{
|
|
|
@@ -1539,6 +1767,7 @@ export default {
|
|
|
entity.orientation = new Cesium.VelocityOrientationProperty(entity.position);
|
|
|
//设置实体位置
|
|
|
entity.position.setValue(position)
|
|
|
+
|
|
|
this.markSatelliteLine(oldPosition, position, 'Blue', viewer)
|
|
|
},
|
|
|
//计算有多少个导弹进入了雷达的原始范围
|
|
|
@@ -1998,7 +2227,7 @@ export default {
|
|
|
margin-right: 0px !important;
|
|
|
}
|
|
|
|
|
|
-.buttons {
|
|
|
+.topbuttons {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
@@ -2009,6 +2238,17 @@ export default {
|
|
|
top: 20px;
|
|
|
}
|
|
|
|
|
|
+.bottombuttons {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-items: center;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 999;
|
|
|
+ right: 20px;
|
|
|
+ top: 380px;
|
|
|
+}
|
|
|
+
|
|
|
.image-title {
|
|
|
margin-top: 10px;
|
|
|
text-align: center;
|
|
|
@@ -2018,7 +2258,8 @@ export default {
|
|
|
}
|
|
|
|
|
|
::v-deep .el-tabs--border-card>.el-tabs__content {
|
|
|
- width: 300px;
|
|
|
+ min-width: 300px;
|
|
|
+ max-width: 500px;
|
|
|
height: 100%;
|
|
|
overflow-y: visible;
|
|
|
}
|
|
|
@@ -2101,4 +2342,24 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 90%;
|
|
|
}
|
|
|
+
|
|
|
+.image-container {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ overflow: auto;
|
|
|
+ max-height: 300px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.image-container .image-item {
|
|
|
+ width: 48%;
|
|
|
+ }
|
|
|
+
|
|
|
+.highlighted-red {
|
|
|
+ border: 2px solid red; /* 可以根据需求设置高亮效果，这里用蓝色边框表示 */
|
|
|
+ box-shadow: 0 0 5px red; /* 可选：添加阴影效果 */
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
</style>
|
