JT-CIM/src/views/Map3d/Map3DMain.vue

<script setup>
	/**
	 * 业务组件，在components中进行注册
	 */
	//组件异步加载
	import {
		defineAsyncComponent
	} from 'vue';
	// const TrackRoam = defineAsyncComponent(() => import('./components/TrackRoam.vue'));
	// const ImageLayerSplit = defineAsyncComponent(() => import('./components/ImageLayerSplit.vue'));
	// const ViewerSplitScreen = defineAsyncComponent(() => import('./components/ViewerSplitScreen.vue'));
	// const viewerlabel = defineAsyncComponent(() => import('./components/viewerlabel.vue'));
	// const printmap = defineAsyncComponent(() => import('./components/printmap.vue'));
	// const dialogEdit = defineAsyncComponent(() => import('./components/drawEdit.vue'));
	// const queryResult = defineAsyncComponent(() => import('./components/queryResult.vue'));
	// const analysisSpace = defineAsyncComponent(() => import('./components/analysis-space.vue'));
	// const analysisTerrain = defineAsyncComponent(() => import('./components/analysis-terrain.vue'));
	// const analysisData = defineAsyncComponent(() => import('./components/analysis-data.vue'));
	// const layer = defineAsyncComponent(() => import('./components/layer.vue'));
	// const measure = defineAsyncComponent(() => import('./components/measure.vue'));
	// const queryGraphics = defineAsyncComponent(() => import('./components/query-graphics.vue'));
	// const SpecialEffects = defineAsyncComponent(() => import('./components/special-effects.vue'));
	// const coordsTool = defineAsyncComponent(() => import('./components/coordsTool.vue'));
	// const basicLayer = defineAsyncComponent(() => import('./components/basicLayer.vue'));
	const queryKeyword = defineAsyncComponent(() => import('./components/query-keyword.vue'));
	// const toolbars = defineAsyncComponent(() => import('./components/toolbars.vue'));
	// const map3d = defineAsyncComponent(() => import('./components/map.vue'));
	import map3d from './components/map.vue';
	// import queryKeyword from './components/query-keyword.vue';
	
	import toolbars from './components/toolbars.vue';
	import layer from './components/layer.vue';
	import measure from './components/measure.vue';
	import queryGraphics from './components/query-graphics.vue';
	import SpecialEffects from './components/special-effects.vue';
	import coordsTool from './components/coordsTool.vue';
	import basicLayer from './components/basicLayer.vue'
	import analysisSpace from './components/analysis-space.vue';
	import analysisTerrain from './components/analysis-terrain.vue';
	import analysisData from './components/analysis-data.vue';
	import mapNavigate from './components/mapNavigate.vue';
	import TrackRoam from './components/TrackRoam.vue';
	import ImageLayerSplit from './components/ImageLayerSplit.vue';
	import ViewerSplitScreen from './components/ViewerSplitScreen.vue';
	import viewerlabel from './components/viewerlabel.vue';
	import printmap from './components/printmap.vue';
	import dialogEdit from "./components/drawEdit.vue";
	import queryResult from "./components/queryResult.vue";
	import RightHeading from "./components/RightHeading.vue";
	import {
		provide
	} from "vue";
	import {
		Store
	} from '@/store/index'
	store = Store()

	/**
	 * 通过provide/inject可以轻松实现跨级访问父组件的数据
	 * provide和inject是成对出现的
	 * 必须放在setup内
	 * 简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量
	 * provide 和 inject 绑定并不是可响应的。这是刻意为之的。
	 * 代码执行顺序data->provide->created->mounted
	 */
	provide("getMapInstance", () => {
		return jt3d;
	});
</script>

<template>
	<div class="jt-mapMain">

		<!-- 地图组件 -->
		<map3d @onload="jtMap3DOnload" ref="refMap3d" />

		<!-- 地图加载完成后，在加载其他组件 -->
		<template v-if="mapLoaded">
			<!-- 底图组件 -->
			<basicLayer v-show="showbasicLayer" ref="basicLayers"></basicLayer>

			<!-- 弹出框组件，tabs组件测试 -->
			<jt-popup  title="地区导航" ref="refmapNavigate" :isEmit="true" @closeJTPopup="closeMapNavigate">
				<mapNavigate ref="_refmapNavigate"></mapNavigate>
			</jt-popup>

			<!-- 关键字查询组件 -->
			<!-- <queryKeyword ref="queryword" /> -->

			<!-- 视角标签 -->
			<jt-popup  title="视角标签" ref="refviewerlabel">
				<viewerlabel ref="_refviewerlabel"></viewerlabel>
			</jt-popup>

			<!-- 打印地图 -->
			<jt-popup :showfooter="isshowfooter" longheader="1" right="calc(50% - 480rem)" width="960rem" top="calc(50% - 270rem)" height="600rem" title="打印地图" ref="refprintmap">
				<printmap ref="_refprintmap"></printmap>
			</jt-popup>

			<!-- 工具栏组件 -->
			<!-- <toolbars /> -->

			<!-- 图上量算组件 -->
			<jt-popup  title="图上量算" ref="refMeasure" :isEmit="true" @closeJTPopup="closeMeasure">
				<measure ref="_refMeasure" />
			</jt-popup>

			<!-- 数据分析组件 -->
			<jt-popup  title="数据分析" ref="refAnalysisData">
				<analysisData />
			</jt-popup>

			<!-- 空间分析组件 -->
			<jt-popup title="空间分析" ref="refAnalysisSpace">
				<analysisSpace />
			</jt-popup>

			<!-- 剖面分析结果组件 -->
			<jt-drawer ref="refDrawerSectionAnalysis" title="剖面分析结果" direction="btt" size="30vh" @closeJTDrawer="closeDrawerSectionAnalysis">
				<jt-charts id="sectionAnalysisChart" width='98vw' height="20vh" :option='ChartTestData' />
			</jt-drawer>

			<!-- 图形查询组件 -->
			<jt-popup  title="图形查询" ref="refQueryGraphics" :isEmit="true" @closeJTPopup="closeQuery">
				<queryGraphics ref="_refQueryGraphics" />
			</jt-popup>

			<!-- 特效组件 -->
			<jt-popup title="特效效果" ref="refSpecialEffects">
				<SpecialEffects />
			</jt-popup>

			<!-- 坐标定位拾取组件 -->
			<jt-popup title="坐标定位拾取" ref="refCoordsTool">
				<coordsTool />
			</jt-popup>

			<!-- 地形分析组件 -->
			<jt-popup title="地形分析" ref="refAnalysisTerrain" :isEmit="true" @closeJTPopup="closeAnalysisTerrain">
				<analysisTerrain ref="_refAnalysisTerrain" />
			</jt-popup>

			<!-- 跟踪漫游组件 -->
			<jt-popup minWidth="294rem" title="跟踪漫游" ref="refTrackRoam">
				<TrackRoam />
			</jt-popup>

			<!-- 卷帘对比组件 -->
			<jt-popup :showfooter="isshowfooter" height="150rem" width="520rem" title="卷帘对比" ref="refImageLayerSplit" :isEmit="true" @closeJTPopup="closeImageLayerSplit">
				<ImageLayerSplit ref="_refImageLayerSplit" />
			</jt-popup>

			<!-- 分屏对比组件 -->
			<jt-popup title="分屏对比" animationClass="fadein-left" ref="refViewerSplitScreen" :isEmit="true" @closeJTPopup="closeViewerSplitScreen">
				<ViewerSplitScreen ref="_refViewerSplitScreen" />
			</jt-popup>

			<!-- 图层控jt-popup制组件 -->
			<jt-popup title="图层控制" ref="refLayer">
				<layer />
			</jt-popup>

			<!--图上绘制组件-->
			<jt-popup title="图上绘制" ref="refDialogEdit">
				<dialogEdit />
			</jt-popup>

			<!-- 查询结果 -->
			<jt-popup :showfooter='isshowfooter' animationClass="fadein-left" height="400rem" width="800rem" title="信息展示" ref="refQueryResultPopup" :isEmit="true" @closeJTPopup="closeQueryResult">
				<queryResult ref="refQueryResult" />
			</jt-popup>
			
			<!-- <RightHeading></RightHeading> -->
			

			<!-- <video id="trailer" style="display: none;"  autoplay loop crossorigin controls>
				<source src="@/assets/dataFile/jt.mp4" type="video/mp4">
			</video> -->

		</template>
	</div>
</template>

<script>
	import * as echarts from "echarts";
	let store = undefined
	let jt3d = undefined;
	let tipEntity = undefined;

	export default {
		name: "Map3DMain",

		/**
		 *  数据 
		 */
		data() {
			return {
				isshowfooter:false,
				mapLoaded: false,
				showbasicLayer: false, //控制地图组件显示隐藏
				ChartTestData: {}, //剖面分析结果chart
			}
		},

		/**
		 *  方法 
		 */
		methods: {

			/**
			 * 关闭分屏对比
			 */
			closeViewerSplitScreen() {
				this.$refs._refViewerSplitScreen.removeSplitScreen();
			},

			/**
			 * 关闭卷帘对比
			 */
			closeImageLayerSplit() {
				this.$refs._refImageLayerSplit.removeSplitLayer();
			},

			/**
			 * 关闭地形分析弹窗
			 */
			closeAnalysisTerrain() {
				//工具初始化
				this.$refs._refAnalysisTerrain.init();
				//还原左键单击事件
				this.$refs.refMap3d.clickEntity(jt3d);
				window["viewer"].scene.screenSpaceCameraController.enableCollisionDetection = true; //相机与地形的碰撞检测
			},

			/**
			 * 关闭地区导航
			 */
			closeMapNavigate() {
				this.$refs._refmapNavigate.remove();
			},

			/**
			 * 清除测量结果
			 */
			closeMeasure() {
				this.$refs._refMeasure.clearMeasurementData();
			},

			/**
			 * 清除查询结果
			 */
			closeQuery() {
				this.$refs._refQueryGraphics.clearQuery();
			},

			/**
			 * 关闭查询结果
			 */
			closeQueryResult() {
				//清除高亮显示
				let list = jt3d._dataSources.getByName("单击高亮显示")
				list.forEach(res => {
					jt3d._dataSources.remove(res)
				})

				//清除定位样式
				if (jt3d.LocateUtil._locationEntity) {
					window["viewer"].entities.remove(jt3d.LocateUtil._locationEntity);
				}
			},

			/**
			 * 关闭剖面分析结果
			 */
			closeDrawerSectionAnalysis() {
				this.$refs.refDrawerSectionAnalysis.drawerVisible = true;

				if (tipEntity) {
					window.viewer.entities.remove(tipEntity);
					tipEntity = undefined;
				}
				jt3d.SpatialAnalysis.Profile.removeProfileAnalysis();
				jt3d.DrawTools.Clear();

				//还原左键单击事件
				this.$refs.refMap3d.clickEntity(jt3d);
			},

			/**
			 * 构建剖面分析结果chart
			 */
			initEchartsData(sectionAnalysisData) {
				if (tipEntity) {
					window.viewer.entities.remove(tipEntity);
					tipEntity = undefined;
				}
				// jt3d.SpatialAnalysis.Profile.removeProfileAnalysis();

				let datas = [],
					coords = [];
				let pointsData = sectionAnalysisData;

				let maxDistance = pointsData[pointsData.length - 1].distance;
				let xAixMax = Math.ceil(maxDistance);
				for (let index = 0; index < pointsData.length; index++) {
					let element = pointsData[index];
					let curData = [
						parseFloat(element.distance.toFixed(2)),
						parseFloat(element.position.height.toFixed(2))
					];
					datas.push(curData);
					let curCoords = [element.position.lon, element.position.lat];
					coords.push(curCoords);
				}

				let ChartTestData = {
					tooltip: {
						show: true,
						trigger: 'item',
						formatter(params) {
							let xy = coords[params.dataIndex];
							let tipData = params["data"];
							if (params.name === "Max" || params.name === "Min") {
								tipData = params["data"].coord;
							}

							if (!tipEntity) {
								tipEntity = window.viewer.entities.add({
									position: Cesium.Cartesian3.fromDegrees(xy[0], xy[1], Number(tipData[1])),
									billboard: {
										image: '/jt3dSDK/imgs/point/point.png',
										horizontalOrigin: Cesium.HorizontalOrigin.center,
										verticalOrigin: Cesium.VerticalOrigin.bottom,
										scale: 1,
										pixelOffset: new Cesium.Cartesian2(0, 0),
										disableDepthTestDistance: Number.POSITIVE_INFINITY,
									},
								});
							} else {
								tipEntity.position = Cesium.Cartesian3.fromDegrees(xy[0], xy[1], Number(tipData[1]));
							}

							//定位到点
							// jt3d.LocateUtil.flyToPoint({
							// 	longitude: xy[0],
							// 	latitude: xy[1],
							// 	height: Number(tipData[1])
							// });

							return "距离：" + tipData[0] + "m<br>" + "高度：" + tipData[1] + "m<br>" + "坐标：" + xy[0].toFixed(
								5) + "，" + xy[1].toFixed(5);
						}
					},
					grid: {
						bottom: '10%',
						left: '5%',
						right: '5%',
					},
					xAxis: {
						type: "value",
						max: xAixMax,
						axisLabel: { //文字属性
							textStyle: {
								color: 'rgb(216 240 255)'
							},
							formatter: '{value} m'
						},
						axisLine: { //轴线属性
							lineStyle: {
								color: 'rgb(216 240 255)',
								width: 2
							},
						},
						splitLine: { //分割线属性
							lineStyle: {
								type: 'dashed'
							}
						}
					},
					yAxis: {
						type: "value",
						axisLabel: { //文字属性
							textStyle: {
								color: 'rgb(216 240 255)'
							},
							formatter: '{value} m'
						},
						axisLine: { //轴线属性
							lineStyle: {
								color: 'rgb(216 240 255)',
								width: 2
							},
						},
						splitLine: { //分割线属性
							lineStyle: {
								type: 'dashed'
							}
						}
					},
					series: [{
						type: "line",
						data: datas,
						markPoint: {
							symbol: 'path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z,  path://m 0,0 h 48 v 20 h -34 l -6,10 l -6,-10 h -2 z
							symbolSize: [60, 60], // 容器大小
							symbolOffset: ['34%', '-50%'], //位置偏移
							symbolKeepAspect: true, // 如果 symbol 是 path:// 的形式，是否在缩放时保持该图形的长宽比。
							label: {
								textStyle: {
									color: 'rgb(216,240,255)'
								},
								position: "insideTop",
								distance: 7,
							},
							data: [{
									type: 'max',
									name: '最大值',
									itemStyle: { //背景色
										color: 'rgb(255, 70, 131)',
									}
								},
								{
									type: 'min',
									name: '最小值',
									itemStyle: { //背景色
										color: 'rgb(255, 70, 131)',
									}
								}
							]
						},
						itemStyle: {
							color: 'rgba(85,254,139,1)',
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(85,254,139,0.8)'
								},
								{
									offset: 1,
									color: 'rgba(14,245,210,0.2)'
								}
							])
						},
					}]
				};
				this.ChartTestData = ChartTestData;
			},

			/**
			 * 地图初始化
			 * @param {Object} map
			 */
			jtMap3DOnload(map) {
				jt3d = map;
				this.mapLoaded = true;
			},
			
			

		},
		created() {
			store.markID = ''
			store.queryMapTables=[]
		},
		mounted() {
			
		}
	};
</script>
<style lang="scss" scoped>

</style>