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; |