Cesium自定义气泡弹窗popup【图说GIS】

已于 2022-08-26 11:18:14 修改
阅读量5.2k 收藏 33
点赞数 3
分类专栏： Cesium 文章标签： css html react.js
于 2021-09-15 23:08:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19689967/article/details/120318901
版权

在这里插入图片描述
在线预览

写在前面

补充：于2022年1月已将其开源，欢迎大家参与共建cesium-plugin。个人微信：zpc1305780485。
下图只能凑合看，压缩的太厉害了
在这里插入图片描述

在日常的GIS应用中，气泡弹窗不可或缺，前端框架leaflet就有自己的弹窗，互联网地图都有自己的气泡弹窗，只是非常简约而已。
而Cesium也有自己的弹窗，只是这个弹窗似乎不怎么适合我们，它在右上角！不能出现在鼠标点击位置。
网上也有好多示例可参考。在借鉴了前人们的经验后，自己决定动手写一下。
用原生html+js+css、React（陆续更新）、vue方式分别实现（陆续更新），如有不合适之处，欢迎指正，欢迎交流。

实现思路

  1. 创建弹窗dom节点
  2. 通过鼠标点击的屏幕位置弹出气泡
  3. 给dom节点添加信息内容
  4. 监听地图点击位置变化，更新弹窗的屏幕坐标（2021-09-16完成）

用原生html+js+css实现

在这里插入图片描述

ONEGISER(ZPC)
关注
  • 3
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
专栏目录
Cesium点击图元带出信息气泡弹窗
m0_45305745的博客
09-25 757
实现点击下图的图标，可弹出气泡弹窗。带出此图标的信息（例如：标题，视频链接等）2.创建监听点击事件，获取点击的图元的数据。2.创建监听点击事件，获取点击的图元的数据。cesium弹窗创建下一篇继续补充整理。1.在创建图元时，将数据传入。1.在创建图元时，将数据传入。3.创建弹窗，展示数据。3.创建弹窗，展示数据。Cesium创建图元并实现点击图元带出信息气泡弹窗_cesium气泡弹窗_m0_45305745的博客-CSDN博客。在地图上加图标，并附带上信息，可看上篇。接这篇，气泡弹窗怎么带出来。
cesium 实现自定义弹窗并跟随场景移动
qq_37550440的博客
05-29 447
cesium 添加点位弹窗并跟随场景移动 完整代码演示可直接copy使用，及深入理解使用
cesium自定义的弹窗 Popup弹窗（可随球放大缩小，移动）
qq_37312180的博客
04-17 5779
cesium自定义的弹窗 Popup弹窗（可随球放大缩小，移动）
Cesium构造popup弹窗函数
qq_37121832的博客
11-10 3655
初学Cesium，发现没有自带的popup方法，从网上找资料自己写了一个，供大家参考 先上效果，样式方面大家可以自行发挥 构造函数 class Popup { constructor(info) { this.id = 0; //如果有div就移除 if (document.getElementsByClassName("bx-popup-ctn").length > 0) { document.getElementsByClassName("bx.
cesium自定义弹窗
12-20 1603
本文章是使用js写的。思路1、创建cesiumContainer容器。在script标签内添加cesiumContainer容器 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3OWQ5ZTYzZi05NThmLTRmYjctOTk1Zi01YjczMTQ0ZjZlODAiLCJpZCI6NjE0MjMsImlhdCI6MTYyNjA3MjcwMn0.t78sW9YdR2gWIB55l。
Cesium|xt3d 自定义信息框
xt3d的博客
03-03 873
Cesium|xt3d 自定义信息框效果代码预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" cont
10行代码完成cesium跟随弹窗，超简单
08-09 1383
在使用cesium开发项目的过程中，在poi位置弹窗弹窗，并使弹窗始终跟随poi点移动是一个非常常见的需求。 本文使用十行出头的核心代码制作cesium中的弹窗popup，跟随poi点移动。
基于Cesium实现自定义弹窗效果组件，弹窗样式内容可以自定义，弹窗可跟随场景自适应移动，完整demo和源代码，代码未加密/未压
03-13
基于Cesium实现自定义弹窗效果组件，弹窗样式内容可以自定义，弹窗可跟随场景自适应移动，完整demo和源代码，代码未加密/未压缩，可直接调用运行 文章描述：https://blog.csdn.net/qq_34205305/article/details/127074955 代码不易，略收小费，使用过程中如果有任何问题欢迎在文章下进行评论或者私信，百分百回复哦
【Cesium】点击billboard弹出自定义气泡框
心生的小鱼专栏
06-04 3480
点击billboard图标，弹出自定义气泡框，并且在缩放、移动地图时保持气泡框和图标的相对位置不变
Cesium源码分享--气泡窗
资深三维GIS开发
05-19 1198
Cesium和我们平时常见的leaflet、ol以及arcgis api是不一样的，其没有内置的气泡窗，那么就得靠我们手写气泡窗来实现了。ps：如果可以的话，希望大家能给我个star，好让我有更新下去的动力；本插件样式是参考了leaflet来写的。
cesium动态变化弹出框
01-15
cesium中点击拾取坐标，在弹出框中显示。 弹出框位置自动变化。
cesium弹窗 popup
03-01
"cesium弹窗 popup"这个话题主要关注的是如何在Cesium环境中创建和使用信息窗口，即popup，来展示关于地图上的特定位置或对象的详细信息。 首先，让我们理解什么是popup。在地图应用中，popup（通常称为信息窗口或...
CesiumPopup:Cesium弹窗功能（丑了点）
05-11
CesiumPopup是Cesium库中的一个组件，它提供了在三维场景中显示信息弹窗的功能。尽管标题提到“丑了点”，这可能指的是默认的样式可能不符合所有用户的审美，但CesiumPopup的可定制性使其可以根据需求进行调整。 ##...
Cesium气泡信息提示框
01-16
Cesium气泡信息提示框，在地图上点击一个点图标，弹出一个信息提示框，可以跟随图表一起移动。
cesium之自定义气泡窗口infoWindow后续优化篇.zip
最新发布
06-19
这个压缩包文件“cesium之自定义气泡窗口infoWindow后续优化篇.zip”很可能包含了一系列教程或代码示例，专注于如何进一步优化Cesium中的InfoWindow，以提供更佳的用户体验和视觉效果。 在Cesium中，默认的...
（转载）cesium的气泡弹窗，已实现
群来群往的博客
10-15 1万+
最近在做cesium的气泡弹窗，找到作者：zlx312 原文：https://blog.csdn.net/zlx312/article/details/79824940?utm_source=copy 写的比较好的博客，并按照教程实现了，在此感谢并转载记录以后备用！ （在借鉴过程中出现两个问题，通过查询资料解决了，主要由以下三点， （1）因为刚开始做地图，刚开始找不到scene是哪里定义的，后...
Cesium实现Popup弹窗功能
热门推荐
u012632557的博客
03-30 1万+
先展示一下效果，大家可以通过修改样式文件，整点更好看的弹窗。我的审美一直是被吐槽的。。 方法创建 这里创建了Popup构造函数，用于创建Popup对象，并对对象内部的逻辑方法进行封装。实现的方法是在Cesium创建的View对象内动态添加一个弹窗元素，通过不断获取Popup弹窗绑定的空间坐标，然后转换成页面相对坐标来修改弹窗的位置。 // 创建弹窗对象的方法 var Popu...
cesium学习笔记（问题记录）——（三）
CheryW的博客
12-18 1583
cesium学习记录（三）
cesium自定义的弹窗 Popup弹窗
09-20
Cesium自定义的弹窗是通过在场景中创建一个弹窗组件实现的。该组件可以自定义弹窗的样式和内容，并且可以跟随场景自适应移动。您可以使用提供的完整demo和源代码来实现这个弹窗效果，代码没有加密或压缩，可以直接调用运行。 通过修改点击事件的代码，您可以实现点击时显示弹窗，点击空白处时删除弹窗。具体步骤如下： 1. 创建一个Cesium.ScreenSpaceEventHandler对象，并将当前的viewer对象传入。 2. 在handler中添加一个输入操作，当LEFT_CLICK事件发生时执行相应的操作。 3. 使用Cesium.Scene的pick方法获取当前点击位置的pick对象。 4. 判断pick对象是否存在，并且id属性是否存在。 5. 如果pick对象和id属性存在，则根据id获取相应的实体，然后使用弹窗组件添加动态标签。 6. 否则，清除弹窗组件中的内容。 请注意，这只是实现自定义弹窗的其中一种方法，请根据您的具体需求进行相应的修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值