实体数据加载到地图上之后，使用点击事件拾取实体获取实体信息
clickPop() {
let _this = this;
// 实体的点击事件
_this.drawHandler = new Cesium.ScreenSpaceEventHandler(
viewer.scene.canvas
);
_this.drawHandler.setInputAction(function (click) {
let pickedObject = viewer.scene.pick(click.position);
// 判断一下在添加点的时候给点绑定的标识在不在
// 来判断点击的是哪种类型的点，根据不同的类型显示不同的弹框
if (
pickedObject &&
pickedObject.hasOwnProperty('id') &&
pickedObject.id &&
typeof pickedObject.id == 'object' &&
pickedObject.id.hasOwnProperty('layerId') &&
pickedObject.id.layerId.indexOf('*') == -1 &&
pickedObject.id.layerId.indexOf('monitor') == -1
) {
let tempId = pickedObject.id.layerId.split('-')[1];// 截取之前拼接的标识符
let param = {
deviceId: tempId,
dataSources: pickedObject.id.dataSources || '',
};// 向后端发请求
getOneDeviceData(param).then((res) => {
if (res.code == 200 && res.message == 'success') {
let { result } = res;
if (result) {
let tempHtml = `
<div>
<div class="cesium-popup-closer" οnclick="closePop()">
<i
class="ivu-icon ivu-icon-md-close ttt"
style="color: #ffffff; font-size: 25px"
></i>
</div>
<div class="point-title">${pickedObject.id.deviceName}</div>
<div class="polygon-main">
// ...
// 这个里面写的就是你弹框中要显示的内容
// 可以先在页面上写好结构和样式然后移植过来
</div>
</div>`;
// 这里的经纬度高度一般都要和你添加的点位置一致，不然地图放大的时候可能会有偏移
let optionsw = {
position: [lng, lat],// 经纬度位置
alt: alt,// 高度
content: tempHtml,
offsetWidth: -330, // 横向偏移的像素值
offsetHeight: 490, // 纵向偏移的像素值，这两个值根据你弹框的背景来调整
id: 'opto2',
};
_this.pointMap(optionsw);
}
}
});
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},
计算弹框位置的函数
pointMap(options) {
let optionsDom = document.querySelectorAll(`.cesium-popup`);
if (optionsDom.length > 0) {
for (let i = 0; i < optionsDom.length; i++) {
optionsDom[i].remove();
}
}
let phtml =
`<div id='${options.id}' class='temp-box' >` +
options.content +
`</div>`;
var div = document.createElement('div');
div.innerHTML = phtml;
if (viewer) {
viewer.container.append(div);
}
this.addlayer(div, options.id);
if (viewer) {
viewer.scene._postRender.addEventListener(() => {
if (viewer) {
let windowCoord = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
viewer.scene,
Cesium.Cartesian3.fromDegrees(...options.position, options.alt)
);
//这里要注意，如果弹框被移出屏幕外的时候，是计算不到位置的，如果不加这句话会报错
if (!windowCoord) return;
let x = windowCoord.x - options.offsetWidth;
let y = windowCoord.y - options.offsetHeight;
div.style.cssText = `
position:absolute;
left:0;
top:0;
width:300px;
height:350px;
transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
`;
div.classList.add('cesium-popup');
}
});
}
},
添加弹框的函数
addlayer(div, id) {
if (window.layerCollection.has(id)) {
window.layerCollection.get(id).push(div);
} else {
window.layerCollection.set(id, [div]);
}
},
关闭弹框的函数
closePop() {
let optionsDom = document.querySelectorAll(`.cesium-popup`);
if (optionsDom.length > 0) {
for (let i = 0; i < optionsDom.length; i++) {
optionsDom[i].remove();
}
}
},
注意一点，这个弹框的关闭函数会在页面初始化的时候绑定到window上，不然写在原生html标签里面的函数无法触发
window.closePop = this.closePop;
