JT-CIM-SDK/src/views/map3d/components/map3d.vue

<script setup>

</script>
<template>
	<div id="cesiumContainer" class="jt-map"></div>
	<div id="cesiumContainer2" class="mapview" style="display: none;"></div>
</template>
<script>

	import jt3dNavigation from "cesium-navigation-es6";

	let jt3d = undefined;

	export default {

		/* 数据 */
		data() {
			return {
				name: "jt-map3d",
			}
		},

		/* 方法 */
		methods: {
			/**
			 * 初始化
			 */
			init(el) {
				//初始化大球
				this.initMap3d(el);

				//设置默认视图
				this.setView(jt3d);

				// 初始化项目区域范围视角
				this.fullMap(jt3d);

				//加载天空盒子
				// this.addSkybox(jt3d);

				// 比例尺、指南针
				this.initNavigation();

				//单击事件
				// this.clickEntity(jt3d);

				//调用父组件的方法，onload是在父组件的的动态组件component上面的方法,并将jt3d传过去
				this.$emit("onload", jt3d);
				// console.log('this.$parent',this.$parent)
				// this.$parent.jtMap3DOnload(jt3d);

			},

			/**
			 * 单击事件
			 */
			clickEntity() {

				let _self = this;

				if (jt3d.handlerLeftClick) {
					jt3d.handlerLeftClick.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //移除事件
				}

				jt3d.handlerLeftClick = new Cesium.ScreenSpaceEventHandler(
					window.viewer.scene.canvas
				);
				//注册大球单机事件
				jt3d.handlerLeftClick.setInputAction(function(e) {
					var pick = window.viewer.scene.pick(e.position); //拾取当前的entity对象
					var cartesian = window.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 jt3dSDK.jtMap3d({
					container: el,
				});
				jt3d.statusBar.show = true;
				window.viewer = jt3d._viewer;

				// this.statusBar = new jt3dSDK.StatusBar(window.viewer);
				// this.statusBar.show = 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: 121.563298,
					south: 37.284514,
					east: 121.565298,
					north: 37.286514,
					isRemove: false, //定位完成后是否删除
					duration: 3, //飞行时间
					heading: 0,
					pitch: -90,
					range: 115000
				};

				let optionsE = {
					west: 121.563298,
					south: 37.284514,
					east: 121.565298,
					north: 37.286514,
					isRemove: true, //定位完成后是否删除
					duration: 3, //飞行时间
					heading: 0,
					pitch: -60,
					range: 115000
				};

				var fullMapPromise = jt3d.fullMap(optionsS);
				fullMapPromise.then(function(flyPromise) {
					jt3d.fullMap(optionsE);
				});
			},

			/**
			 * 设置天空盒子
			 */
			addSkybox(jt3d) {
				//设置天空盒子,默认蓝天

				this.SceneEffects = new jt3dSDK.SceneEffects.SkyBox(window.viewer);
				this.SceneEffects.setGroundSkyBox();
			},

			/**
			 * 比例尺、指南针
			 * @param {Object} options 具有以下属性:
			 * @param {Number} options.longitude 经度，以度为单位
			 * @param {Number} options.latitude 纬度，以度为单位
			 * @param {Number} [options.height=0.0] 椭球的高度，以米为单位
			 * @param {Number} [options.heading=0.0] 指向，默认值0.0（北）
			 * @param {Number} [options.pitch=-90] 视角，默认值-90(向下看)。俯仰，人如果在赤道上空，俯仰角为0可见地球。如果在北纬，俯仰角为负才能见地球
			 * @param {Number} [options.roll=0.0] 翻滚
			 * @param {Number} [options.enableCompass=true] 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
			 * @param {Number} [options.enableZoomControls=true] 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
			 * @param {Number} [options.enableDistanceLegend=true] 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
			 * @param {Number} [options.enableCompassOuterRing=true] 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
			 */
			initNavigation() {
				let options = {};
				// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
				options.defaultResetView = Cesium.Rectangle.fromDegrees(121.13766, 36.99670, 121.94984, 37.55286);
				// options.defaultResetView = Cesium.Cartographic(103.84,31.15,24000000);
				// options.defaultResetView = Cesium.Cartographic.fromDegrees(jtMap3dBase.Math.toRadians(103.84), Cesium.Math.toRadians(31.15), 24000000);
				options.orientation = {
					heading: Cesium.Math.toRadians(0),
					pitch: Cesium.Math.toRadians(-90),
					roll: 0,
				}

				//相机延时
				options.duration = 4 //默认为3s

				// 用于启用或禁用罗盘。
				options.enableCompass = true;
				// 用于启用或禁用指南针外环。
				options.enableCompassOuterRing = true;
				// 用于启用或禁用缩放控件。
				options.enableZoomControls = true;
				// 用于启用或禁用距离图例。
				options.enableDistanceLegend = false;

				//修改重置视图的tooltip
				options.resetTooltip = "重置视图";
				//修改放大按钮的tooltip
				options.zoomInTooltip = "放大";
				//修改缩小按钮的tooltip
				options.zoomOutTooltip = "缩小";

				//如需自定义罗盘控件，请看下面的自定义罗盘控件
				new jt3dNavigation(window.viewer, options);
			},

			/**
			 * 地图绕点自旋
			 */
			setMapSpin() {
				//移除左键单击事件
				if (jt3d.handlerLeftClick) {
					jt3d.handlerLeftClick.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
				}

				let SketchViewModel = new jt3dSDK.SketchViewModel(window.viewer, {
					isClear: true,
					isDrawPoint: false, //是否标记参考点
					isRetainDrawPoint: false, //绘制完成是否保留绘制点
					iconType: 'blue',
				}, );

				SketchViewModel.sketchTools('point', {
					onComplete(cPoint, gPoint) {
						jt3d.setMapSpinByPoint(cPoint, {
							// height: 100000
						});
					},
					onError(message) {}
				});
			},

			/**
			 * 地图指北
			 */
			setMapNorth() {
				jt3d.setMapNorth();
				jt3d.isSpan = false;
			},

		},

		mounted() {
			this.init("cesiumContainer");
			let mapView1 = document.getElementById("cesiumContainer");
			var canvas = window.viewer.canvas; // 获取画布
			console.log('画布', canvas.width)
		}
	};
</script>

<style scoped>
	#cesiumContainer {
		height: 100vh;
		margin: 0;
		padding: 0;
		border: 0px solid red;
	}
</style>