Cesium实战专栏04.Cesium自定义信息框

最新推荐文章于 2024-08-21 18:27:46 发布
最新推荐文章于 2024-08-21 18:27:46 发布
阅读量5.5k 收藏 15
点赞数 3
文章标签： js vue gis webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xietao20/article/details/108542712
版权
Cesium实战 专栏收录该内容
20 篇文章 157 订阅 ¥99.90 ¥299.90
订阅专栏
本文档介绍了在Cesium中如何自定义信息框，以解决Cesium自带信息窗口不美观且不随场景移动的问题。通过地理坐标转屏幕坐标，实现在地图场景更新时信息框动态跟随。主要内容包括信息窗口的实现思路、主要代码展示以及信息窗口类的使用方法。
摘要由CSDN通过智能技术生成

前言

做过webgis开发的兄弟应该都用过openlayers、leaflet、百度地图api等地图开发库，都知道在地图中显示信息一般使用的都是气泡弹框的形式，使用气泡弹框的好处就是弹框能够跟着地图移动，能够将需要展示的信息紧密地与地图点位相关联，用户体验比较好。在Cesium中展示属性信息通过可以使用气泡窗口的方式来进行展示，但是Cesium自带的信息窗口比较难看，并且不会跟随场景移动，所以只能自己进行气泡窗口的扩展开发。

效果图

在这里插入图片描述

信息窗口的实现思路

信息窗口主要是能够跟随场景进行移动，通过地理坐标点转为屏幕坐标，场景更新时重新转换设置给信息框。

主要代码

信息窗口类封装

// 多字段自动适配窗口
//根据字段字符段长度设置label的宽度 
//不限字段数量
了解本专栏 订阅专栏 解锁全文
xt3d
关注
专栏目录
订阅专栏
Cesium气泡信息提示框
01-16
Cesium气泡信息提示框，在地图上点击一个点图标，弹出一个信息提示框，可以跟随图表一起移动。
[cesium] | 自定义个性化气泡框
啊嘞嘞的博客
10-14 1725
效果 支持自定义css样式创建 `<div> <div style="width: 200px; height: 150px; border: 1px solid #fff; border-radius: 5px; background: #1a90c587; color:.
cesium 实现批量divpoint气泡，及气泡碰撞测试与自动避让
最新发布
喜大普奔
08-21 321
需要实现一个上百点批量同时存在的 popup 弹框，为了提高用户体验。 1.重叠的弹框，需要隐藏下一层级的 popup。 2.为了让用户尽可能看到较全的弹框，需要做弹框的自动避让。
46.（cesium篇）cesium实现信息提示tooltip.zip
09-16
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/120328479
在CESIUM中增加自定义气泡或弹窗提示信息可随三维场景移动（思路解析加源码）【已实现】
weixin_44995829的博客
02-27 3220
在CESIUM中增加自定义气泡或弹窗提示信息可随三维场景移动（思路解析加源码）【已实现】
cesium自定义弹窗
weixin_42274795的博客
02-21 9122
本文章是使用js写的。 思路 1、创建cesiumContainer容器。 在script标签内添加cesiumContainer容器 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3OWQ5ZTYzZi05NThmLTRmYjctOTk1Zi01YjczMTQ0ZjZlODAiLCJpZCI6NjE0MjMsImlhdCI6MTYyNjA3MjcwMn0.t78sW9YdR2gWIB55l
Cesium.js实现显示点位对应的自定义信息弹窗（数据面板）
@Fonden
01-28 3331
首先，获取当前选择的实体（例如点位或图标）在 Cesium 世界坐标系中的位置；现在需要在利用Cesium.js来实现三维地图中，点位的信息弹窗的展示。实现该功能，需要将Cesium世界坐标转为屏幕坐标，进而更新弹窗的位置。第一种：鼠标点击图标显示信息弹窗，点击其他地方隐藏信息弹窗；第二种：鼠标移入图标显示信息弹窗，鼠标移出图标隐藏信息弹窗；然后，将 3D 世界中的点位转换为 2D 屏幕上的像素位置；实现添加点位，并在点位附近显示对应的信息弹窗。最后，将弹窗的位置设置为计算出的屏幕坐标。
cesium自定义的弹窗 Popup弹窗（可随球放大缩小，移动）
qq_37312180的博客
04-17 6277
cesium自定义的弹窗 Popup弹窗（可随球放大缩小，移动）
45.（cesium篇）cesium加载自定义html.zip
06-09
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“45.（cesium篇）cesium加载自定义html”。如下载有问题，可联系博主。 解压密码：cesium
Cesium多边形自定义编辑工具CesiumEditPolygon.js
12-13
vue+Cesium多边形自定义编辑工具CesiumEditPolygon.js。可自定义配置相关点面的颜色和大小。
Cesium Terrain Builder layer.json
03-03
通过Cesium Terrain Builder生成文件后，需要使用到的layer.json，直接复制到生成文件夹中就可以了，可以使用
89.（cesium篇）cesium聚合图（自定义图片）.rar
06-29
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“89.（cesium篇）cesium聚合图（自定义图片）”。如下载有问题，可联系博主。 解压密码：cesium
Cesium深入浅出之信息弹框
Helsing的专栏
11-20 5125
引子 信息弹框种类有很多，今天我们要说的是那种可以钉在地图上的信息框，它具备一个地图坐标，可以跟随地图移动，超出地图范围会被隐藏，让人感觉它是地图场景中的一部分。不过它还不是真正的地图元素，它还只是个网页元素而已，也就是说它始终是朝向屏幕平面的，而不是那种三维广告板的效果，那种效果或许后续会做吧。 预期效果 这个效果其实是动态的，从底部到顶部逐渐显现，不过GIF图比较大就没上传了，看看最终的效果吧。 实现原理 原理真的很简单，一句话可以描述，就是实时同步笛卡尔坐标（地图坐标）和画布（canva
Cesium popup窗、气泡窗、提示窗插件
资深三维GIS开发
02-29 8427
首先向关注我的各位小伙伴说一声对不起，好久没有更新csdn了，最近因为自己也在看opengl的一些学习资料和Cesium的源码，所以耽搁了，在此也向对小伙伴们说一声对不起。 最近群里也好，还是网上，经常有人找到我问我Cesium的气泡窗怎么写，我自己也在之前的文章中解释了下原理（地址：https://blog.csdn.net/caozl1132/article/details/86065333...
Cesium自定义气泡窗口
zhezhao12的博客
08-02 2618
欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体...
cesium自定义label样式
tutouxiaoyaonie的博客
10-13 9502
cesium自定义label样式
cesium三维样式
samHuangLiang的博客
07-26 702
cesium三维样式
cesium动态绘制矩形带边框
m0_48353529的博客
02-03 2619
动态绘制矩形，矩形的边框宽度设置，矩形边框虚线设置
Cesium.Cartesian3.normalize
06-08
在Cesium.js中，`Cesium.Cartesian3.normalize`是一个静态方法，用于归一化给定的三维Cartesian坐标向量（x, y, z）。归一化意味着将向量的长度缩放为1，但保持其方向不变。这是为了确保向量表示的是单位方向，这对于许多3D计算和图形应用来说非常有用，比如在空间中的方向表示、向量操作，或是确保光照强度的正确计算。 `Cesium.Cartesian3.normalize(position, result)` 方法接受两个参数： 1. `position`：一个表示三维坐标 (`x`, `y`, `z`) 的`Cartesian3`实例。 2. `result`：可选的`Cartesian3`对象，用于存放归一化后的结果；如果不提供，将会在原地修改`position`。 返回值是归一化后的`Cartesian3`实例。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xt3d

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值