JT-CIM-SDK/packages/Widgets/PopupWindow/MultiFieldAdaptWindow.js

/* 引入Cesium */
// import * as Cesium from 'Cesium';

import {
	getGuid,
} from "../common/common.js";

import '../../Assets/styles/PopupWindow/MultiFieldAdaptWindow.css';

/**
 * 多字段适配窗口
 */
class MultiFieldAdaptWindow {

	/**
	 * 初始化
	 * @author joy/创睿
	 * @param {Object} viewer 三维场景viewer对象
	 * @param {Cesium.Cartesian3} position 坐标位置
	 * @param {String} title 窗口标题
	 * @param {Object} properties 属性
	 *       {
	 *           title: title,//标题
	 *           name: name,//名称
	 *           num: num, //编号
	 *           status: true,//在线状态
	 *       }
	 */
	constructor(viewer, position, title, properties, offsetHeight) {
		if (!viewer) throw new Cesium.DeveloperError('no viewer object!');
		if (!position) throw new Cesium.DeveloperError('no position object!');

		this.viewer = viewer; //弹窗创建的viewer
		this.position = position; //弹窗挂载的位置
		this.offsetHeight = offsetHeight;
		//弹窗挂载的位置
		if (position instanceof Cesium.Cartesian3) {
			this.position = position;
		} else {
			this.position = Cesium.Cartesian3.fromDegrees(position[0], position[1], position[2] || 0);
		}
		
		//如果有div就移除
		if (document.getElementsByClassName("MultiField-popup").length > 0) {
			document.getElementsByClassName("MultiField-popup")[0].remove();
			
			viewer.entities.remove(viewer.entities.getById("MultiFieldPopupPoint"));
		}

		this.id = "popup_" + getGuid();
		this.popupDiv = document.createElement("div");
		this.popupDiv.classList.add("MultiField-popup");
		this.popupDiv.id = this.id;

		// 将字符串模板生成的内容添加到DOM上
		this.viewer.container.append(this.popupDiv);
		// this.viewer.cesiumWidget.container.appendChild(this.popupDiv);

		//创建Html
		this.popupDiv.innerHTML = this._createHtml(title, properties);

		//添加场景事件,实时更新窗口的位置
		this.viewer.scene.postRender.addEventListener(this.postRender, this);
		this.initPoint();

		//绑定关闭事件
		document.getElementsByClassName("leaflet-popup-close-button")[0].onclick = () => {
			this.close();
		};
	}

	/**
	 * 场景渲染事件 实时更新窗口的位置 使其与笛卡尔坐标一致
	 * @ignore
	 */
	postRender() {
		const canvasHeight = this.viewer.scene.canvas.height;
		const windowPosition = new Cesium.Cartesian2();
		Cesium.SceneTransforms.wgs84ToWindowCoordinates(
			this.viewer.scene,
			this.position,
			windowPosition
		);

		let elWidth = this.popupDiv.offsetWidth;
		let elHeight = this.popupDiv.offsetHeight;
		//elHeight 值需要设置一个合适的，否则很容易导致场景拖动的时候，弹窗存在偏移
		if (!!this.offsetHeight) {
			elHeight += this.offsetHeight;
		}

		this.popupDiv.style.left = windowPosition.x - elWidth / 2 + "px";
		this.popupDiv.style.top = windowPosition.y - elHeight + "px";

		const camerPosition = this.viewer.camera.position;
		let height = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height;
		height += this.viewer.scene.globe.ellipsoid.maximumRadius;
		if ((!(Cesium.Cartesian3.distance(camerPosition, this.position) > height)) && this.viewer.camera.positionCartographic.height < 50000000) {
			this.popupDiv.style.display = "block";
		} else {
			this.popupDiv.style.display = "none";
		}
	}

	/**
	 * 生成Html
	 * @ignore 
	 * @param {Object} header
	 * @param {Object} content
	 */
	_createHtml(header, content) {
		let html = `
			<div class="MultiField-popup-header">
				` + header + `
				<span class="leaflet-popup-close-button">×</span>
			</div>
			<div class="MultiField-popup-content">
					` + this._createTable(content) + `
			</div>
			<div class="MultiField-popup-tip">
			</div>
		`
		return html;
	}

	/**
	 * 生成Table
	 * @ignore 
	 * @param {Object} content
	 */
	_createTable(content) {
		let html = '<table class="table-popup">';
		for (let key in content) {
			html += `<tr><td class="title-popup">${key}</td>
           <td class="value-popup">${content[key]}</td></tr>`;
		}
		html += "</table>";
		return html;
	}

	/**
	 * 用于调试弹窗是否对得上位置，弹窗对上了该点，不然很容易出现弹窗偏移的问题
	 *  @ignore 
	 */
	initPoint() {
		this.billboard = new Cesium.Entity({
			id: "MultiFieldPopupPoint",
			name: "popupPoint",
			position: this.position, // 点的经纬度坐标
			billboard: {
				image: 'jt3dSDK/imgs/point/point.png',
				horizontalOrigin: Cesium.HorizontalOrigin.center,
				verticalOrigin: Cesium.VerticalOrigin.bottom,
				scale: 1,
				pixelOffset: new Cesium.Cartesian2(0, 0),
				disableDepthTestDistance: Number.POSITIVE_INFINITY,
			},
		});
		this.viewer.entities.add(this.billboard);
	}
}

/**
 * 通用对外公开函数 
 */
Object.assign(MultiFieldAdaptWindow.prototype, /** @lends MultiFieldAdaptWindow.prototype */ {
	/**
	 * 关闭按钮
	 */
	close() {
		this.popupDiv.remove();
		this.viewer.scene.postRender.removeEventListener(this.postRender, this);
		this.viewer.entities.remove(this.billboard);
	}
});

export default MultiFieldAdaptWindow;