新增点击地点标点,弹出地点信息弹窗功能

This commit is contained in:
2024-03-04 17:32:14 +08:00
parent f003baa36d
commit 5820c08ed4
2 changed files with 9 additions and 0 deletions

View File

@@ -47,11 +47,13 @@ const nowImg = ref();
const judgmentUp = ref("dispaly:block;");
const judgmentDown = ref("dispaly:none;");
//文本内容自适应照片宽度
const adaptive = (imgId) => {
let newImg;
setTimeout(() => {
newImg = document.getElementById(imgId);
}, 10);
//程序执行需要时间
setTimeout(() => {
let newWidth = window.getComputedStyle(newImg, null)["width"];
let newMargin = window.getComputedStyle(newImg, null).marginLeft;

View File

@@ -53,6 +53,7 @@ let Cesium = null,
viewer = null,
handler = null;
//标点动画
const animetion = () => {
setInterval(() => {
if (0.5 <= jump.value < 1.1 && jumpSwitch.value) {
@@ -106,6 +107,7 @@ const insetLand = () => {
});
}
//清除事件监听
const clearDiv = (id) => {
viewer.scene.postRender.removeEventListener(addDynamicLabel);
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
@@ -121,6 +123,7 @@ const addDynamicLabel = (data) => {
LandMarkWindow.windowShow = true;
LandMarkWindow.hiddenWindow = false;
let gisPosition = data.position._value;
//cesium 渲染事件监听
viewer.scene.postRender.addEventListener(() => {
const canvasHeight = viewer.scene.canvas.height;
const windowPosition = new Cesium.Cartesian2();
@@ -133,6 +136,7 @@ const addDynamicLabel = (data) => {
const elWidth = 300;
let showBottom = canvasHeight - windowPosition.y + 240 + "px";
let showLeft = windowPosition.x - elWidth / 2 + "px";
//使弹窗跟随标点移动
LandMarkWindow.windowPosition.bottom = showBottom;
LandMarkWindow.windowPosition.left = showLeft;
const camerPosition = viewer.camera.position;
@@ -153,6 +157,7 @@ const addDynamicLabel = (data) => {
});
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function (movement) {
//点击空白处触发
LandMarkWindow.windowShow = false;
LandMarkWindow.hiddenWindow = true;
clearDiv();
@@ -175,8 +180,10 @@ watch(() => LandMarkWindow.flyToLand, (newValue, oldValue) => {
const clickPin = () => {
if (props.pintype == "landmark") {
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
//cesium 监听鼠标事件
handler.setInputAction(function (movement) {
let pick = viewer.scene.pick(movement.position);
//点击标点时触发
if (Cesium.defined(pick) && pick.id.id) {
let id = pick.id.id;
let entiy = viewer.entities.getById(id);