68 lines
2.6 KiB
JavaScript
68 lines
2.6 KiB
JavaScript
|
class Bubble {
|
|||
|
|
constructor(val) {
|
|||
|
|
this.viewer = val.viewer;
|
|||
|
|
this.div = document.createElement("div");
|
|||
|
|
}
|
|||
|
|
addDynamicLabel(data,cartesian3) {
|
|||
|
|
let div = this.div;
|
|||
|
|
div.id = data.id;
|
|||
|
|
// div.style.display="inline"
|
|||
|
|
div.style.position = "absolute";
|
|||
|
|
div.style.minWidth = "380px";
|
|||
|
|
div.style.height = "auto";
|
|||
|
|
let keys = Object.keys(data);
|
|||
|
|
// 构建属性面板
|
|||
|
|
let HTMLTable = `
|
|||
|
|
<div class="bubble-box">
|
|||
|
|
|
|||
|
|
<div class="box-wrap" id="bubbleContent">
|
|||
|
|
<div class="pine"></div>
|
|||
|
|
<div class="bubble-close" id="popupClose">x</div>
|
|||
|
|
<div class="area">
|
|||
|
|
<div class="area-title fontColor">${ data['name']?data['name']:data['名称'] }</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content" >
|
|||
|
|
${keys.map(item=>{
|
|||
|
|
return `<div class="data-li">
|
|||
|
|
<div class="data-label textColor">${item}：</div>
|
|||
|
|
<div class="data-value">
|
|||
|
|
<span class="label-num yellowColor">${data[item]}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>`
|
|||
|
|
}).join('')}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- <img src="./layer_border.png" alt="Norway"> -->
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
div.innerHTML = HTMLTable;
|
|||
|
|
this.viewer.cesiumWidget.container.appendChild(div);
|
|||
|
|
document
|
|||
|
|
.getElementById("popupClose")
|
|||
|
|
.addEventListener("click", () => {
|
|||
|
|
this.clearDiv();
|
|||
|
|
});
|
|||
|
|
let gisPosition = cartesian3;
|
|||
|
|
this.handler = this.viewer.scene.postRender.addEventListener(() => {
|
|||
|
|
const canvasHeight = this.viewer.scene.canvas.height;
|
|||
|
|
const windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
|||
|
|
this.viewer.scene,
|
|||
|
|
gisPosition
|
|||
|
|
);
|
|||
|
|
let content = document.getElementById("bubbleContent");
|
|||
|
|
let height = content?content.clientHeight:220;
|
|||
|
|
div.style.bottom = canvasHeight - windowPosition.y + height + Math.sin(Math.PI/180*45)*60+ "px";
|
|||
|
|
const elWidth = div.offsetWidth;
|
|||
|
|
div.style.left = windowPosition.x - elWidth / 2 + 190 + "px";
|
|||
|
|
}, this);
|
|||
|
|
}
|
|||
|
|
clearDiv() {
|
|||
|
|
if (this.div && this.div.parentElement) {
|
|||
|
|
var parent = this.div.parentElement;
|
|||
|
|
parent.removeChild(this.div);
|
|||
|
|
this.handler&&this.handler();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
export default Bubble;
|