通用地图

src/components/jt-popup/jt-popup2.vue

@@ -142,7 +142,8 @@
 	}
 
 	.popup-main {
-		position: absolute;
+		position: fixed;
+		pointer-events: auto;
 		left: 10rem;
 		top: 95rem;
 		margin-top: 15rem;

src/components/jt-popup/jt-popup3.vue

@@ -143,6 +143,7 @@
 
 	.popup-main {
 		position: absolute;
+		pointer-events: auto;
 		right: 10rem;
 		top: 95rem;
 		margin-top: 15rem;

src/store/index.ts

@@ -1,35 +1,36 @@
-import {createApp} from 'vue';
+import { createApp } from 'vue';
 import App from '../App.vue';
-import {createPinia} from 'pinia';
+import { createPinia } from 'pinia';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
 let app = createApp(App);
 app.use(pinia);
 import {
-	defineStore  
+	defineStore
 } from 'pinia';
 
 export const Store = defineStore({
-	id:'layerId',//命名
+	id: 'layerId',//命名
 	state: () => {
-		return{
-			queryMapTables:[],//地图查询表
-			roleId:'',//用户权限ID
-			realName:'',//登录账号的用户名
-			layerID:'',//控制唯一底图加载id
-			markID:'',//控制标注id
-			keepAlives:['Map3DMain'],//控制加载缓存页面
-			userport:''
+		return {
+			queryMapTables: [],//地图查询表
+			roleId: '',//用户权限ID
+			realName: '',//登录账号的用户名
+			layerID: '',//控制唯一底图加载id
+			markID: '',//控制标注id
+			keepAlives: ['Map3DMain'],//控制加载缓存页面
+			userport: '',
+			jt3d: {},//地图实例
 		}
 	},
-	getters:{
-	  keepAlive(state){
-	    return state.keepAlives
-	  }
+	getters: {
+		keepAlive(state) {
+			return state.keepAlives
+		}
 	},
 	actions: {
-		setLayerID(index){
+		setLayerID(index) {
 			this.layerID = index
 		}
 	},

src/views/Main/MainView.vue

@@ -1,16 +1,24 @@
 <script setup>
 	import JtHeader from './components/header.vue';
 	import modifyModule from './components/modifyPassword.vue';
-	import ZhHeader from "./components/ZhHeader.vue"
+	import ZhHeader from "./components/ZhHeader.vue";
+	import map3d from './components/map.vue';
+	import {
+		provide
+	} from "vue";
+	provide("getMapInstance", () => {
+		return jt3d;
+	});
+	
 </script>
 <template>
 	<div class="Mainpage">
 		<!-- 顶栏容器 -->
 		<!-- <JtHeader @handleSelect="handleSelect" /> -->
 		<ZhHeader></ZhHeader>
-		
+		<map3d @onload="jtMap3DOnload" ref="refMap3d" class="map3d" />
 		<!-- 控制路由页面是否缓存 -->
-		<router-view v-slot="{ Component }">
+		<router-view v-slot="{ Component }" v-if="mapLoaded">
 			<keep-alive>
 				<component :is=" Component" v-if="$route.meta.keepAlive" />
 			</keep-alive>
@@ -18,18 +26,25 @@
 		</router-view>
 		
 		<!-- 修改密码 -->
-		<modifyModule ref="modifyMoudle"></modifyModule>
+		<!-- <modifyModule ref="modifyMoudle"></modifyModule> -->
 	</div>
 	
 </template>
 
 <script>
+	import {
+		Store
+	} from '@/store/index'
+	let store = Store();
+	let jt3d = undefined;
 	export default {
 		name: 'MainView',
 
 		/* 数据 */
 		data() {
-			return {}
+			return {
+				mapLoaded:false,//保证地图加载完成，在加载子路由
+			}
 		},
 
 		/* 方法 */
@@ -38,6 +53,12 @@
 			modifyMoudle() {
 				this.$refs.modifyMoudle.isshow = true
 			},
+			jtMap3DOnload(map) {
+				jt3d = map;
+				this.mapLoaded = true;
+				console.log('地图实例',jt3d)
+				store.jt3d = jt3d
+			},
 		},
 		mounted() {
 
@@ -47,6 +68,12 @@
 
 <style lang="scss" scoped>
 	.Mainpage{
-		
+		position: relative;
+		top: 0;
+		width: 100%;
+		height: 100%;
+	}
+	.map3d{
+		z-index: 5;
 	}
 </style>

src/views/Main/components/map.vue

@@ -0,0 +1,360 @@
+<template>
+	<div id="cesiumContainer2" class="ViewerSplitScreen" style="display: none; border-right: 5rem solid #fff"></div>
+	<div id="cesiumContainer" class="jt-map" ref="cesiumContainer">
+		<div class="back"></div>
+	</div>
+</template>
+
+<script>
+	import {
+		Store
+	} from '@/store/index'
+	let store = Store();
+
+	import map_xzqh_zj from '@/assets/dataFile/map_xzqh_zj.json';
+
+	let jt3d = undefined;
+	export default {
+
+		/* 数据 */
+		data() {
+			return {
+				LocateId: 'locate_ID_remove', //标记定位所用ID
+				entity: ''
+			}
+		},
+
+		/* 方法 */
+		methods: {
+			//定位方法
+			startLocation() {
+				let that = this
+				plusGPSListenerOn(function(lat, lon) {
+					console.log('位置坐标', lat, lon)
+					let terrainProvider = jt3d._viewer.terrainProvider;
+					//异步函数
+					return new Promise((resolve, reject) => {
+						lon = Number(lon)
+						lat = Number(lat)
+						let promise = new Cesium.sampleTerrainMostDetailed(terrainProvider, [Cesium
+							.Cartographic.fromDegrees(lon, lat)
+						]);
+						promise.then(function(updatedPositions) {
+							if (that.entity) {
+								jt3d._viewer.entities.remove(that.entity)
+							}
+							// if that.entity && jt3d._viewer.entities.remove(that.entity)
+							console.log('高度', updatedPositions[0].height)
+							let height = updatedPositions[0].height
+
+							that.entity = new Cesium.Entity({
+								name: "add billboard",
+								//位置
+								position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
+								//图片标签
+								billboard: {
+									image: 'jt3dSDK/imgs/point/point.png',
+									horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平
+									verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
+									// scale: billboard.scale, //尺寸
+									// pixelOffset: new Cesium.Cartesian2(0, billboard.pixelOffset),
+									disableDepthTestDistance: Number.POSITIVE_INFINITY,
+									scale: 1,
+									scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1, 2400, 0) //按距离缩放，即距离大于180米时，图标不显示  Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
+								}
+							});
+							jt3d._viewer.entities.add(that.entity, {
+								range: 1000
+							});
+
+							// let LocateNowTime = jt3d.PointObject.addBillboard([lon, lat,height], {
+							// 	// id: that.LocateId
+							// })
+							// LocateNowTime.then(entity => {
+							// 	that.entity = entity
+							// })
+							resolve(updatedPositions);
+						});
+					})
+					// let getHeight = new that.jt3dSDK.common.getHeigthByPointsMostDetailed(jt3d._viewer,[[lon,lat]])
+					// getHeight.then(height=>{
+					// 	// if that.entity && jt3d._viewer.entities.remove(that.entity)
+					// 	console.log('高度',height)
+					// 	let LocateNowTime = jt3d.PointObject.addBillboard([lon,lat,height],{
+					// 		id:that.LocateId
+					// 	})
+					// 	LocateNowTime.then(entity=>{
+					// 		that.entity = entity
+					// 	})
+					// })
+				});
+			},
+			/**
+			 * 初始化
+			 */
+			init(el) {
+				//初始化大球
+				this.initMap3d(el);
+
+				//设置默认视图
+				this.setView(jt3d);
+
+				// 初始化项目区域范围视角
+				this.fullMap(jt3d);
+
+				//加载天空盒子
+				this.addSkybox(jt3d);
+
+				//调用父组件的方法，onload是在父组件的的动态组件component上面的方法,并将jt3d传过去
+				this.$emit("onload", jt3d);
+				// console.log(this.$parent)
+				this.$parent.jtMap3DOnload(jt3d);
+
+				//单击事件
+				// this.clickEntity(jt3d);
+
+				//添加镇街边界线——精灵线
+				// this.addBoundaryLine(jt3d);
+
+			},
+			/**
+			 * 添加镇街边界线——精灵线
+			 */
+			addBoundaryLine(jt3d) {
+				jt3d.PolylineObject.drawPolylineByGeoJson(map_xzqh_zj, {
+					width: 5,
+					color: '#04FFFF',
+					isImageAlpha: true, //用图片自带颜色
+					duration: 3000,
+					imgUrl: "/jt3dSDK/imgs/polylinematerial/spriteline1.png"
+				});
+			},
+
+			/**
+			 * 单击事件
+			 */
+			clickEntity(jt3d) {
+
+				let _self = this;
+
+				if (jt3d.handlerLeftClick) {
+					jt3d.handlerLeftClick.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //移除事件
+				}
+
+				jt3d.handlerLeftClick = new Cesium.ScreenSpaceEventHandler(
+					jt3d._viewer.scene.canvas
+				);
+				//注册大球单机事件
+				jt3d.handlerLeftClick.setInputAction(function(e) {
+					var pick = jt3d._viewer.scene.pick(e.position); //拾取当前的entity对象
+					var cartesian = jt3d._viewer.scene.pickPosition(e.position); //获取当前点坐标
+					if (Cesium.defined(cartesian)) {
+						//将笛卡尔坐标转换为地理坐标
+						let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+						//将弧度转为度的十进制度表示
+						let lng = Cesium.Math.toDegrees(cartographic.longitude);
+						let lat = Cesium.Math.toDegrees(cartographic.latitude);
+						let alt = cartographic.height; //高度
+
+						_self.$parent.$refs._refQueryGraphics.initQuery({
+							spatialType: '点',
+							coordinate: lng + " " + lat,
+							buffer: ''
+						});
+					}
+				}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+			},
+
+			/**
+			 * 创建大球
+			 */
+			initMap3d(el) {
+
+				jt3d = new this.jt3dSDK.jtMap3d({
+					container: el,
+				});
+
+				jt3d.statusBar.show = true;
+
+				jt3d.layer = new this.jt3dSDK.layer(jt3d._viewer);
+
+				jt3d.CommonTools = new this.jt3dSDK.CommonTools(jt3d._viewer, {
+					isClear: false,
+					isDrawPoint: true,
+					isRetainDrawPoint: false,
+					iconType: 'blue',
+				});
+				jt3d.SketchViewModel = new this.jt3dSDK.SketchViewModel(jt3d._viewer, {
+					isClear: true,
+					isDrawPoint: false,
+					isRetainDrawPoint: false,
+					iconType: 'blue',
+				});
+				jt3d.DrawTools = new this.jt3dSDK.DrawTools(jt3d._viewer, {
+					isDrawPoint: true, //是否标记参考点
+					isRetainDrawPoint: false, //绘制完成是否保留绘制点
+					iconType: 'blue',
+				});
+				jt3d.DrawToolsEdit = new this.jt3dSDK.DrawTools(jt3d._viewer, {
+					isDrawPoint: true, //是否标记参考点
+					isRetainDrawPoint: true, //绘制完成是否保留绘制点
+					iconType: 'blue',
+				});
+				jt3d.DrawMilitaryPlot = new this.jt3dSDK.DrawMilitaryPlot(jt3d._viewer);
+
+				jt3d.LocateUtil = new this.jt3dSDK.LocateUtil(jt3d._viewer);
+
+				// jt3d.getHeigthByLngLat = new this.jt3dSDK.getHeigthByLngLat(jt3d._viewer) //获取高度
+
+				jt3d.SpatialAnalysis = {};
+				jt3d.SpatialAnalysis.SightLine = new this.jt3dSDK.SpatialAnalysis.SightLine(jt3d._viewer);
+				jt3d.SpatialAnalysis.ViewShed = new this.jt3dSDK.SpatialAnalysis.ViewShed(jt3d._viewer);
+				jt3d.SpatialAnalysis.SunshineShadow = new this.jt3dSDK.SpatialAnalysis.SunshineShadow(jt3d._viewer);
+				jt3d.SpatialAnalysis.Profile = new this.jt3dSDK.SpatialAnalysis.Profile(jt3d._viewer);
+				jt3d.SpatialAnalysis.CutFill = new this.jt3dSDK.SpatialAnalysis.CutFill(jt3d._viewer);
+				jt3d.SpatialAnalysis.HeightLimit = new this.jt3dSDK.SpatialAnalysis.HeightLimit(jt3d._viewer);
+				jt3d.SpatialAnalysis.Cutting = new this.jt3dSDK.SpatialAnalysis.Cutting(jt3d._viewer);
+				jt3d.SpatialAnalysis.GeologyClipPlan = new this.jt3dSDK.SpatialAnalysis.GeologyClipPlan(jt3d._viewer);
+
+				jt3d.TerrainAnalysis = {};
+				jt3d.TerrainAnalysis.TerrainExcavation = new this.jt3dSDK.TerrainAnalysis.TerrainExcavation(jt3d._viewer);
+				jt3d.TerrainAnalysis.SlopeAspect = new this.jt3dSDK.TerrainAnalysis.SlopeAspect(jt3d._viewer);
+
+				jt3d.SceneEffects = {};
+				jt3d.SceneEffects.Weather = new this.jt3dSDK.SceneEffects.Weather(jt3d._viewer);
+				jt3d.SceneEffects.SkyBox = new this.jt3dSDK.SceneEffects.SkyBox(jt3d._viewer);
+				jt3d.SceneEffects.ParticleSystem = new this.jt3dSDK.SceneEffects.ParticleSystem(jt3d._viewer);
+
+				jt3d.TrackRoam = new this.jt3dSDK.TrackRoam(jt3d._viewer);
+				jt3d.PolylineObject = new this.jt3dSDK.PolylineObject(jt3d._viewer);
+				jt3d.PointObject = new this.jt3dSDK.PointObject(jt3d._viewer);
+				jt3d.PolygonObject = new this.jt3dSDK.PolygonObject(jt3d._viewer);
+
+				window["viewer"] = jt3d._viewer;
+				window["viewer"].scene.terrainExaggeration = 100;
+
+				//显示帧率
+				window["viewer"].scene.debugShowFramesPerSecond = true;
+			},
+
+
+			/**
+			 * 设置默认视图-初始化中国区域范围视角
+			 */
+			setView(jt3d) {
+				// jt3d.flytoChina();
+
+				//初始化中国区域范围视角
+				jt3d.setViewChina();
+
+				// jt3d.setView({
+				// 	longitude: 103.84, //经度
+				// 	latitude: 31.15, // 维度
+				// 	height: 24000000, // 高度
+				// 	heading: 0, // 偏航
+				// 	pitch: -90, // 俯仰，人如果在赤道上空，俯仰角为0可见地球。如果在北纬，俯仰角为负才能见地球
+				// 	roll: 0.0 // 翻滚
+				// });
+			},
+
+			/**
+			 * 全图-飞行到项目区域范围视角
+			 */
+			fullMap(jt3d) {
+				// 初始化项目区域范围视角
+				let optionsS = {
+					west: 118.69586,
+					south: 35.91360,
+					east: 122.70061,
+					north: 38.65489,
+					isRemove: false, //定位完成后是否删除
+					duration: 3, //飞行时间
+					heading: 0,
+					pitch: -90,
+					range: 315000
+				};
+
+				let optionsE = {
+					west: 118.69586,
+					south: 35.91360,
+					east: 122.70061,
+					north: 38.65489,
+					isRemove: true, //定位完成后是否删除
+					duration: 3, //飞行时间
+					heading: 0,
+					pitch: -60,
+					range: 315000
+				};
+
+				var fullMapPromise = jt3d.fullMap(optionsS);
+				fullMapPromise.then(function(flyPromise) {
+					jt3d.fullMap(optionsE);
+				});
+			},
+
+			/**
+			 * 设置天空盒子
+			 */
+			addSkybox(jt3d) {
+				//设置天空盒子,默认蓝天
+				jt3d.SceneEffects.SkyBox.setGroundSkyBox();
+			},
+		},
+
+		mounted() {
+
+			this.init("cesiumContainer");
+			// if (store.userport == 'APP') {
+			// 	setTimeout(res => {
+			// 		this.startLocation()
+			// 	}, 100)
+			// 	setTimeout(res => {
+			// 		jt3d.LocateUtil.flyToEntity(this.entity)
+			// 	}, 10000)
+			// }
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.lk-status-bar {
+		font-size: 16rem !important;
+	}
+	
+	.back{
+		background: url('@/assets/images/backImgshort.png') no-repeat;
+		background-size: 100% 100%;
+		height: 100%;
+		width: 100%;
+		pointer-events: none;
+		position: absolute;
+		z-index: 10;
+		// background-color: rgba(0,0,0,0);
+		// opacity: 0.1;
+	}
+
+	.jt-map {
+		// width: calc(100% - 0rem);
+		// height: calc(100vh - 70rem);
+		height: 100vh;
+		margin: 0;
+		padding: 0;
+		overflow: hidden;
+		background-color: blue;
+		border: 0rem solid red;
+		
+	}
+
+	//分屏样式
+	.ViewerSplitScreen {
+		float: left;
+		width: calc(50% - 2.5rem);
+		// height: calc(100vh - 70rem);
+		height: 100vh;
+		margin: 0;
+
+		.lk-status-bar {
+			width: calc(50% - 0rem) !important;
+		}
+	}
+</style>

src/views/Map3d/Map3DMain.vue

@@ -27,7 +27,7 @@
 	// 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';
@@ -75,138 +75,45 @@
 
 <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-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>
-			
-			<!-- 视角标签 -->
-			<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>
+
+		<!-- 底图组件 -->
+		<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>
 
@@ -224,7 +131,7 @@
 		 */
 		data() {
 			return {
-				isshowfooter:false,
+				isshowfooter: false,
 				mapLoaded: false,
 				showbasicLayer: false, //控制地图组件显示隐藏
 				ChartTestData: {}, //剖面分析结果chart
@@ -480,25 +387,32 @@
 			 * 地图初始化
 			 * @param {Object} map
 			 */
-			jtMap3DOnload(map) {
-				jt3d = map;
-				this.mapLoaded = true;
-			},
-			
-			
+			// jtMap3DOnload(map) {
+			// 	jt3d = map;
+			// 	this.mapLoaded = true;
+			// },
+
+
 
 		},
 		created() {
 			store.markID = ''
-			store.queryMapTables=[]
+			store.queryMapTables = []
+			jt3d = store.jt3d
+			console.log('地图3d', jt3d)
 		},
 		mounted() {
-			
+
 		}
 	};
 </script>
 <style lang="scss" scoped>
-	.jt-mapMain{
-		
+	.jt-mapMain {
+		z-index: 15;
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		pointer-events: none;
 	}
 </style>