

<!-- 
/**
  * Cesium 地图组件
  * @param: Vue Params
  *	@example1: 
	
		1, 引入
			import cesiumMap from '@/components/Cesium';

		2, 注册
			export default {
				components: {
					cesiumMap
				},
			}
		
		3, 创建
			<cesium
				ref="cesium" 
				:mapinfo="mapinfo"
				:onload="mapOnload" 
				@click="mapClick" 
			/>
		 4, 使用
		 	var cuCesium = this.$refs.cesium;
			cuCesium.addMarker({});
  *	@example2: this.$refs.CesiumMap.addMarkers(marks);
  * @author: Kimber
  * @createtime: 2021/11/18
  */
 -->
<template>
	<div id="cesiumContainer" class="cesium-ctn"></div>
</template>
<script>
export default {
	name: 'cesium',
	data() {
		return {
			icons:{
				
			},
		}
	},
	props:{
		mapinfo: {
			type: Object,
			default: {},
		},
		onload: {
			type: Function,
		},
	},
	watch: {

	},
	created() {
		var that = this;
		
		/**
		  * 初始化地图
		  * @return: 
		  * @author: Kimber
		  * @updatetime: 2021/11/18(周四)
		  * @createtime: 2021/11/18(周四)
		  */
		this.$nextTick(() => {
			var mapinfo = this.mapinfo;
			var viewer = this.viewer = new Cesium.Viewer("cesiumContainer", {
				terrainProvider : Cesium.createWorldTerrain(),
				baseLayerPicker : false,
				timeline:false,
				homeButton:false,
				fullscreenButton:false,
				infoBox:false,
				sceneModePicker:false,
				navigationInstructionsInitiallyVisible:false,
				navigationHelpButton:false,
				geocoder:false,
				animation:false,				// 底部指针
				selectionIndicator:false,
			});
			viewer._cesiumWidget._creditContainer.style.display = "none";
			if(mapinfo.tileConfig && mapinfo.tileConfig.url){
				this.addTile(mapinfo.tileConfig, function(){
					that.setView(mapinfo.view);
				});
			}else{
				that.setView(mapinfo.view);
			};
			this.onload && this.onload()
		});
	},
	mounted() {
	},
	methods: {
		getGuid(prefix, len){
			var id = len ? new Array(len+1).join('x') : 'xxxxxxxx';
			return (prefix || '')+id.replace(/[xy]/g, function (c) {
				var r = Math.random() * 16 | 0,
					v = c == 'x' ? r : (r & 0x3 | 0x8);
				return v.toString(16);
			})
		},
		/**
		  * 添加瓦片
		  * @param: {Object} options []
		  *	@example1: this.addTile(param, fn);
		  * @example2: 
		  * @method: Kimber
		  * @return: 
		  * @create: 2021/11/18
		  */
		addTile(param, fn){
			var that = this;
			var tileset = this.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
				url: param.url,
				maximumScreenSpaceError:1,				// 用于驱动细节细化级别的最大屏幕空间误差。
				maximumMemoryUsage:1024,				// 图块集可以使用的最大内存量（以 MB 为单位）。
			}));
			tileset.readyPromise.then(function () {
				var boundingSphere = tileset.boundingSphere;
				that.viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius));
				that.viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
				fn && fn()
			}).otherwise(function (error) {
				throw (error);
			});
		},
		/**
		  * 设置视角
		  * @return: 
		  * @author: Kimber
		  * @updatetime: 2021/11/18(周四)
		  * @createtime: 2021/11/18(周四)
		  */
		setView(view){
			if(view.longitude){
				// 设备位置、视角
				this.viewer.camera.setView({
					destination:Cesium.Cartesian3.fromDegrees(view.longitude, view.latitude, view.height),
					orientation:{
						// 指向
						heading:view.heading,
						// 视角
						pitch:view.pitch,
						// 倾斜
						roll:view.roll,
					}
				});
			};
		},
		
		/**
		  * 添加标记
		  *	@example1: this.$refs.CesiumMap.addMarkers(marks);
		  * @return: 
		  * @author: Kimber
		  * @updatetime: 2021/11/18(周四)
		  * @createtime: 2021/11/18(周四)
		  */
		addMarkers(list){
			if(Object.prototype.toString.call(list) === '[object Array]'){
				for(var item of list){
					this.createMarker(item);
				};
			}
		},

		addMarker(item){
			return this.createMarker(item);
		},
		
		createMarker(item){
			return this.viewer.entities.add({
				id: this.getGuid(),
				name: item.name,
				position: Cesium.Cartesian3.fromDegrees(Number(item.longitude), Number(item.latitude), Number(item.height) + 2),
				//立广告牌
				/* billboard: {
					image: this.img,
					verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
					show: true, // default
					width: 50, // default: undefined
					height: 55
				}, */
				/* billboard:{		// 图片
					image: './acting.png',
					horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
					verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
					scale: 1,
				} */
				//字体标签样式
				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(0, -50) // 调整偏移位置
				},
			});
		},

		removeMarker(marker){
			return first.viewer.entities.remove(marker);
		},
	}
}
</script>

<style lang="scss" scoped>
	#cesiumContainer {height:100%;width:100%;}
	#cesiumContainer .cesium-viewer{height:100%;width:100%;}
	#cesiumContainer .cesium-viewer-cesiumWidgetContainer{height:100%;width:100%;}
	#cesiumContainer .cesium-widget{width:100%;height:100%;touch-action:none;}
	#cesiumContainer .cesium-widget canvas{width:100%;height:100%;touch-action:none;}
</style>
