iClient添加管线可点击查询属性弹框显示

1. 加载3维管线服务

openscence.ts

/***
 * 加载3维服务
 * @param
 */
export default class OpenScene{
	declare viewer: any
	declare url: String
	declare promise: any
	declare handler: any
	declare eventType: any
	declare prompt: any
	declare addClick: any
	
	constructor(option: {
		viewer: any,
		url: String,
		addClick: any
	}) {
		this.viewer = option.viewer
		this.url = option.url
		
		this.promise = undefined
		
		this.handler = undefined
		
		this.eventType = undefined
		
		this.prompt = undefined
		
		this.addClick = option.addClick
		
		this.add()

	}
	
	/***
	 * 添加场景
	 * @private
	 */
	private add() {
		this.promise = this.viewer.scene.open(this.url);
	}
	
	/***
	 * 添加场景完成
	 * @param {Function} callBack 加载完成回调
	 */
	public success(callBack){
		Cesium.when(this.promise, (layer) => {
			callBack(layer)
		})
	}
	
	/***
	 * 获取所有图层
	 * @param {Function} callBack 获取所有图层回调
	 */
	public getAllLayersName(callback){
		let arr = []
		if(this.viewer.scene.layers?._layers?._array){
			this.viewer.scene.layers._layers._array.forEach(item=>{
				arr.push(item._name)
			})
		}
		
		callback(arr)
	}
	
	/***
	 * 根据name移除图层
	 * @param { string } name 图层名称
	 */
	public removeLayer(name: string){
		if(this.addClick){
			this.addClick.removePopUp()
		}
		if(name){
			this.viewer.scene.layers.remove(name)
		}
	}
	
	/***
	 * 添加点击事件
	 * @param { function } callback 点击后的回调
	 * @public
	 */
	public on(callback){
		if(this.addClick){
			this.addClick.on((point,entity,data)=>{
				callback(point,entity,data)
			})
		}
	}
}

2. 弹框组件

prompt.css

.easy3d-prompt {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.prompt-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 4px 0 0;
    border: none;
    text-align: center;
    width: 18px;
    height: 14px;
    font: 16px/14px Tahoma, Verdana, sans-serif;
    color: #c3c3c3;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
}

.prompt-content-container {
    /* 不给padding撑不开div */
    max-width: 400px;
    border-radius: 4px;
    padding: 1px;
    background: white;
    color: #333;
    box-shadow: 0 3px 14px rgb(0 0 0 / 40%);

}

.prompt-content {
    margin: 13px 19px;
}

.prompt-anchor-container {

    position: absolute;
    width: 40px;

    height: 20px;
    left: 50%;
    margin-left: -20px;
    overflow: hidden ;
    pointer-events: none;
}

.prompt-anchor {
    margin: -10px auto 0;
    background: white;
    width: 17px;
    height: 17px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

Prompt.ts

/**
 * 气泡窗类
 * @class
 *
 */
import "./prompt.css"
import {AllowedComponentProps, ComponentCustomProps, ComponentOptionsMixin, ComputedOptions,
	createVNode,
	DefineComponent,
	ExtractPropTypes,
	MethodOptions,
	render,
	VNodeProps
} from "vue";

class Prompt {
	/**
	 * @param {Cesium.Viewer} viewer 地图viewer对象
	 * @param {Object} opt
	 * @param {Cesium.Cartesian3 | Array} [opt.position] 弹窗坐标 （type=2时生效）
	 * @param {Boolean} opt.show 是否显示
	 * @param {Function} [opt.success] 创建成功的回调函数
	 * @param {Number} [opt.type=1] 1~位置变化提示框 / 2~固定坐标提示框
	 * @param {Cesium.Cartesian3 | Array} opt.position 固定坐标提示框的坐标（ cartesian3 / [101,30] ），type为1时，可不设置此参数
	 * @param {Boolean} [opt.anchor=true] 是否显示锚点
	 * @param {Boolean} [opt.closeBtn=true] 是否显示关闭按钮
	 * @param {String} opt.className 自定义class
	 * @param {String} opt.content 弹窗内容
	 * @param {Function} [opt.close] 关闭弹窗时的回调函数
	 * @param {Object} [opt.offset] 偏移参数
	 * @param {Number} [opt.offset.x] 横坐标偏移像素单位
	 * @param {Number} [opt.offset.y] 纵坐标偏移像素单位
	 * @param {Object} [opt.style] 弹窗面板样式
	 * @param {String} [opt.style.background='white'] 背景色
	 * @param {String} [opt.style.boxShadow] 弹窗阴影（css属性）
	 * @param {String} [opt.style.color] 弹窗颜色
	 *
	 */
	constructor(viewer: any, opt: {
		type?: any,
		content?: any,
		close?: Function,
		position?: any
	}) {
		// @ts-ignore
		this.viewer = viewer;
		// @ts-ignore
		if (!this.viewer) return;
		// @ts-ignore
		this.type = "prompt";
		// 默认值
		opt = opt || {};
		const promptType = opt.type == undefined ? 1 : opt.type;
		let defaultOpt = {
			id: (new Date().getTime() + "" + Math.floor(Math.random() * 10000)),
			type: promptType,
			anchor: promptType == 2 ? true : false,
			closeBtn: promptType == 2 ? true : false,
			offset: promptType == 2 ? { x: 0, y: -20 } : { x: 10, y: 10 },
			content: "",
			props: "",
			show: true,
			style: {
				background: "rgba(0,0,0,0.5)",
				color: "white"
			}
		}
		// @ts-ignore
		this.opt = Object.assign(defaultOpt, opt);
		
		/**
		 * @property {Object} attr 相关属性
		 */
		// @ts-ignore
		this.attr = this.opt;
		// ====================== 创建弹窗内容 start ======================
		// @ts-ignore
		const mapid = this.viewer.container.id;
		
		/**
		 * @property {Boolearn} isShow 当前显示状态
		 */
		// @ts-ignore
		this.isShow = this.opt.show == undefined ? true : this.opt.show; // 是否显示
		let anchorHtml = ``;
		let closeHtml = ``;
		// @ts-ignore
		const background = this.opt.style.background;
		// @ts-ignore
		const color = this.opt.style.color;
		// @ts-ignore
		if (this.opt.anchor) {
			anchorHtml += `
            

                
${background} !important;">
                

`;
}
// @ts-ignore
if (this.opt.closeBtn) { // 移动提示框 不显示关闭按钮
// @ts-ignore
closeHtml = `${this.opt.id}" id="prompt-close-${this.opt.id}">x`;
}
// @ts-ignore
let boxShadow = this.opt.style.boxShadow;
// @ts-ignore
const promptId = "prompt-" + this.opt.id;
// @ts-ignore
const promptConenet = `
${background} !important;color:${color} !important;box-shadow:${boxShadow} !important">
${this.opt.id}">

${anchorHtml}

${closeHtml}
`;
// 构建弹窗元素
// @ts-ignore
this.promptDiv = window.document.createElement("div");
// @ts-ignore
this.promptDiv.className = `easy3d-prompt ${this.opt.className}`;
// @ts-ignore
this.promptDiv.id = promptId;
// @ts-ignore
this.promptDiv.innerHTML = promptConenet;
let mapDom = window.document.getElementById(mapid);
// @ts-ignore
mapDom.appendChild(this.promptDiv);
// @ts-ignore
const app = createVNode(this.opt.content, {data: this.opt.props})
// @ts-ignore
render(app, document.querySelector(`#prompt-content-${this.opt.id}`))
// @ts-ignore
const clsBtn = window.document.getElementById(`prompt-close-${this.opt.id}`);
let that = this;
if (clsBtn) {
clsBtn.addEventListener("click", (e) => {
that.hide();
// @ts-ignore
if (that.opt.close) that.opt.close();
})
}
/**
* @property {Object} promptDom 弹窗div
*/
// @ts-ignore
this.promptDom = window.document.getElementById(promptId);
// @ts-ignore
this.position = this.transPosition(this.opt.position);
// ====================== 创建弹窗内容 end ======================
if (promptType == 2) this.bindRender(); // 固定位置弹窗 绑定实时渲染 当到地球背面时 隐藏
// @ts-ignore
if (this.opt.show == false) this.hide();
// @ts-ignore
this.containerW = this.viewer.container.offsetWidth;
// @ts-ignore
this.containerH = this.viewer.container.offsetHeight;
// @ts-ignore
this.containerLeft = this.viewer.container.offsetLeft;
// @ts-ignore
this.containerTop = this.viewer.container.offsetTop;
/**
* @property {Number} contentW 弹窗宽度
*/
// @ts-ignore
this.contentW = Math.ceil(Number(this.promptDom.offsetWidth)); // 宽度
/**
* @property {Number} contentH 弹窗高度
*/
// @ts-ignore
this.contentH = this.promptDom.offsetHeight; // 高度
// @ts-ignore
if (this.opt.success) this.opt.success();
}
/**
* 销毁
*/
destroy() {
// @ts-ignore
if (this.promptDiv) {
// @ts-ignore
window.document.getElementById(this.viewer.container.id).removeChild(this.promptDiv);
// @ts-ignore
this.promptDiv = null;
}
// @ts-ignore
if (this.rendHandler) {
// @ts-ignore
this.rendHandler();
// @ts-ignore
this.rendHandler = null;
}
}
// 实时监听
bindRender() {
let that = this;
// @ts-ignore
this.rendHandler = this.viewer.scene.postRender.addEventListener(function () {
// @ts-ignore
if (!that.isShow && that.promptDom) {
// @ts-ignore
that.promptDom.style.display = "none";
return;
}
// @ts-ignore
if (!that.position) return;
// @ts-ignore
if (that.position instanceof Cesium.Cartesian3) {
// @ts-ignore
let px = Cesium.SceneTransforms.wgs84ToWindowCoordinates(that.viewer.scene, that.position);
if (!px) return;
// @ts-ignore
const occluder = new Cesium.EllipsoidalOccluder(that.viewer.scene.globe.ellipsoid, that.viewer.scene.camera.position);
// 当前点位是否可见 是否在地球背面
// @ts-ignore
const res = occluder.isPointVisible(that.position);
if (res) {
// @ts-ignore
if (that.promptDom) that.promptDom.style.display = "block";
} else {
// @ts-ignore
if (that.promptDom) that.promptDom.style.display = "none";
}
that.setByPX({
x: px.x,
y: px.y
});
} else {
that.setByPX({
// @ts-ignore
x: that.position.x,
// @ts-ignore
y: that.position.y
});
}
}, this);
}
/**
*
* @param {Cesium.Cartesian3 | Object} px 弹窗坐标
* @param {String} html 弹窗内容
*/
update(px: Cesium.Cartesian3 | Cesium.Cartesian2, html: any) {
if (px instanceof Cesium.Cartesian3) {
// @ts-ignore
this.position = px.clone();
// @ts-ignore
px = Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, px);
}
// @ts-ignore
this.contentW = Math.ceil(Number(this.promptDom.offsetWidth)); // 宽度
// @ts-ignore
this.contentH = this.promptDom.offsetHeight; // 高度
if (px) this.setByPX(px);
if (html) this.setContent(html);
}
// 判断是否在当前视野内
isInView() {
// @ts-ignore
if (!this.position) return false;
let px = null;
// @ts-ignore
if (this.position instanceof Cesium.Cartesian2) {
// @ts-ignore
px = this.position;
} else {
// @ts-ignore
px = Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, this.position);
}
// @ts-ignore
const occluder = new Cesium.EllipsoidalOccluder(this.viewer.scene.globe.ellipsoid, this.viewer.scene.camera.position);
// 是否在地球背面
// @ts-ignore
const res = occluder.isPointVisible(this.position);
let isin = false;
if (!px) return isin;
if (
// @ts-ignore
px.x > this.containerLeft &&
// @ts-ignore
px.x < (this.containerLeft + this.containerW) &&
// @ts-ignore
px.y > this.containerTop &&
// @ts-ignore
px.y < (this.containerTop + this.containerH)
) {
isin = true;
}
return res && isin;
}
/**
* 是否可见
* @param {Boolean} isShow true可见，false不可见
*/
setVisible(isShow: boolean) {
// @ts-ignore
let isin = this.isInView(this.position);
if (isin && isShow) {
// @ts-ignore
this.isShow = true;
// @ts-ignore
if (this.promptDom) this.promptDom.style.display = "block";
} else {
// @ts-ignore
this.isShow = false;
// @ts-ignore
if (this.promptDom) this.promptDom.style.display = "none";
}
}
/**
* 显示
*/
show() {
this.setVisible(true);
}
/**
* 隐藏
*/
hide() {
this.setVisible(false);
}
/**
* 设置弹窗内容
* @param {String} content 内容
*/
// @ts-ignore
setContent(content) {
// @ts-ignore
let pc = window.document.getElementById(`prompt-content-${this.opt.id}`);
// @ts-ignore
pc.innerHTML = content;
// @ts-ignore
const app = createVNode(content, {data: this.opt.props})
// @ts-ignore
render(app, document.querySelector(`#prompt-content-${this.opt.id}`))
}
/**
* 设置弹窗坐标
* @param {Object} opt 屏幕坐标
*/
// @ts-ignore
setByPX(opt) {
if (!opt) return;
// @ts-ignore
if (this.promptDom) {
// @ts-ignore
const contentW = this.promptDom.offsetWidth; // 宽度
// @ts-ignore
const contentH = this.promptDom.offsetHeight; // 高度
// @ts-ignore
if (this.opt.type == 1) {
// @ts-ignore
this.promptDom.style.left = ((Number(opt.x) + Number(this.opt.offset.x || 0))) + "px";
// @ts-ignore
this.promptDom.style.top = ((Number(opt.y) + Number(this.opt.offset.y || 0))) + "px";
} else {
// @ts-ignore
this.promptDom.style.left = ((Number(opt.x) + Number(this.opt.offset.x || 0)) - Number(this.contentW) / 2) + "px";
// @ts-ignore
this.promptDom.style.top = ((Number(opt.y) + Number(this.opt.offset.y || 0)) - Number(this.contentH)) + "px";
}
}
}
// 坐标转换
// @ts-ignore
transPosition(p) {
let position;
if (Array.isArray(p)) {
const posi = Cesium.Cartesian3.fromDegrees(p[0], p[1], p[2] || 0);
position = posi.clone();
} else if (p instanceof Cesium.Cartesian3) {
position = p.clone();
} else { // 像素类型
position = p;
}
return position;
}
}
export default Prompt;

3. 添加点击

HandleClick.ts

import Prompt from "@/components/SuperMap-iClient3D/CesiumPopup";

export default class HandleClick{
	declare isClick: boolean
	declare eventType: any
	
	declare viewer: any
	declare prompt: any
	declare handler: any
	declare popup: object
	
	constructor(option: {
		viewer: any,
		popup: object,
		eventType: string,
	}) {
		this.isClick = false
		this.eventType = option.eventType
		
		this.viewer = option.viewer
		
		this.prompt = undefined
		
		this.handler = undefined
		
		this.popup = option.popup
	}
	
	/***
	 * 添加点击事件
	 * @param { function } callback 点击后的回调
	 * @public
	 */
	public on(callback){
		if(this.isClick){
			return
		}
		this.isClick = true
		
		this.off()
		
		let that = this;
		this.handler = new Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas);
		this.handler.setInputAction(function (click) {
			that.removePopUp()

			let pickedObject = that.viewer.scene.pick(click.position);

			// 屏幕坐标转世界坐标——关键点
			let ellipsoid = that.viewer.scene.globe.ellipsoid;
			let cartesian = that.viewer.camera.pickEllipsoid(click.position, ellipsoid);

			that.viewer._selectedEntity = [];//去除左击之后出现选中的绿框

			if (cartesian) {     //判断点击的是否是地球
				//将笛卡尔坐标转换为地理坐标
				const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
				//将弧度转为度的十进制度表示
				const lon = Cesium.Math.toDegrees(cartographic.longitude);
				const lat = Cesium.Math.toDegrees(cartographic.latitude);
				const click_point = {longitude: lon, latitude: lat};
				// that.viewer._element.style.cursor = 'pointer'
				if (Cesium.defined(pickedObject)) {
					if(that.viewer.scene.layers?._layers?._array){
						that.viewer.scene.layers._layers._array.forEach(item=>{
							let layer = that.viewer.scene.layers.find(item._name);
							layer.indexedDBSetting.isAttributesSave = true
							let ids = layer.getSelection()

							ids.forEach(id=>{
								layer.getAttributesById(id).then(function (data) {
									if(data){
										if(that.popup.component){
											that.prompt = new Prompt(that.viewer,{
												type: 2,
												content: that.popup.component,
												props: data,
												position: [click_point.longitude, click_point.latitude, 0], // 支持多种形式传参 cartesian3 || array || object
												close: function () {
													return false
												} // 点击关闭按钮的回调函数
											});
										}
									}
									callback(click_point,pickedObject,data)

								})
							})

						})
					}

				}
			}
			
		}, Cesium.ScreenSpaceEventType[this.eventType])
	}
	
	/***
	 * 清除点击事件
	 * @public
	 */
	public off(){
		if(this.handler && this.eventType){
			this.handler.removeInputAction(Cesium.ScreenSpaceEventType[this.eventType]);
			this.handler.destroy()
		}
	}
	
	/***
	 * 清除弹框
	 * @public
	 */
	public removePopUp(){
		if(this.prompt){
			this.prompt.destroy()
		}
	}
	
	
}

4. 使用

只注册一个点击事件

  handleClick = new HandleClick({
    viewer: viewer,
    popup: {
      component: popup
    },
    eventType: 'LEFT_CLICK'
  })

scence1 = new OpenScene({
    viewer: getMap(),
    url: 'http://localhost:8090/iserver/services/3D-ReComputeNormalResult-test/rest/realspace',
    addClick: handleClick
  })

  scence1.success(()=>{
    scence1.getAllLayersName((nameArr)=>{
      nameArr.forEach(name=>{
        let line = getMap().scene.layers.find(name);
        line.textureUVSpeed = new Cesium.Cartesian2(0, -1); //模型纹理在UV坐标上的运动速度
      })

    })


    scence1.on((point, layerId, data)=>{

    })
  })