vue cesium 加載傾斜攝影數據並在上面添加自定義標注

在main.js引入

import Cesium from 'cesium/Cesium'
import '../node_modules/cesium/Build/Cesium/Widgets/widgets.css'

Vue.prototype.Cesium = Cesium;

// 以下是組件內容



<template>
	<div class="cesium-wrap">
		<div id="cesiumContainer"></div>
		<el-form ref="form" :model="form" label-width="80px" class="cesiumForm" v-if="showForm" size="mini">
			<el-form-item label="id">
				<el-select v-model="form.id" placeholder="請選擇" @change="changeLing">
					<el-option v-for="item in lingList" :key="'ling' + item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="名稱"><el-input v-model="form.name"></el-input></el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit()">提交</el-button>
				<el-button @click="handleClose">取消</el-button>
				<el-button @click="deleHandle">刪除</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	data() {
		return {
			terrainUrl: 'http://172.0.0.1:8888/terrain2/',
			imageryUrl: 'http://172.0.0.1:8888/image/{z}/{x}/{y}.jpg',
			orgPos: { lon: 99.79602474, lat: 26.45798084, height: 300000 }, //7286.13}
			viewer: null, //
			terrainProvider: '', // 添加地形圖數據
			imageryProvider: '', // 圖形數據
			form: {
				id: '',
				name: '',
				jd: '',
				wd: '',
				height: ''
			},
			showForm: false,
			img: '/static/images/mark.png',
			lingList: []
		};
	},
	created() {
		this.queryMingTombsHandler();
	},
	mounted() {
		this.initViewer();
	},
	watch: {},
	methods: {
		// 獲取數據
		queryMingTombsHandler() {
			this.lingList = [];
			this.$commonHttp(請求地址).then(res => {
				if (res.code == this.$codeState.OKCODE) {
					let data = res.data;
					this.lingList = data;
					this.lingList.forEach(item => {
						if (item.height) {
							this.addEntities(item);
						}
					});
					console.log('lingList', this.lingList);
				}
			});
		},
		// 選擇
		changeLing(val) {
			this.lingList.forEach(item => {
				if (item.id == val) {
					this.form.name = item.name;
					console.log('this.form', this.form);
				}
			});
		},
		onSubmit() {
			this.$commonHttp(請求地址, {
				id: this.form.id,
				jd: this.form.jd,
				wd: this.form.wd,
				height: this.form.height
			}).then(res => {
				if (res.code == this.$codeState.OKCODE) {
					this.addEntities(this.form);
					this.showForm = false;
					this.clearFromHandler();
				}
			});
		},
		handleClose() {
			this.showForm = false;
		},
		deleHandle() {
			this.$commonHttp(請求地址, {
				id: this.form.id
			}).then(res => {
				if (res.code == this.$codeState.OKCODE) {
					this.showForm = false;
					this.clearFromHandler();
				}
			});
		},
		// 將屏幕坐標轉為經緯度
		lonLan(position) {
			let viewer = this.viewer;
			let Cesium = this.Cesium;
			var position1, cartographic1, lon, lat, height;
			let lonLanHei = {
				lon: '',
				lat: '',
				height: ''
			};
			let ray = viewer.scene.camera.getPickRay(position);
			position1 = viewer.scene.globe.pick(ray, viewer.scene);
			cartographic1 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position1);
			let feature = viewer.scene.pick(position);
			if (feature == undefined) {
				lon = Cesium.Math.toDegrees(cartographic1.longitude);
				lat = Cesium.Math.toDegrees(cartographic1.latitude);
				height = cartographic1.height;
			} else {
				let cartesian = viewer.scene.pickPosition(position);
				if (Cesium.defined(cartesian)) {
					let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
					lon = Cesium.Math.toDegrees(cartographic.longitude);
					lat = Cesium.Math.toDegrees(cartographic.latitude);
					height = cartographic.height; //模型高度 } };//
				}
			}
			lonLanHei.lat = lat;
			lonLanHei.lon = lon;
			lonLanHei.height = height;
			return lonLanHei;
		},
		clearFromHandler() {
			this.form.id = '';
			this.form.jd = '';
			this.form.wd = '';
			this.form.name = '';
			this.form.height = '';
		},

		initViewer() {
			//添加地形圖數據
			// this.terrainProvider = new this.Cesium.CesiumTerrainProvider({
			//   url: this.terrainUrl
			// });
			// 添加圖片數據
			// this.imageryProvider = new this.Cesium.UrlTemplateImageryProvider({
			//   url: this.imageryUrl,
			//   tilingScheme: new this.Cesium.WebMercatorTilingScheme(),
			//   maximumLevel: 19
			// });
			let terrainModels = this.Cesium.createDefaultTerrainProviderViewModels();
			// 初始化
			this.viewer = new this.Cesium.Viewer('cesiumContainer', {
				// terrainProvider: this.terrainProvider,
				// imageryProvider: this.imageryProvider,
				infoBox: false, //是否顯示信息框--點擊mark時，true有會
				geocoder: false, // 查找位置，查到后會將鏡頭對准找到的地址
				homeButton: false, // 視角返回初始位置
				sceneModePicker: false, // 旋轉視角的模式，有三種3D,2D,哥倫布視圖
				//baseLayerPicker: false, // 圖層選擇器，選擇要顯示的地圖服務和地形服務。
				navigationHelpButton: false, // 導航幫助按鈕，顯示默認的地圖控制幫助。
				fullscreenButton: true, // 全屏按鈕
				animation: false, // 動畫，控制試圖動畫的播放速度
				timeline: false, // 時間線，指示當前時間，並允許用戶跳到特定的時間。
				selectionIndicator: false, // 禁止entity選中
				vrButton: true,
				scene3DOnly: false,
				sceneMode: 3
				//terrainProviderViewModels: terrainModels,
				//selectedTerrainProviderViewModel: terrainModels[1] // Select STK high-res terrain
			});
			this.viewer.scene.globe.depthTestAgainstTerrain = false;
			// cesium的label的清晰度
			this.viewer.scene.postProcessStages.fxaa.enabled = false;
			// 加載傾斜攝影數據
			this.loadTilesetHandler();
			// this.initCamera();
			//去掉地圖標志
			this.viewer._cesiumWidget._creditContainer.style.display = 'none';
			this.initMark();
		},
		// 加載傾斜攝影數據
		loadTilesetHandler() {
			let tileset = this.viewer.scene.primitives.add(
				new this.Cesium.Cesium3DTileset({
					url: 'http://172.18.49.225:65432/qxsy/tileset.json' //
				})
			);
			tileset.readyPromise
				.then(() => {
					this.viewer.scene.primitives.lowerToBottom(tileset);
					let boundingSphere = tileset.boundingSphere;
					this.viewer.camera.viewBoundingSphere(boundingSphere, new this.Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius));
					this.viewer.camera.lookAtTransform(this.Cesium.Matrix4.IDENTITY);
				})
				.otherwise(function(Aerror) {
					throw error;
				});
		},
		initCamera() {
			let self = this;
			this.viewer.scene.camera.flyTo({
				destination: this.Cesium.Cartesian3.fromDegrees(this.orgPos.lon, this.orgPos.lat, this.orgPos.height), // 設置位置
				orientation: {
					heading: this.Cesium.Math.toRadians(0.0), // 方向
					pitch: this.Cesium.Math.toRadians(-90), // 傾斜角度
					roll: this.Cesium.Math.toRadians(0)
				},
				complete: () => {
					// 到達位置后執行的回調函數
					this.viewer.scene.camera.flyTo({
						destination: self.Cesium.Cartesian3.fromDegrees(self.orgPos.lon, self.orgPos.lat, self.orgPos.height),
						orientation: {
							heading: self.Cesium.Math.toRadians(0.0),
							pitch: self.Cesium.Math.toRadians(-30),
							roll: self.Cesium.Math.toRadians(0)
						},
						complete: () => {},
						duration: 3
					});
				},
				duration: 5 // 設置飛行持續時間，默認會根據距離來計算
			});
		},
		initMark() {
			const viewer = this.viewer;
			const Cesium = this.Cesium;

			// 左擊進入360全景
			viewer.screenSpaceEventHandler.setInputAction(e => {
				viewer.selectedEntity = this.pickEntity(viewer, e.position);
				if (!viewer.selectedEntity) {
					let obj = this.lonLan(e.position);
					this.form.jd = obj.lon;
					this.form.wd = obj.lat;
					this.form.height = obj.height;
					this.showForm = true;
				} else {
					this.$parent.detailInfo(viewer.selectedEntity._id);
					console.log('進入360全景', viewer.selectedEntity._id);
				}
			}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

			// 雙擊entity，會放大視圖，entity居中顯示，且鼠標左鍵失去移動功能，鼠標滾輪失去作用
			this.viewer.screenSpaceEventHandler.setInputAction(() => {}, this.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
		},
		//雙擊操作
		pickAndTrackObject(e) {},
		// 設置廣告牌label
		addEntities(item) {
			const viewer = this.viewer;
			const Cesium = this.Cesium;
			// label顯示清晰度
			viewer.scene.postProcessStages.fxaa.enabled = false;
			let wyoming = viewer.entities.add({
				id: item.id,
				name: item.name,
				position: Cesium.Cartesian3.fromDegrees(Number(item.jd), Number(item.wd), Number(item.height) + 10),
				//立廣告牌
				billboard: {
					image: this.img,
					verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
					show: true, // default
					width: 50, // default: undefined
					height: 55
				},
				//字體標簽樣式
				label: {
					text: item.name,
					font:'normal 32px MicroSoft YaHei',
					scale:0.5,
					color: Cesium.Color.WHITE,
					style: Cesium.LabelStyle.FILL_AND_OUTLINE,
					showBackground: true,
					horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
					verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
					// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 8000.0),
					// disableDepthTestDistance: 100.0,
					pixelOffset: new Cesium.Cartesian2(40, -20) // 調整偏移位置
				}
			});
		},
		// 拾取實體
		pickEntity(viewer, position) {
			const Cesium = this.Cesium;
			let picked = viewer.scene.pick(position);
			if (picked) {
				let id = Cesium.defaultValue(picked.id, picked.primitive.id);
				if (id instanceof Cesium.Entity) {
					return id;
				}
			}
			return undefined;
		}
	}
};
</script>

<style scoped lang="less">
.cesium-wrap {
	width: 100%;
	height: 100%;
	display: inline-block;
}
#cesiumContainer {
	width: 100%;
	height: 100%;
	position: absolute;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.cesiumForm {
	width: 300px;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 10;
	background-color: #ccc;
	padding: 10px;
	transform: translate(-50%, -50%);
}
</style>