JT-CIM/src/views/Main/components/map.vue

<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 = 1000

							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) {
				let that = this
				//初始化大球
				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);
				
				that.entity1 = new Cesium.Entity({
					name: "add billboard",
					//位置
					position: Cesium.Cartesian3.fromDegrees(120.623, 36.9157, 100),
					//图片标签
					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)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
					}
					// point:{
					// 	pixelSize:20,
					// 	color:Cesium.Color.RED,
					// }
				});
				var entity = jt3d._viewer.entities.add(that.entity1, {
					// range: 1000
				});
				setTimeout(res=>{
					jt3d.LocateUtil.flyToEntity(that.entity)
				},6000)
				

				//单击事件
				// 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>