bd_group
/
gd-earth
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

master
qubiaobiao 2024-03-04 17:32:14 +08:00
parent f003baa36d
commit 5820c08ed4
2 changed files with 9 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/LandMarkShow.vue
View File

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

7
src/components/Pin.vue
View File

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