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 ggsbtj from "./components/ggsbtj.vue";
	import ysltj from "./components/ysltj.vue";
	import sbyxjc from "./components/sbyxjc.vue";
	import qtnhzb from "./components/qtnhzb.vue";
	import nhtbtj from "./components/nhtbtj.vue";
	import znjk from "./components/znjk.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">
		<!-- 地图组件 -->

		<!-- 地图加载完成后，在加载其他组件 -->

		<!-- 底图组件 -->
		<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-popup2 title="灌溉设备统计" ref="ggsbtj">
			<ggsbtj ref="_ggsbtj"></ggsbtj>
		</jt-popup2>

		<jt-popup2 title="设备运行监测" top="calc(calc(100% - 115rem) / 3 + 90rem)" ref="sbyxjc">
			<sbyxjc ref="_sbyxjc"></sbyxjc>
		</jt-popup2>

		<jt-popup2 title="灌溉水位监测" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" ref="qtnhzb">
			<qtnhzb ref="_qtnhzb"></qtnhzb>
		</jt-popup2>

		<jt-popup3 title="用水量统计" ref="ysltj">
			<ysltj ref="_ysltj"></ysltj>
		</jt-popup3>

		<jt-popup3 title="能耗同比统计" top="calc(calc(100% - 115rem) / 3 + 90rem)" ref="nhtbtj">
			<nhtbtj ref="_nhtbtj"></nhtbtj>
		</jt-popup3>

		<jt-popup3 title="智能监控" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" ref="znjk">
			<znjk ref="_znjk"></znjk>
		</jt-popup3>

	</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 = []
			jt3d = store.jt3d
			console.log('地图3d', jt3d)
		},
		mounted() {

		}
	};
</script>
<style lang="scss" scoped>
	.jt-mapMain {
		z-index: 15;
		// position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		pointer-events: none;
	}
</style>