|
|
@@ -1,144 +1,175 @@
|
|
|
<template>
|
|
|
- <div id="cesiumContainer">
|
|
|
- </div>
|
|
|
+ <div id="cesiumContainer">
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import cesiumEntityUtils from "@/utils/cesiumEntityUtils";
|
|
|
import GlobleCountryLine from "../../assets/MapData/GlobleCountryLine.json";
|
|
|
+import {number} from "echarts/lib/export";
|
|
|
|
|
|
let viewer;
|
|
|
export default {
|
|
|
- name: "cesiumViewer",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- globleLines: GlobleCountryLine,
|
|
|
- locationLonLat: [],
|
|
|
- rwxxztVis: null,
|
|
|
- projectEntitys: {},
|
|
|
- showAll: true
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- mapPoint() {
|
|
|
- return this.$store.state.xqglMapPointVisible
|
|
|
- },
|
|
|
- mapRectangle() {
|
|
|
- return this.$store.state.xqglMapRectangleVisible
|
|
|
- },
|
|
|
- clickedTargetRow() {
|
|
|
- return this.$store.state.xqglClickedTargetRowForCesiumSetView
|
|
|
- },
|
|
|
- currentRouteName() {
|
|
|
- return this.$route.name;
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- currentRouteName: {
|
|
|
- handler(newValue) {
|
|
|
- if (viewer) {
|
|
|
- this.displayTimeLine(newValue === 'rwjsPage' && this.rwxxztVis);
|
|
|
- return;
|
|
|
- }
|
|
|
- const t = setInterval(() => {
|
|
|
- if (viewer) {
|
|
|
- this.displayTimeLine(newValue === 'rwjsPage' && this.rwxxztVis);
|
|
|
- clearInterval(t);
|
|
|
- }
|
|
|
- }, 10);
|
|
|
- },
|
|
|
- immediate: true,
|
|
|
- },
|
|
|
- locationLonLat: {
|
|
|
- deep: true,
|
|
|
- handler(newval) {
|
|
|
- this.$store.dispatch("xqglMapPointLonLat", newval)
|
|
|
- }
|
|
|
- },
|
|
|
- mapPoint(newPoint) {
|
|
|
- // this.moveEntities(this.thisviewer);
|
|
|
- this.moveMapLeftEventMonitor(window.viewer);
|
|
|
- console.log("地图上得到点击,地图点选的信息：", newPoint);
|
|
|
- this.mapClickPointAdd(window.viewer)
|
|
|
- },
|
|
|
- mapRectangle(newRec) {
|
|
|
- // this.moveEntities(this.thisviewer);
|
|
|
- this.moveMapLeftEventMonitor(window.viewer)
|
|
|
- console.log("地图上得到点击,地图框选的信息：", newRec);
|
|
|
- this.mapDrawRectangle(window.viewer)
|
|
|
- },
|
|
|
- clickedTargetRow(newClickedRow) {
|
|
|
- //测试点位添加
|
|
|
- const viewer = window.viewer;
|
|
|
- cesiumEntityUtils.removeCustomLayer(viewer, "xqgl");
|
|
|
- cesiumEntityUtils.addCustomLayer(viewer, "xqgl")
|
|
|
- let datasource = cesiumEntityUtils.getCustomLayer(viewer, "xqgl");
|
|
|
- newClickedRow.forEach((item, index) => {
|
|
|
- let lon = null;
|
|
|
- let lat = null;
|
|
|
- if (item.pointDTOList.length === 1) {
|
|
|
- lon = item.pointDTOList[0].lng;
|
|
|
- lat = item.pointDTOList[0].lat;
|
|
|
- }
|
|
|
- // cesiumEntityUtils.controlLayer(viewer, "xqgl", false)
|
|
|
- if (datasource) {
|
|
|
- let position = Cesium.Cartesian3.fromDegrees(lon, lat);
|
|
|
- datasource.entities.add({
|
|
|
- id: 'target' + index,
|
|
|
- position: position,
|
|
|
- billboard: {
|
|
|
- image: './static/icon/target_red.svg',
|
|
|
- width: 16,
|
|
|
- height: 16
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
- return
|
|
|
- // ----------------------------------------------
|
|
|
- let lon = null;
|
|
|
- let lat = null;
|
|
|
- if (newClickedRow.pointDTOList.length === 1) {
|
|
|
- lon = newClickedRow.pointDTOList[0].lng;
|
|
|
- lat = newClickedRow.pointDTOList[0].lat;
|
|
|
- this.addClickTargetPoint(lon, lat, true);
|
|
|
- }
|
|
|
- if (newClickedRow.pointDTOList.length === 4) {
|
|
|
- // lon = (newClickedRow.pointDTOList[0].lng + newClickedRow.pointDTOList[3].lng) / 2;
|
|
|
- // lat = (newClickedRow.pointDTOList[0].lat + newClickedRow.pointDTOList[3].lat) / 2;
|
|
|
- let polygon = [];
|
|
|
- let pointsSort = newClickedRow.pointDTOList.sort((a, b) => a.sequence - b.sequence);
|
|
|
- pointsSort.forEach(item => {
|
|
|
- polygon.push(item.lng);
|
|
|
- polygon.push(item.lat);
|
|
|
- });
|
|
|
- let polygonObj = {
|
|
|
- id: newClickedRow.targetId,
|
|
|
- name: newClickedRow.targetName,
|
|
|
- material: Cesium.Color.fromCssColorString('rgba(255,0,0,0.5)'),
|
|
|
- polygon,
|
|
|
- };
|
|
|
- this.addClickTargetRectangle([polygonObj]);
|
|
|
- }
|
|
|
- // this.addClickTargetPoint(lon, lat, true)
|
|
|
- // console.log("地图上得到目标列表被单击的行数据：", newClickedRow);
|
|
|
- },
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.initViewer();
|
|
|
- this.componentsEvents();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- initViewer() {
|
|
|
- viewer = new Cesium.Viewer("cesiumContainer", {
|
|
|
- // 连接地图服务
|
|
|
- // imageryProvider: new Cesium.UrlTemplateImageryProvider({
|
|
|
- // // url: "http://192.168.1.188:9109/map/?z={z}&x={x}&y={y}",
|
|
|
- // url: window.mapUrl,
|
|
|
- // tilingScheme: new Cesium.WebMercatorTilingScheme(),
|
|
|
- // maximumLevel: 7,
|
|
|
- // show: false
|
|
|
- // }),
|
|
|
+ name: "cesiumViewer",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ globleLines: GlobleCountryLine,
|
|
|
+ locationLonLat: [],
|
|
|
+ rwxxztVis: null,
|
|
|
+ projectEntitys: {},
|
|
|
+ showAll: true
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ mapPoint() {
|
|
|
+ return this.$store.state.xqglMapPointVisible
|
|
|
+ },
|
|
|
+ mapRectangle() {
|
|
|
+ return this.$store.state.xqglMapRectangleVisible
|
|
|
+ },
|
|
|
+ clickedTargetRow() {
|
|
|
+ return this.$store.state.xqglClickedTargetRowForCesiumSetView
|
|
|
+ },
|
|
|
+ currentRouteName() {
|
|
|
+ return this.$route.name;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ currentRouteName: {
|
|
|
+ handler(newValue) {
|
|
|
+ if (viewer) {
|
|
|
+ this.displayTimeLine(newValue === 'rwjsPage' && this.rwxxztVis);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const t = setInterval(() => {
|
|
|
+ if (viewer) {
|
|
|
+ this.displayTimeLine(newValue === 'rwjsPage' && this.rwxxztVis);
|
|
|
+ clearInterval(t);
|
|
|
+ }
|
|
|
+ }, 10);
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ locationLonLat: {
|
|
|
+ deep: true,
|
|
|
+ handler(newval) {
|
|
|
+ this.$store.dispatch("xqglMapPointLonLat", newval)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mapPoint(newPoint) {
|
|
|
+ // this.moveEntities(this.thisviewer);
|
|
|
+ this.moveMapLeftEventMonitor(window.viewer);
|
|
|
+ console.log("地图上得到点击,地图点选的信息：", newPoint);
|
|
|
+ this.mapClickPointAdd(window.viewer)
|
|
|
+ },
|
|
|
+ mapRectangle(newRec) {
|
|
|
+ // this.moveEntities(this.thisviewer);
|
|
|
+ this.moveMapLeftEventMonitor(window.viewer)
|
|
|
+ console.log("地图上得到点击,地图框选的信息：", newRec);
|
|
|
+ this.mapDrawRectangle(window.viewer)
|
|
|
+ },
|
|
|
+ clickedTargetRow(newClickedRow) {
|
|
|
+ //测试点位添加
|
|
|
+ const viewer = window.viewer;
|
|
|
+ cesiumEntityUtils.removeCustomLayer(viewer, "xqgl");
|
|
|
+ cesiumEntityUtils.addCustomLayer(viewer, "xqgl")
|
|
|
+ let datasource = cesiumEntityUtils.getCustomLayer(viewer, "xqgl");
|
|
|
+ newClickedRow.forEach((item, index) => {
|
|
|
+ const type = Number(item.type);
|
|
|
+ if ([0, 1, 4].includes(type)) {
|
|
|
+ item.pointDTOList.forEach((d, j) => {
|
|
|
+ if (datasource) {
|
|
|
+ let position = Cesium.Cartesian3.fromDegrees(d.lng, d.lat);
|
|
|
+ datasource.entities.add({
|
|
|
+ id: 'xqgltarget' + index + '-' + j,
|
|
|
+ position: position,
|
|
|
+ billboard: {
|
|
|
+ image: './static/icon/target_red.svg',
|
|
|
+ width: 16,
|
|
|
+ height: 16
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (type == 2) {
|
|
|
+ let polygon = [];
|
|
|
+ let pointsSort = item.pointDTOList.sort((a, b) => a.sequence - b.sequence);
|
|
|
+ pointsSort.forEach(j => {
|
|
|
+ polygon.push(j.lng);
|
|
|
+ polygon.push(j.lat);
|
|
|
+ });
|
|
|
+ let polygonObj = {
|
|
|
+ id: 'xqgltarget' + index,
|
|
|
+ // name: newClickedRow.targetName,
|
|
|
+ material: Cesium.Color.fromCssColorString('rgba(255,0,0,0.5)'),
|
|
|
+ polygon,
|
|
|
+ };
|
|
|
+ cesiumEntityUtils.addCustomPolygons(viewer, "xqgl", [polygonObj]);
|
|
|
+ } else {
|
|
|
+ let line = [];
|
|
|
+ item.pointDTOList.forEach(d => {
|
|
|
+ line.push(d.lng);
|
|
|
+ line.push(d.lat);
|
|
|
+ })
|
|
|
+ if (datasource) {
|
|
|
+ datasource.entities.add({
|
|
|
+ id: 'xqgltarget' + index,
|
|
|
+ polyline: {
|
|
|
+ positions: Cesium.Cartesian3.fromDegreesArray(line),
|
|
|
+ width: 5,
|
|
|
+ material: Cesium.Color.RED,
|
|
|
+ clampToGround: true,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return
|
|
|
+ // ----------------------------------------------
|
|
|
+ let lon = null;
|
|
|
+ let lat = null;
|
|
|
+ if (newClickedRow.pointDTOList.length === 1) {
|
|
|
+ lon = newClickedRow.pointDTOList[0].lng;
|
|
|
+ lat = newClickedRow.pointDTOList[0].lat;
|
|
|
+ this.addClickTargetPoint(lon, lat, true);
|
|
|
+ }
|
|
|
+ if (newClickedRow.pointDTOList.length === 4) {
|
|
|
+ // lon = (newClickedRow.pointDTOList[0].lng + newClickedRow.pointDTOList[3].lng) / 2;
|
|
|
+ // lat = (newClickedRow.pointDTOList[0].lat + newClickedRow.pointDTOList[3].lat) / 2;
|
|
|
+ let polygon = [];
|
|
|
+ let pointsSort = newClickedRow.pointDTOList.sort((a, b) => a.sequence - b.sequence);
|
|
|
+ pointsSort.forEach(item => {
|
|
|
+ polygon.push(item.lng);
|
|
|
+ polygon.push(item.lat);
|
|
|
+ });
|
|
|
+ let polygonObj = {
|
|
|
+ id: newClickedRow.targetId,
|
|
|
+ name: newClickedRow.targetName,
|
|
|
+ material: Cesium.Color.fromCssColorString('rgba(255,0,0,0.5)'),
|
|
|
+ polygon,
|
|
|
+ };
|
|
|
+ this.addClickTargetRectangle([polygonObj]);
|
|
|
+ }
|
|
|
+ // this.addClickTargetPoint(lon, lat, true)
|
|
|
+ // console.log("地图上得到目标列表被单击的行数据：", newClickedRow);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initViewer();
|
|
|
+ this.componentsEvents();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initViewer() {
|
|
|
+ viewer = new Cesium.Viewer("cesiumContainer", {
|
|
|
+ // 连接地图服务
|
|
|
+ // imageryProvider: new Cesium.UrlTemplateImageryProvider({
|
|
|
+ // // url: "http://192.168.1.188:9109/map/?z={z}&x={x}&y={y}",
|
|
|
+ // url: window.mapUrl,
|
|
|
+ // tilingScheme: new Cesium.WebMercatorTilingScheme(),
|
|
|
+ // maximumLevel: 7,
|
|
|
+ // show: false
|
|
|
+ // }),
|
|
|
imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
|
|
|
// url: window.mapUrl + ":9109/map/?z={z}&x={x}&y={y}",
|
|
|
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
|
|
|
@@ -146,489 +177,489 @@ export default {
|
|
|
maximumLevel: 7,
|
|
|
show: false
|
|
|
}),
|
|
|
- animation: true,//true
|
|
|
- baseLayerPicker: false,
|
|
|
- geocoder: false,
|
|
|
- homeButton: false,
|
|
|
- sceneModePicker: false,
|
|
|
- timeline: true,//true
|
|
|
- navigationHelpButton: false,
|
|
|
- fullscreenButton: false
|
|
|
- });
|
|
|
- // viewer.dataSources.add(
|
|
|
- // Cesium.GeoJsonDataSource.load("MapData/GlobleCountryLine.json")
|
|
|
- // )
|
|
|
- viewer.clock.shouldAnimate = true;
|
|
|
- viewer._cesiumWidget._creditContainer.style.display = "none";
|
|
|
- viewer.scene.globe.enableLighting = true;
|
|
|
- viewer.camera.setView({
|
|
|
- destination: Cesium.Cartesian3.fromDegrees(115.48, 32.67, 40000000.0),
|
|
|
- orientation: {
|
|
|
- pitch: Cesium.Math.toRadians(-88)
|
|
|
- }
|
|
|
- });
|
|
|
- cesiumEntityUtils.formatterDateToUTC8(viewer, true);
|
|
|
- cesiumEntityUtils.polylineMaterial();
|
|
|
- window.viewer = viewer
|
|
|
- // this.addGlobleLine()
|
|
|
- document.oncontextmenu = function () {
|
|
|
- return false
|
|
|
- }
|
|
|
+ animation: true,//true
|
|
|
+ baseLayerPicker: false,
|
|
|
+ geocoder: false,
|
|
|
+ homeButton: false,
|
|
|
+ sceneModePicker: false,
|
|
|
+ timeline: true,//true
|
|
|
+ navigationHelpButton: false,
|
|
|
+ fullscreenButton: false
|
|
|
+ });
|
|
|
+ // viewer.dataSources.add(
|
|
|
+ // Cesium.GeoJsonDataSource.load("MapData/GlobleCountryLine.json")
|
|
|
+ // )
|
|
|
+ viewer.clock.shouldAnimate = true;
|
|
|
+ viewer._cesiumWidget._creditContainer.style.display = "none";
|
|
|
+ viewer.scene.globe.enableLighting = true;
|
|
|
+ viewer.camera.setView({
|
|
|
+ destination: Cesium.Cartesian3.fromDegrees(115.48, 32.67, 40000000.0),
|
|
|
+ orientation: {
|
|
|
+ pitch: Cesium.Math.toRadians(-88)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ cesiumEntityUtils.formatterDateToUTC8(viewer, true);
|
|
|
+ cesiumEntityUtils.polylineMaterial();
|
|
|
+ window.viewer = viewer
|
|
|
+ // this.addGlobleLine()
|
|
|
+ document.oncontextmenu = function () {
|
|
|
+ return false
|
|
|
+ }
|
|
|
|
|
|
- let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|
|
- let tempStore = this.$store
|
|
|
- handler.setInputAction(function (click) {
|
|
|
- tempStore.dispatch("xqglContentVisible", true)
|
|
|
- }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
|
|
|
- },
|
|
|
- componentsEvents() {
|
|
|
- let self = this;
|
|
|
- //需求解译窗口列表添加
|
|
|
- this.$events.on("xqjy-addwindow", function (datas) {
|
|
|
- self.addWindowsOrPointByXqjy(datas, "windows")
|
|
|
- })
|
|
|
- //需求解译窗口列表删除
|
|
|
- this.$events.on("xqjy-deletewindow", function (datas) {
|
|
|
- self.deleteWindowByXqjy(datas)
|
|
|
- })
|
|
|
- //需求解译目标任务点展示
|
|
|
- this.$events.on("xqjy-target", function (data) {
|
|
|
- cesiumEntityUtils.controlLayer(viewer, 'xqgl', false)
|
|
|
- self.addWindowsOrPointByXqjy(data, "target")
|
|
|
- });
|
|
|
- //需求管理目标点添加
|
|
|
- this.$events.on('xqgl-targetList', function (datas) {
|
|
|
- //移除临时绘制图形
|
|
|
- let datasource = cesiumEntityUtils.getCustomLayer(viewer, "xqgl");
|
|
|
- if (datasource) {
|
|
|
- datasource.entities.removeById("selectTarget");
|
|
|
- }
|
|
|
- self.addTargetList("xqgl", datas)
|
|
|
- })
|
|
|
- this.$events.on('xqgl-cancelselect', function () {
|
|
|
- //移除临时绘制图形
|
|
|
- let datasource = cesiumEntityUtils.getCustomLayer(viewer, "xqgl");
|
|
|
- if (datasource) {
|
|
|
- datasource.entities.removeById("selectTarget");
|
|
|
- }
|
|
|
- })
|
|
|
- //专题切换通知
|
|
|
- this.$events.on("topic-switch", function (data) {
|
|
|
- if (!self.showAll)
|
|
|
- return
|
|
|
- const viewer = window.viewer;
|
|
|
- cesiumEntityUtils.controlLayer(viewer, data.from, false)
|
|
|
- cesiumEntityUtils.controlLayer(viewer, data.to, true)
|
|
|
- })
|
|
|
- this.$events.on("rwjs-hideall", function () {
|
|
|
- const viewer = window.viewer;
|
|
|
- self.showAll = !self.showAll
|
|
|
- cesiumEntityUtils.controlLayer(viewer, ['rwjs', 'rwjs-satelliteTracks', 'rwjs-stations', 'xqgl', 'jcfw', 'xqjy', 'xqch'], self.showAll)
|
|
|
- })
|
|
|
- this.$events.on("rwjs-targetshow", function (data) {
|
|
|
- cesiumEntityUtils.controlLayer(viewer, 'rwjs', data)
|
|
|
- })
|
|
|
- //任务监视地面站添加
|
|
|
- this.$events.on("rwjs-addStation", data => {
|
|
|
- cesiumEntityUtils.addCustomLayer(viewer, "rwjs-stations");
|
|
|
- cesiumEntityUtils.addModels(viewer, "rwjs-stations", data);
|
|
|
- })
|
|
|
- //任务监视目标点添加
|
|
|
- this.$events.on('rwjs-targetList', function (datas) {
|
|
|
- // console.log("@datas", datas);
|
|
|
- //移除临时绘制图形
|
|
|
- // viewer.entities.remove(viewer.entities.getById('selectTarget'));
|
|
|
- self.addTargetList("rwjs", datas);
|
|
|
- })
|
|
|
- this.$events.on('rwjs-wxgcxxStripe', function (datas) {
|
|
|
- // debugger
|
|
|
- self.addTargetList("rwjs", datas, true);
|
|
|
- })
|
|
|
- this.$events.on("rwjs-wxyxzt", (datas) => {
|
|
|
- self.addTracks("rwjs-satelliteTracks", datas);
|
|
|
- })
|
|
|
- this.$events.on("sys-initView", (type) => {
|
|
|
- this.initView(viewer, type);
|
|
|
- })
|
|
|
- this.$events.on("sys-change2D3D", () => {
|
|
|
- self.changeViewerModel();
|
|
|
- })
|
|
|
- this.$events.on("sys-showTimeLine", (show) => {
|
|
|
- self.rwxxztVis = show;
|
|
|
- self.displayTimeLine(show);
|
|
|
- })
|
|
|
- this.$events.on("sys-showTrack", (type) => {
|
|
|
- this.initView(viewer, type);
|
|
|
- this.isTrackShow(undefined, type);
|
|
|
- })
|
|
|
+ let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|
|
+ let tempStore = this.$store
|
|
|
+ handler.setInputAction(function (click) {
|
|
|
+ tempStore.dispatch("xqglContentVisible", true)
|
|
|
+ }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
|
|
|
+ },
|
|
|
+ componentsEvents() {
|
|
|
+ let self = this;
|
|
|
+ //需求解译窗口列表添加
|
|
|
+ this.$events.on("xqjy-addwindow", function (datas) {
|
|
|
+ self.addWindowsOrPointByXqjy(datas, "windows")
|
|
|
+ })
|
|
|
+ //需求解译窗口列表删除
|
|
|
+ this.$events.on("xqjy-deletewindow", function (datas) {
|
|
|
+ self.deleteWindowByXqjy(datas)
|
|
|
+ })
|
|
|
+ //需求解译目标任务点展示
|
|
|
+ this.$events.on("xqjy-target", function (data) {
|
|
|
+ cesiumEntityUtils.controlLayer(viewer, 'xqgl', false)
|
|
|
+ self.addWindowsOrPointByXqjy(data, "target")
|
|
|
+ });
|
|
|
+ //需求管理目标点添加
|
|
|
+ this.$events.on('xqgl-targetList', function (datas) {
|
|
|
+ //移除临时绘制图形
|
|
|
+ let datasource = cesiumEntityUtils.getCustomLayer(viewer, "xqgl");
|
|
|
+ if (datasource) {
|
|
|
+ datasource.entities.removeById("selectTarget");
|
|
|
+ }
|
|
|
+ self.addTargetList("xqgl", datas)
|
|
|
+ })
|
|
|
+ this.$events.on('xqgl-cancelselect', function () {
|
|
|
+ //移除临时绘制图形
|
|
|
+ let datasource = cesiumEntityUtils.getCustomLayer(viewer, "xqgl");
|
|
|
+ if (datasource) {
|
|
|
+ datasource.entities.removeById("selectTarget");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ //专题切换通知
|
|
|
+ this.$events.on("topic-switch", function (data) {
|
|
|
+ if (!self.showAll)
|
|
|
+ return
|
|
|
+ const viewer = window.viewer;
|
|
|
+ cesiumEntityUtils.controlLayer(viewer, data.from, false)
|
|
|
+ cesiumEntityUtils.controlLayer(viewer, data.to, true)
|
|
|
+ })
|
|
|
+ this.$events.on("rwjs-hideall", function () {
|
|
|
+ const viewer = window.viewer;
|
|
|
+ self.showAll = !self.showAll
|
|
|
+ cesiumEntityUtils.controlLayer(viewer, ['rwjs', 'rwjs-satelliteTracks', 'rwjs-stations', 'xqgl', 'jcfw', 'xqjy', 'xqch'], self.showAll)
|
|
|
+ })
|
|
|
+ this.$events.on("rwjs-targetshow", function (data) {
|
|
|
+ cesiumEntityUtils.controlLayer(viewer, 'rwjs', data)
|
|
|
+ })
|
|
|
+ //任务监视地面站添加
|
|
|
+ this.$events.on("rwjs-addStation", data => {
|
|
|
+ cesiumEntityUtils.addCustomLayer(viewer, "rwjs-stations");
|
|
|
+ cesiumEntityUtils.addModels(viewer, "rwjs-stations", data);
|
|
|
+ })
|
|
|
+ //任务监视目标点添加
|
|
|
+ this.$events.on('rwjs-targetList', function (datas) {
|
|
|
+ // console.log("@datas", datas);
|
|
|
+ //移除临时绘制图形
|
|
|
+ // viewer.entities.remove(viewer.entities.getById('selectTarget'));
|
|
|
+ self.addTargetList("rwjs", datas);
|
|
|
+ })
|
|
|
+ this.$events.on('rwjs-wxgcxxStripe', function (datas) {
|
|
|
+ // debugger
|
|
|
+ self.addTargetList("rwjs", datas, true);
|
|
|
+ })
|
|
|
+ this.$events.on("rwjs-wxyxzt", (datas) => {
|
|
|
+ self.addTracks("rwjs-satelliteTracks", datas);
|
|
|
+ })
|
|
|
+ this.$events.on("sys-initView", (type) => {
|
|
|
+ this.initView(viewer, type);
|
|
|
+ })
|
|
|
+ this.$events.on("sys-change2D3D", () => {
|
|
|
+ self.changeViewerModel();
|
|
|
+ })
|
|
|
+ this.$events.on("sys-showTimeLine", (show) => {
|
|
|
+ self.rwxxztVis = show;
|
|
|
+ self.displayTimeLine(show);
|
|
|
+ })
|
|
|
+ this.$events.on("sys-showTrack", (type) => {
|
|
|
+ this.initView(viewer, type);
|
|
|
+ this.isTrackShow(undefined, type);
|
|
|
+ })
|
|
|
|
|
|
- },
|
|
|
- changeViewerModel() {
|
|
|
- viewer.scene.mode == Cesium.SceneMode.SCENE3D ? (viewer.scene.mode = Cesium.SceneMode.SCENE2D) : (viewer.scene.mode = Cesium.SceneMode.SCENE3D);
|
|
|
- },
|
|
|
- displayTimeLine(show) {
|
|
|
- if (viewer) {
|
|
|
- if (show) {
|
|
|
- viewer.animation.container.style.display = "block"
|
|
|
- viewer.timeline.container.style.display = "block"
|
|
|
- viewer.animation.container.style.zIndex = 9
|
|
|
- viewer.timeline.container.style.zIndex = 9
|
|
|
- } else {
|
|
|
- viewer.animation.container.style.display = "none"
|
|
|
- viewer.timeline.container.style.display = "none"
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- initView(viewer, type = "all") {
|
|
|
- const heights = {
|
|
|
- "lowTrack": 20000000,
|
|
|
- "highTrack": 25000000,
|
|
|
- "all": 40000000,
|
|
|
- }
|
|
|
- viewer.camera.flyTo({
|
|
|
- destination: Cesium.Cartesian3.fromDegrees(115.48, 32.67, heights[type]),
|
|
|
- orientation: {
|
|
|
- pitch: Cesium.Math.toRadians(-88)
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- moveEntities(viewer) {
|
|
|
- viewer.entities.removeAll();
|
|
|
- },
|
|
|
- moveMapLeftEventMonitor(viewer) {
|
|
|
- viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
- },
|
|
|
- mapClickPointAdd(viewer) {
|
|
|
- let self = this;
|
|
|
- let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|
|
- handler.setInputAction(function (event) {
|
|
|
- cesiumEntityUtils.addCustomLayer(viewer, "xqgl")
|
|
|
- let datasource = cesiumEntityUtils.getCustomLayer(viewer, "xqgl");
|
|
|
- let clickPosition = viewer.scene.camera.pickEllipsoid(event.position);
|
|
|
- let radiansPos = Cesium.Cartographic.fromCartesian(clickPosition);
|
|
|
- cesiumEntityUtils.flyToTargetPoint(viewer, Cesium.Math.toDegrees(radiansPos.longitude), Cesium.Math.toDegrees(radiansPos.latitude), 20000000);
|
|
|
- if (datasource) {
|
|
|
- datasource.entities.removeById("selectTarget");
|
|
|
- datasource.entities.add({
|
|
|
- id: 'selectTarget',
|
|
|
- position: clickPosition,
|
|
|
- point: {
|
|
|
- color: Cesium.Color.YELLOW,
|
|
|
- pixelSize: 10
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- self.locationLonLat = [];
|
|
|
- self.locationLonLat.push(Cesium.Math.toDegrees(radiansPos.longitude));
|
|
|
- self.locationLonLat.push(Cesium.Math.toDegrees(radiansPos.latitude));
|
|
|
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
- },
|
|
|
- mapDrawRectangle(viewer) {
|
|
|
- if (viewer) {
|
|
|
- const self = this;
|
|
|
- let clickPoint = [];
|
|
|
- let sefstore = this.$store
|
|
|
- // 鼠标左键绘制
|
|
|
- let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|
|
- handler.setInputAction(function (movement) {
|
|
|
- const earthPosition = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid); //当前世界坐标笛卡尔积
|
|
|
- if (Cesium.defined(earthPosition)) {
|
|
|
- // 判断现在是第几个点
|
|
|
- if (clickPoint.length === 0) { //还没有点，添加第一个点
|
|
|
- clickPoint.push(earthPosition)
|
|
|
- } else {
|
|
|
- //绘制矩形
|
|
|
- clickPoint.push(earthPosition)
|
|
|
- // 绘制矩形
|
|
|
- const rectangleHand = Cesium.Rectangle.fromCartesianArray(clickPoint)
|
|
|
- cesiumEntityUtils.addCustomLayer(viewer, "xqgl")
|
|
|
- let datasource = cesiumEntityUtils.getCustomLayer(viewer, "xqgl");
|
|
|
- if (datasource) {
|
|
|
- datasource.entities.removeById("selectTarget");
|
|
|
- datasource.entities.add({
|
|
|
- id: 'selectTarget',
|
|
|
- name: 'drawRectangle',
|
|
|
- rectangle: {
|
|
|
- coordinates: rectangleHand,
|
|
|
- height: 0,
|
|
|
- material: Cesium.Color.RED.withAlpha(0.4),
|
|
|
- outline: true,
|
|
|
- outlineColor: Cesium.Color.BLUE.withAlpha(0.5),
|
|
|
- },
|
|
|
- });
|
|
|
- }
|
|
|
+ },
|
|
|
+ changeViewerModel() {
|
|
|
+ viewer.scene.mode == Cesium.SceneMode.SCENE3D ? (viewer.scene.mode = Cesium.SceneMode.SCENE2D) : (viewer.scene.mode = Cesium.SceneMode.SCENE3D);
|
|
|
+ },
|
|
|
+ displayTimeLine(show) {
|
|
|
+ if (viewer) {
|
|
|
+ if (show) {
|
|
|
+ viewer.animation.container.style.display = "block"
|
|
|
+ viewer.timeline.container.style.display = "block"
|
|
|
+ viewer.animation.container.style.zIndex = 9
|
|
|
+ viewer.timeline.container.style.zIndex = 9
|
|
|
+ } else {
|
|
|
+ viewer.animation.container.style.display = "none"
|
|
|
+ viewer.timeline.container.style.display = "none"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initView(viewer, type = "all") {
|
|
|
+ const heights = {
|
|
|
+ "lowTrack": 20000000,
|
|
|
+ "highTrack": 25000000,
|
|
|
+ "all": 40000000,
|
|
|
+ }
|
|
|
+ viewer.camera.flyTo({
|
|
|
+ destination: Cesium.Cartesian3.fromDegrees(115.48, 32.67, heights[type]),
|
|
|
+ orientation: {
|
|
|
+ pitch: Cesium.Math.toRadians(-88)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ moveEntities(viewer) {
|
|
|
+ viewer.entities.removeAll();
|
|
|
+ },
|
|
|
+ moveMapLeftEventMonitor(viewer) {
|
|
|
+ viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
+ },
|
|
|
+ mapClickPointAdd(viewer) {
|
|
|
+ let self = this;
|
|
|
+ let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|
|
+ handler.setInputAction(function (event) {
|
|
|
+ cesiumEntityUtils.addCustomLayer(viewer, "xqgl")
|
|
|
+ let datasource = cesiumEntityUtils.getCustomLayer(viewer, "xqgl");
|
|
|
+ let clickPosition = viewer.scene.camera.pickEllipsoid(event.position);
|
|
|
+ let radiansPos = Cesium.Cartographic.fromCartesian(clickPosition);
|
|
|
+ cesiumEntityUtils.flyToTargetPoint(viewer, Cesium.Math.toDegrees(radiansPos.longitude), Cesium.Math.toDegrees(radiansPos.latitude), 20000000);
|
|
|
+ if (datasource) {
|
|
|
+ datasource.entities.removeById("selectTarget");
|
|
|
+ datasource.entities.add({
|
|
|
+ id: 'selectTarget',
|
|
|
+ position: clickPosition,
|
|
|
+ point: {
|
|
|
+ color: Cesium.Color.YELLOW,
|
|
|
+ pixelSize: 10
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ self.locationLonLat = [];
|
|
|
+ self.locationLonLat.push(Cesium.Math.toDegrees(radiansPos.longitude));
|
|
|
+ self.locationLonLat.push(Cesium.Math.toDegrees(radiansPos.latitude));
|
|
|
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
+ },
|
|
|
+ mapDrawRectangle(viewer) {
|
|
|
+ if (viewer) {
|
|
|
+ const self = this;
|
|
|
+ let clickPoint = [];
|
|
|
+ let sefstore = this.$store
|
|
|
+ // 鼠标左键绘制
|
|
|
+ let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|
|
+ handler.setInputAction(function (movement) {
|
|
|
+ const earthPosition = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid); //当前世界坐标笛卡尔积
|
|
|
+ if (Cesium.defined(earthPosition)) {
|
|
|
+ // 判断现在是第几个点
|
|
|
+ if (clickPoint.length === 0) { //还没有点，添加第一个点
|
|
|
+ clickPoint.push(earthPosition)
|
|
|
+ } else {
|
|
|
+ //绘制矩形
|
|
|
+ clickPoint.push(earthPosition)
|
|
|
+ // 绘制矩形
|
|
|
+ const rectangleHand = Cesium.Rectangle.fromCartesianArray(clickPoint)
|
|
|
+ cesiumEntityUtils.addCustomLayer(viewer, "xqgl")
|
|
|
+ let datasource = cesiumEntityUtils.getCustomLayer(viewer, "xqgl");
|
|
|
+ if (datasource) {
|
|
|
+ datasource.entities.removeById("selectTarget");
|
|
|
+ datasource.entities.add({
|
|
|
+ id: 'selectTarget',
|
|
|
+ name: 'drawRectangle',
|
|
|
+ rectangle: {
|
|
|
+ coordinates: rectangleHand,
|
|
|
+ height: 0,
|
|
|
+ material: Cesium.Color.RED.withAlpha(0.4),
|
|
|
+ outline: true,
|
|
|
+ outlineColor: Cesium.Color.BLUE.withAlpha(0.5),
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
|
|
|
- const northwest = Cesium.Rectangle.northwest(rectangleHand); //西北角弧度坐标（左上）
|
|
|
- const southwest = Cesium.Rectangle.southwest(rectangleHand); //西南角弧度坐标（左下）
|
|
|
- const northeast = Cesium.Rectangle.northeast(rectangleHand); //东北角弧度坐标（右上）
|
|
|
- const southeast = Cesium.Rectangle.southeast(rectangleHand); //东南角弧度坐标（右下）
|
|
|
+ const northwest = Cesium.Rectangle.northwest(rectangleHand); //西北角弧度坐标（左上）
|
|
|
+ const southwest = Cesium.Rectangle.southwest(rectangleHand); //西南角弧度坐标（左下）
|
|
|
+ const northeast = Cesium.Rectangle.northeast(rectangleHand); //东北角弧度坐标（右上）
|
|
|
+ const southeast = Cesium.Rectangle.southeast(rectangleHand); //东南角弧度坐标（右下）
|
|
|
|
|
|
- // 转换为经纬度
|
|
|
- const leftTop = [Cesium.Math.toDegrees(northwest.longitude), Cesium.Math.toDegrees(northwest.latitude)]; //左上角经度
|
|
|
- const leftBottom = [Cesium.Math.toDegrees(southwest.longitude), Cesium.Math.toDegrees(southwest.latitude)]; //左下角经度
|
|
|
- const rightTop = [Cesium.Math.toDegrees(northeast.longitude), Cesium.Math.toDegrees(northeast.latitude)]; //右上角经度
|
|
|
- const rightBottom = [Cesium.Math.toDegrees(southeast.longitude), Cesium.Math.toDegrees(southeast.latitude)]; //右下角经度
|
|
|
- cesiumEntityUtils.flyToTargetPoint(viewer, (leftTop[0] + rightBottom[0]) / 2, (leftTop[1] + rightBottom[1]) / 2, 20000000);
|
|
|
- const data = {
|
|
|
- leftTop: leftTop,
|
|
|
- leftBottom: leftBottom,
|
|
|
- rightTop: rightTop,
|
|
|
- rightBottom: rightBottom,
|
|
|
- }
|
|
|
- const dataarr = [leftTop, rightTop, rightBottom, leftBottom]
|
|
|
- sefstore.dispatch('xqglMapRectangleLonLats', dataarr)
|
|
|
- // console.log("矩形四角坐标：",data);
|
|
|
- console.log("矩形四角坐标arr：", sefstore.state.xqglMapRectangleLonLats);
|
|
|
- clickPoint = []; //清空
|
|
|
- }
|
|
|
- }
|
|
|
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
- }
|
|
|
- },
|
|
|
- addGlobleLine() {
|
|
|
- const features = this.globleLines.geometries;
|
|
|
- const instances = [];
|
|
|
- for (let i = 0; i < features.length; i++) {
|
|
|
- const polygonArr = features[i].coordinates;
|
|
|
- const polygon = new Cesium.PolylineGeometry({
|
|
|
- positions: Cesium.Cartesian3.fromDegreesArray(polygonArr.toString().split(',')),
|
|
|
- width: 3,
|
|
|
- vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT
|
|
|
- })
|
|
|
- instances.push(new Cesium.GeometryInstance({
|
|
|
- geometry: polygon,
|
|
|
- attributes: {
|
|
|
- color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color.fromCssColorString("rgba(217,212,85,1)"))
|
|
|
- }
|
|
|
- }))
|
|
|
- }
|
|
|
- const primitive = new Cesium.Primitive({
|
|
|
- geometryInstances: instances,
|
|
|
- appearance: new Cesium.PolylineColorAppearance(),
|
|
|
- asynchronous: false
|
|
|
- })
|
|
|
- window.viewer.scene.primitives.add(primitive)
|
|
|
- },
|
|
|
- addClickTargetRectangle(polygons) {
|
|
|
- const viewer = window.viewer;
|
|
|
- cesiumEntityUtils.removeCustomLayer(viewer, "xqgl");
|
|
|
- cesiumEntityUtils.addCustomLayer(viewer, "xqgl");
|
|
|
- // cesiumEntityUtils.controlLayer(viewer, "xqgl", true)
|
|
|
- cesiumEntityUtils.addCustomPolygons(viewer, "xqgl", polygons);
|
|
|
- cesiumEntityUtils.flyToTargetPolygon(viewer, polygons[0].polygon, 8000000);
|
|
|
- },
|
|
|
- addClickTargetPoint(lon, lat, isLocation) {
|
|
|
- const viewer = window.viewer;
|
|
|
- cesiumEntityUtils.removeCustomLayer(viewer, "xqgl");
|
|
|
- cesiumEntityUtils.addCustomLayer(viewer, "xqgl")
|
|
|
- // cesiumEntityUtils.controlLayer(viewer, "xqgl", false)
|
|
|
- let datasource = cesiumEntityUtils.getCustomLayer(viewer, "xqgl");
|
|
|
- if (datasource) {
|
|
|
- datasource.entities.removeById("target");
|
|
|
- let position = Cesium.Cartesian3.fromDegrees(lon, lat);
|
|
|
- datasource.entities.add({
|
|
|
- id: 'target',
|
|
|
- position: position,
|
|
|
- billboard: {
|
|
|
- image: './static/icon/target_red.svg',
|
|
|
- width: 16,
|
|
|
- height: 16
|
|
|
- }
|
|
|
- });
|
|
|
- if (isLocation) {
|
|
|
- cesiumEntityUtils.flyToTargetPoint(viewer, lon, lat, 20000000);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
+ // 转换为经纬度
|
|
|
+ const leftTop = [Cesium.Math.toDegrees(northwest.longitude), Cesium.Math.toDegrees(northwest.latitude)]; //左上角经度
|
|
|
+ const leftBottom = [Cesium.Math.toDegrees(southwest.longitude), Cesium.Math.toDegrees(southwest.latitude)]; //左下角经度
|
|
|
+ const rightTop = [Cesium.Math.toDegrees(northeast.longitude), Cesium.Math.toDegrees(northeast.latitude)]; //右上角经度
|
|
|
+ const rightBottom = [Cesium.Math.toDegrees(southeast.longitude), Cesium.Math.toDegrees(southeast.latitude)]; //右下角经度
|
|
|
+ cesiumEntityUtils.flyToTargetPoint(viewer, (leftTop[0] + rightBottom[0]) / 2, (leftTop[1] + rightBottom[1]) / 2, 20000000);
|
|
|
+ const data = {
|
|
|
+ leftTop: leftTop,
|
|
|
+ leftBottom: leftBottom,
|
|
|
+ rightTop: rightTop,
|
|
|
+ rightBottom: rightBottom,
|
|
|
+ }
|
|
|
+ const dataarr = [leftTop, rightTop, rightBottom, leftBottom]
|
|
|
+ sefstore.dispatch('xqglMapRectangleLonLats', dataarr)
|
|
|
+ // console.log("矩形四角坐标：",data);
|
|
|
+ console.log("矩形四角坐标arr：", sefstore.state.xqglMapRectangleLonLats);
|
|
|
+ clickPoint = []; //清空
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addGlobleLine() {
|
|
|
+ const features = this.globleLines.geometries;
|
|
|
+ const instances = [];
|
|
|
+ for (let i = 0; i < features.length; i++) {
|
|
|
+ const polygonArr = features[i].coordinates;
|
|
|
+ const polygon = new Cesium.PolylineGeometry({
|
|
|
+ positions: Cesium.Cartesian3.fromDegreesArray(polygonArr.toString().split(',')),
|
|
|
+ width: 3,
|
|
|
+ vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT
|
|
|
+ })
|
|
|
+ instances.push(new Cesium.GeometryInstance({
|
|
|
+ geometry: polygon,
|
|
|
+ attributes: {
|
|
|
+ color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color.fromCssColorString("rgba(217,212,85,1)"))
|
|
|
+ }
|
|
|
+ }))
|
|
|
+ }
|
|
|
+ const primitive = new Cesium.Primitive({
|
|
|
+ geometryInstances: instances,
|
|
|
+ appearance: new Cesium.PolylineColorAppearance(),
|
|
|
+ asynchronous: false
|
|
|
+ })
|
|
|
+ window.viewer.scene.primitives.add(primitive)
|
|
|
+ },
|
|
|
+ addClickTargetRectangle(polygons) {
|
|
|
+ const viewer = window.viewer;
|
|
|
+ cesiumEntityUtils.removeCustomLayer(viewer, "xqgl");
|
|
|
+ cesiumEntityUtils.addCustomLayer(viewer, "xqgl");
|
|
|
+ // cesiumEntityUtils.controlLayer(viewer, "xqgl", true)
|
|
|
+ cesiumEntityUtils.addCustomPolygons(viewer, "xqgl", polygons);
|
|
|
+ cesiumEntityUtils.flyToTargetPolygon(viewer, polygons[0].polygon, 8000000);
|
|
|
+ },
|
|
|
+ addClickTargetPoint(lon, lat, isLocation) {
|
|
|
+ const viewer = window.viewer;
|
|
|
+ cesiumEntityUtils.removeCustomLayer(viewer, "xqgl");
|
|
|
+ cesiumEntityUtils.addCustomLayer(viewer, "xqgl")
|
|
|
+ // cesiumEntityUtils.controlLayer(viewer, "xqgl", false)
|
|
|
+ let datasource = cesiumEntityUtils.getCustomLayer(viewer, "xqgl");
|
|
|
+ if (datasource) {
|
|
|
+ datasource.entities.removeById("target");
|
|
|
+ let position = Cesium.Cartesian3.fromDegrees(lon, lat);
|
|
|
+ datasource.entities.add({
|
|
|
+ id: 'target',
|
|
|
+ position: position,
|
|
|
+ billboard: {
|
|
|
+ image: './static/icon/target_red.svg',
|
|
|
+ width: 16,
|
|
|
+ height: 16
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (isLocation) {
|
|
|
+ cesiumEntityUtils.flyToTargetPoint(viewer, lon, lat, 20000000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- addWindowsOrPointByXqjy(datas, type) {
|
|
|
- const viewer = window.viewer;
|
|
|
- // cesiumEntityUtils.controlAllLayer(viewer, false);
|
|
|
- // if (type === 'target') {
|
|
|
- // cesiumEntityUtils.removeCustomLayer(viewer, 'xqjy')
|
|
|
- // }
|
|
|
- cesiumEntityUtils.addCustomLayer(viewer, "xqjy")
|
|
|
- // cesiumEntityUtils.controlLayer
|
|
|
- if (type === 'target') {
|
|
|
- const targetType = datas.type;
|
|
|
- const target = datas.data;
|
|
|
- if (target === null)
|
|
|
- return;
|
|
|
- if (targetType === 'point') {
|
|
|
- cesiumEntityUtils.addCustomPoints(viewer, "xqjy", target);
|
|
|
- cesiumEntityUtils.flyToTargetPoint(viewer, target.lon, target.lat, 8000000)
|
|
|
- } else {
|
|
|
- cesiumEntityUtils.addCustomPolygons(viewer, "xqjy", target);
|
|
|
- cesiumEntityUtils.flyToTargetPolygon(viewer, target.polygon, 8000000)
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (datas.length == 0) {
|
|
|
- return
|
|
|
- }
|
|
|
- cesiumEntityUtils.addCustomPolygons(viewer, "xqjy", datas);
|
|
|
- // let polygon = [];
|
|
|
- // datas.forEach(data => {
|
|
|
- // polygon = polygon.concat(data.polygon)
|
|
|
- // });
|
|
|
- // cesiumEntityUtils.flyToTargetPolygon(viewer, polygon, 20000000)
|
|
|
- }
|
|
|
- },
|
|
|
- deleteWindowByXqjy(datas) {
|
|
|
- const viewer = window.viewer;
|
|
|
- cesiumEntityUtils.removeCustomLayerEntitysById(viewer, "xqjy", datas)
|
|
|
- },
|
|
|
- addTargetList(dsId, datas, isStripe = false) {
|
|
|
- // debugger
|
|
|
- const viewer = window.viewer;
|
|
|
- if (datas.length == 0) {
|
|
|
- // cesiumEntityUtils.removeCustomLayer(viewer, "xqgl")
|
|
|
- cesiumEntityUtils.removeCustomLayer(viewer, dsId)
|
|
|
- return
|
|
|
- }
|
|
|
- // cesiumEntityUtils.addCustomLayer(viewer, "xqgl")
|
|
|
- cesiumEntityUtils.addCustomLayer(viewer, dsId)
|
|
|
- let targetPoints = [];
|
|
|
- let targetPoylgons = []
|
|
|
- datas.forEach(data => {
|
|
|
- const id = data.id;
|
|
|
- const name = data.targetName
|
|
|
- let points = data.pointDTOList;
|
|
|
- if (points.length == 1) {
|
|
|
- targetPoints.push({
|
|
|
- id: id,
|
|
|
- name: name,
|
|
|
- lon: points[0].lng,
|
|
|
- lat: points[0].lat,
|
|
|
- size: 10,
|
|
|
- style: {
|
|
|
- color: 'red',
|
|
|
- },
|
|
|
- color: Cesium.Color.fromCssColorString('#f10808')
|
|
|
- })
|
|
|
- cesiumEntityUtils.addCustomPoints(viewer, dsId, targetPoints)
|
|
|
- dsId === 'rwjs' && cesiumEntityUtils.flyToTargetPoint(viewer, points[0].lng, points[0].lat, 8000000)
|
|
|
- }
|
|
|
- if (points.length > 1) {
|
|
|
- let polygon = [];
|
|
|
- points.forEach(point => {
|
|
|
- polygon.push(point.lng || point.longitude)
|
|
|
- polygon.push(point.lat || point.latitude)
|
|
|
- })
|
|
|
- targetPoylgons.push({
|
|
|
- id: id,
|
|
|
- name: name,
|
|
|
- isRhumb: true,//矩形按照贴经纬线形状绘制
|
|
|
- polygon: polygon,
|
|
|
- height: 10,
|
|
|
- style: {
|
|
|
- color: 'red',
|
|
|
- size: 5
|
|
|
- },
|
|
|
- material: isStripe ? Cesium.Color.fromCssColorString('rgba(237,245,11,0.5)') : Cesium.Color.fromCssColorString('#f10808'),
|
|
|
- })
|
|
|
- cesiumEntityUtils.addCustomPolygons(viewer, dsId, targetPoylgons)
|
|
|
- dsId === 'rwjs' && cesiumEntityUtils.flyToTargetPolygon(viewer, polygon, 8000000)
|
|
|
- }
|
|
|
- })
|
|
|
+ addWindowsOrPointByXqjy(datas, type) {
|
|
|
+ const viewer = window.viewer;
|
|
|
+ // cesiumEntityUtils.controlAllLayer(viewer, false);
|
|
|
+ // if (type === 'target') {
|
|
|
+ // cesiumEntityUtils.removeCustomLayer(viewer, 'xqjy')
|
|
|
+ // }
|
|
|
+ cesiumEntityUtils.addCustomLayer(viewer, "xqjy")
|
|
|
+ // cesiumEntityUtils.controlLayer
|
|
|
+ if (type === 'target') {
|
|
|
+ const targetType = datas.type;
|
|
|
+ const target = datas.data;
|
|
|
+ if (target === null)
|
|
|
+ return;
|
|
|
+ if (targetType === 'point') {
|
|
|
+ cesiumEntityUtils.addCustomPoints(viewer, "xqjy", target);
|
|
|
+ cesiumEntityUtils.flyToTargetPoint(viewer, target.lon, target.lat, 8000000)
|
|
|
+ } else {
|
|
|
+ cesiumEntityUtils.addCustomPolygons(viewer, "xqjy", target);
|
|
|
+ cesiumEntityUtils.flyToTargetPolygon(viewer, target.polygon, 8000000)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (datas.length == 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ cesiumEntityUtils.addCustomPolygons(viewer, "xqjy", datas);
|
|
|
+ // let polygon = [];
|
|
|
+ // datas.forEach(data => {
|
|
|
+ // polygon = polygon.concat(data.polygon)
|
|
|
+ // });
|
|
|
+ // cesiumEntityUtils.flyToTargetPolygon(viewer, polygon, 20000000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deleteWindowByXqjy(datas) {
|
|
|
+ const viewer = window.viewer;
|
|
|
+ cesiumEntityUtils.removeCustomLayerEntitysById(viewer, "xqjy", datas)
|
|
|
+ },
|
|
|
+ addTargetList(dsId, datas, isStripe = false) {
|
|
|
+ // debugger
|
|
|
+ const viewer = window.viewer;
|
|
|
+ if (datas.length == 0) {
|
|
|
+ // cesiumEntityUtils.removeCustomLayer(viewer, "xqgl")
|
|
|
+ cesiumEntityUtils.removeCustomLayer(viewer, dsId)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // cesiumEntityUtils.addCustomLayer(viewer, "xqgl")
|
|
|
+ cesiumEntityUtils.addCustomLayer(viewer, dsId)
|
|
|
+ let targetPoints = [];
|
|
|
+ let targetPoylgons = []
|
|
|
+ datas.forEach(data => {
|
|
|
+ const id = data.id;
|
|
|
+ const name = data.targetName
|
|
|
+ let points = data.pointDTOList;
|
|
|
+ if (points.length == 1) {
|
|
|
+ targetPoints.push({
|
|
|
+ id: id,
|
|
|
+ name: name,
|
|
|
+ lon: points[0].lng,
|
|
|
+ lat: points[0].lat,
|
|
|
+ size: 10,
|
|
|
+ style: {
|
|
|
+ color: 'red',
|
|
|
+ },
|
|
|
+ color: Cesium.Color.fromCssColorString('#f10808')
|
|
|
+ })
|
|
|
+ cesiumEntityUtils.addCustomPoints(viewer, dsId, targetPoints)
|
|
|
+ dsId === 'rwjs' && cesiumEntityUtils.flyToTargetPoint(viewer, points[0].lng, points[0].lat, 8000000)
|
|
|
+ }
|
|
|
+ if (points.length > 1) {
|
|
|
+ let polygon = [];
|
|
|
+ points.forEach(point => {
|
|
|
+ polygon.push(point.lng || point.longitude)
|
|
|
+ polygon.push(point.lat || point.latitude)
|
|
|
+ })
|
|
|
+ targetPoylgons.push({
|
|
|
+ id: id,
|
|
|
+ name: name,
|
|
|
+ isRhumb: true,//矩形按照贴经纬线形状绘制
|
|
|
+ polygon: polygon,
|
|
|
+ height: 10,
|
|
|
+ style: {
|
|
|
+ color: 'red',
|
|
|
+ size: 5
|
|
|
+ },
|
|
|
+ material: isStripe ? Cesium.Color.fromCssColorString('rgba(237,245,11,0.5)') : Cesium.Color.fromCssColorString('#f10808'),
|
|
|
+ })
|
|
|
+ cesiumEntityUtils.addCustomPolygons(viewer, dsId, targetPoylgons)
|
|
|
+ dsId === 'rwjs' && cesiumEntityUtils.flyToTargetPolygon(viewer, polygon, 8000000)
|
|
|
+ }
|
|
|
+ })
|
|
|
|
|
|
- },
|
|
|
- addTracks(dsId, tracks) {
|
|
|
- const {trackData, startTime, endTime, satelliteList, tasks} = tracks
|
|
|
- const viewer = window.viewer;
|
|
|
- cesiumEntityUtils.createCZML(viewer, dsId, startTime, endTime, trackData);
|
|
|
- //绘制投影
|
|
|
- let self = this;
|
|
|
- let _viewer = viewer;
|
|
|
- let timer = setInterval(() => {
|
|
|
- if (window.trackShow) {
|
|
|
- self.addSatelliteProjection(satelliteList, tasks);
|
|
|
- // this.setCurrentTime(_viewer, "2022-04-09T15:06:10")
|
|
|
- clearInterval(timer);
|
|
|
- window.trackShow = false;
|
|
|
- }
|
|
|
- }, 500);
|
|
|
- },
|
|
|
- //添加卫星投影
|
|
|
- addSatelliteProjection(satelliteList, tasks) {
|
|
|
- const viewer = window.viewer;
|
|
|
- satelliteList.forEach(item => {
|
|
|
- const wxSource = viewer.dataSources.getByName(item.wxSourceId)[0];
|
|
|
- if (!wxSource) return;
|
|
|
- const itemEntity = cesiumEntityUtils.getEntityByIdDS(wxSource, item.name);
|
|
|
- if (itemEntity) {
|
|
|
- this.projectEntitys[item.name] = cesiumEntityUtils.drawProjection(viewer, 1, itemEntity, false, item);
|
|
|
- }
|
|
|
- });
|
|
|
+ },
|
|
|
+ addTracks(dsId, tracks) {
|
|
|
+ const {trackData, startTime, endTime, satelliteList, tasks} = tracks
|
|
|
+ const viewer = window.viewer;
|
|
|
+ cesiumEntityUtils.createCZML(viewer, dsId, startTime, endTime, trackData);
|
|
|
+ //绘制投影
|
|
|
+ let self = this;
|
|
|
+ let _viewer = viewer;
|
|
|
+ let timer = setInterval(() => {
|
|
|
+ if (window.trackShow) {
|
|
|
+ self.addSatelliteProjection(satelliteList, tasks);
|
|
|
+ // this.setCurrentTime(_viewer, "2022-04-09T15:06:10")
|
|
|
+ clearInterval(timer);
|
|
|
+ window.trackShow = false;
|
|
|
+ }
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ //添加卫星投影
|
|
|
+ addSatelliteProjection(satelliteList, tasks) {
|
|
|
+ const viewer = window.viewer;
|
|
|
+ satelliteList.forEach(item => {
|
|
|
+ const wxSource = viewer.dataSources.getByName(item.wxSourceId)[0];
|
|
|
+ if (!wxSource) return;
|
|
|
+ const itemEntity = cesiumEntityUtils.getEntityByIdDS(wxSource, item.name);
|
|
|
+ if (itemEntity) {
|
|
|
+ this.projectEntitys[item.name] = cesiumEntityUtils.drawProjection(viewer, 1, itemEntity, false, item);
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- this.taskRun(tasks);
|
|
|
- },
|
|
|
- //任务执行监听
|
|
|
- taskRun(tasks) {
|
|
|
- const stationDsId = "rwjs-stations"
|
|
|
- const satelliteDsId = "rwjs-satelliteTracks"
|
|
|
- const lineId = "rwjs-taskSimulationLine"
|
|
|
+ this.taskRun(tasks);
|
|
|
+ },
|
|
|
+ //任务执行监听
|
|
|
+ taskRun(tasks) {
|
|
|
+ const stationDsId = "rwjs-stations"
|
|
|
+ const satelliteDsId = "rwjs-satelliteTracks"
|
|
|
+ const lineId = "rwjs-taskSimulationLine"
|
|
|
|
|
|
- tasks.cdTasks.forEach((taskItem, index) => {
|
|
|
- let times = [];
|
|
|
- times.push({
|
|
|
- start: Cesium.JulianDate.fromDate(new Date(taskItem.startTime)),
|
|
|
- stop: Cesium.JulianDate.fromDate(new Date(taskItem.endTime))
|
|
|
- });
|
|
|
- const station = cesiumEntityUtils.getEntityByIdDS(viewer.dataSources.getByName(stationDsId)[0], taskItem.stationCode);
|
|
|
- const satellite = cesiumEntityUtils.getEntityByIdDS(viewer.dataSources.getByName(satelliteDsId)[0], taskItem.satelliteCode);
|
|
|
- if (times.length > 0) {
|
|
|
- const option = {
|
|
|
- viewer: viewer,
|
|
|
- dsId: satelliteDsId,
|
|
|
- lineId: lineId + index,
|
|
|
- satellite,
|
|
|
- station,
|
|
|
- times,
|
|
|
- direction: taskItem.type, //可选 'SC' 和 'CK'， 不传，默认为 'SC'
|
|
|
- };
|
|
|
- cesiumEntityUtils.addLineBetweenTwoEntity(option);
|
|
|
- }
|
|
|
- });
|
|
|
- // 投影可见任务，相机开关机
|
|
|
- // console.log("this.projectEntitys:", this.projectEntitys);
|
|
|
- tasks.proTasks.forEach(proTask => {
|
|
|
- proTask.startTime = this.timeToUTM(proTask.startTime)
|
|
|
- proTask.endTime = this.timeToUTM(proTask.endTime)
|
|
|
- cesiumEntityUtils.projectionVisible(viewer, this.projectEntitys[proTask.satelliteCode], proTask)
|
|
|
- })
|
|
|
+ tasks.cdTasks.forEach((taskItem, index) => {
|
|
|
+ let times = [];
|
|
|
+ times.push({
|
|
|
+ start: Cesium.JulianDate.fromDate(new Date(taskItem.startTime)),
|
|
|
+ stop: Cesium.JulianDate.fromDate(new Date(taskItem.endTime))
|
|
|
+ });
|
|
|
+ const station = cesiumEntityUtils.getEntityByIdDS(viewer.dataSources.getByName(stationDsId)[0], taskItem.stationCode);
|
|
|
+ const satellite = cesiumEntityUtils.getEntityByIdDS(viewer.dataSources.getByName(satelliteDsId)[0], taskItem.satelliteCode);
|
|
|
+ if (times.length > 0) {
|
|
|
+ const option = {
|
|
|
+ viewer: viewer,
|
|
|
+ dsId: satelliteDsId,
|
|
|
+ lineId: lineId + index,
|
|
|
+ satellite,
|
|
|
+ station,
|
|
|
+ times,
|
|
|
+ direction: taskItem.type, //可选 'SC' 和 'CK'， 不传，默认为 'SC'
|
|
|
+ };
|
|
|
+ cesiumEntityUtils.addLineBetweenTwoEntity(option);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 投影可见任务，相机开关机
|
|
|
+ // console.log("this.projectEntitys:", this.projectEntitys);
|
|
|
+ tasks.proTasks.forEach(proTask => {
|
|
|
+ proTask.startTime = this.timeToUTM(proTask.startTime)
|
|
|
+ proTask.endTime = this.timeToUTM(proTask.endTime)
|
|
|
+ cesiumEntityUtils.projectionVisible(viewer, this.projectEntitys[proTask.satelliteCode], proTask)
|
|
|
+ })
|
|
|
|
|
|
- },
|
|
|
- timeToUTM(strTime) {
|
|
|
- let d = this.$moment(strTime)
|
|
|
- return d.subtract(8, 'h').format("YYYY-MM-DD HH:mm:ss")
|
|
|
- },
|
|
|
- isTrackShow(dsId = "rwjs-satelliteTracks", type = "all", show = true) {
|
|
|
- // type 的可选项：lowTrack,highTrack,all
|
|
|
- const tracksLayer = viewer.dataSources.getByName(dsId)[0];
|
|
|
- if (!tracksLayer) {
|
|
|
- return
|
|
|
- }
|
|
|
- tracksLayer.entities.values.forEach(et => {
|
|
|
- if (et.description) {
|
|
|
- const tempType = et.description.getValue();
|
|
|
- if (type === 'all') {
|
|
|
- et.show = true;
|
|
|
- } else {
|
|
|
- et.show = tempType === type;
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
+ },
|
|
|
+ timeToUTM(strTime) {
|
|
|
+ let d = this.$moment(strTime)
|
|
|
+ return d.subtract(8, 'h').format("YYYY-MM-DD HH:mm:ss")
|
|
|
+ },
|
|
|
+ isTrackShow(dsId = "rwjs-satelliteTracks", type = "all", show = true) {
|
|
|
+ // type 的可选项：lowTrack,highTrack,all
|
|
|
+ const tracksLayer = viewer.dataSources.getByName(dsId)[0];
|
|
|
+ if (!tracksLayer) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ tracksLayer.entities.values.forEach(et => {
|
|
|
+ if (et.description) {
|
|
|
+ const tempType = et.description.getValue();
|
|
|
+ if (type === 'all') {
|
|
|
+ et.show = true;
|
|
|
+ } else {
|
|
|
+ et.show = tempType === type;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
|
|
|
- },
|
|
|
+ },
|
|
|
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
#cesiumContainer {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
</style>
|
otmself