セシウムプロジェクトでは、シーンのエンティティをマウスでクリックして、プロンプトボックスの情報をポップアップ表示します。これは、最も基本的なプロジェクト要件です。シーンの動きに合わせてプロンプトボックスを変更する場合でも、少し難しいので、ユーザーエクスペリエンスが向上します。
1.実現のアイデア
現在の座標点を取得してプロンプトボックスをポップアップし、プロンプトボックスの位置を動的に更新するという2つのステップでプロセス全体を実装する必要があります。
1.現在の座標を取得します。最初に、クリックイベントをシーンに登録して、エンティティを取得するためにクリックする必要があります。エンティティを追加するときにidまたはname属性を設定して、プロンプトボックスをポップアップする必要があるエンティティを識別します。 viewer.scene.cartesianToCanvasCoordinatesメソッドを使用して画面座標を取得します。このメソッドは、3次元のデカルト座標を受け取り、画面座標を返します。（注：画面座標は、ビューアーコンテナーの値を基準にしています）。
2.動的に座標を更新する：ここでは、シーンのすべてのフレームを監視する必要があります。viewer.scene.postRender.addEventListenerを介して監視できます（注：対応するシーンの各フレームを監視するコストは比較的大きいため、コードはできるだけシンプルです。たとえば、プロンプトボックスが表示されるタイミングを監視します）
第二に、ソースコードの実装
var trackPop = undefined; //记录鼠标捕获实体的坐标
//添加单击监听事件
handler.setInputAction(function(movement) {
var pick = viewer.scene.pick(movement.position);
if (Cesium.defined(pick) && pick.id && pick.id.name == "落雷") {
console.log(pick.id);
var bubble = document.getElementById("popover_span");
//设置弹出框位置
var winpos = viewer.scene.cartesianToCanvasCoordinates(
pick.id.position._value
);
bubble.style.left = winpos.x + 20 + "px";
bubble.style.top = winpos.y + 50 + "px";
that.luolei_value = true;
that.luolei_content = [];
that.luolei_content.push({ label: "名称", value: "落雷点" });
that.luolei_content.push({
label: "x坐标",
value: bubble.style.left
});
that.luolei_content.push({
label: "y坐标",
value: bubble.style.top
});
trackPop = pick.id.position._value;
} else {
that.luolei_value = false;
trackPop = undefined;
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//每帧渲染结束监听
viewer.scene.postRender.addEventListener(function(e) {
if (that.luolei_value && trackPop) {
var winpos = viewer.scene.cartesianToCanvasCoordinates(
trackPop
);
var bubble = document.getElementsByClassName("el-popover")[0];
var poph = bubble.offsetHeight;
bubble.style.left = winpos.x + 20 + "px";
bubble.style.top = winpos.y + 50 - poph + "px";
}
});3、レンダリングの実現
4つ以上
ここで説明するポイントがあります。私のポップアップスタイルでは、elemeUIのPopoverポップアップボックスコンポーネントを使用しています。目的は、下の逆三角形を実現することです。図を見るとわかりますが、全体的な効果には影響しません。
それでも分からない場合は
それでもセシウムと通信する必要がある場合は、
一緒に勉強して話し合いましょう。
私たちの拠点に参加できます。拠点の住所は450342630（QQグループ番号）です。