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

最新推荐文章于 2024-08-16 16:07:01 发布

xt3d

最新推荐文章于 2024-08-16 16:07:01 发布

阅读量5.5k

点赞数 3

文章标签： js vue gis webgl

本文链接：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的宽度 
//不限字段数量

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xt3d

关注关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

cesium 信息框 infowindow

苹果园dog

01-27

1350

1 2 3 4 5 6 7 8 9 10 11 12 13 14 if(pick.id.name === _entityNames.dikuai) { content ='<div>'+ entityDatainfo.title_num +'</div><table ...

Cesium气泡信息提示框

01-16

Cesium气泡信息提示框，在地图上点击一个点图标，弹出一个信息提示框，可以跟随图表一起移动。

3 条评论您还未登录，请先登录后发表或查看评论

[cesium] | 自定义个性化气泡框

啊嘞嘞的博客

10-14

1723

效果支持自定义css样式创建 `<div> <div style="width: 200px; height: 150px; border: 1px solid #fff; border-radius: 5px; background: #1a90c587; color:.

cesium中加自定义点位标签，以及页面刷新

最新发布

weixin_60172238的博客

08-16

323

cesium中加自定义点位标签，以及页面刷新

cesium自定义弹框

梦寻汝的博客

07-01

355

/ 开启地形深度检测。时只能在3DTile上获取准确位置，当depthTestAgainstTerrain =在加载地形的情况下有一定误差，地形凹凸程度越大，误差越大。在depthTestAgainstTerrain =时，在3DTile和底图上均能获取准确位置。

Cesium深入浅出之信息弹框

Helsing的专栏

11-20

5093

引子信息弹框种类有很多，今天我们要说的是那种可以钉在地图上的信息框，它具备一个地图坐标，可以跟随地图移动，超出地图范围会被隐藏，让人感觉它是地图场景中的一部分。不过它还不是真正的地图元素，它还只是个网页元素而已，也就是说它始终是朝向屏幕平面的，而不是那种三维广告板的效果，那种效果或许后续会做吧。预期效果这个效果其实是动态的，从底部到顶部逐渐显现，不过GIF图比较大就没上传了，看看最终的效果吧。实现原理原理真的很简单，一句话可以描述，就是实时同步笛卡尔坐标（地图坐标）和画布（canva

cesium自定义弹窗

weixin_42274795的博客

02-21

9110

本文章是使用js写的。思路 1、创建cesiumContainer容器。在script标签内添加cesiumContainer容器 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3OWQ5ZTYzZi05NThmLTRmYjctOTk1Zi01YjczMTQ0ZjZlODAiLCJpZCI6NjE0MjMsImlhdCI6MTYyNjA3MjcwMn0.t78sW9YdR2gWIB55l

cesium动态变化弹出框

01-15

cesium中点击拾取坐标，在弹出框中显示。弹出框位置自动变化。

Cesium实战专栏14.自定义html标注图层

xt3d的博客

11-04

3197

Cesium实战专栏14.自定义html标注图层前言实现效果实现思路关键代码前言在Cesium中可以通过entity的Lebel属性来实现文本标注的功能，但是原始的标注功能样式往往达不到我们想要的效果，比如我们需要像html元素那样可以通过css来自由的设置样式。我们可以通过自定义html标注的方式来实现可以自由定义样式的标注功能。实现效果实现思路 自定义html标注图层功能与自定义气泡弹框功能思路相似，通过笛卡尔坐标转为屏幕坐标，实时更新DOM元素的坐标使其保持正确的位置即可。关键代码 /

Cesium实战专栏01.Cesium点线面实体绘制

xt3d的博客

09-09

2444

这里写自定义目录标题前言鼠标交互绘制实体的思路实体绘制类封装使用实体绘制类前言在Cesium项目中，点线面实体对象的绘制是很常用，也是很基本的一个功能，Cesium中提供了Entity类来构建点线面实体，能够通过点串数据用代码构建点线面，但是并没有提供鼠标交互绘制的类，只能自己进行一些简单的封装。鼠标交互绘制实体的思路在Cesium中，虽然没有提供鼠标交互绘制的相关类，但是我们可以通过监听鼠标点击事件，获取点击点坐标串，这样就能够实现鼠标交互绘制的功能。Cesium中的ScreenSpaceEven

弹出信息框

12-17

在firefox下正常，ie下不行

46.（cesium篇）cesium实现信息提示tooltip.zip

09-16

下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/120328479

自定义图标工具栏

10-12

自定义图标工具栏

Cesium实战专栏07.Cesium动态线、流动线

xt3d的博客

09-20

7478

前言 Cesium中对于线样式的设置已经提供了很多种材质（如箭头线、虚线、发光线、边框线等）以供选择，但是在项目开发中，这些材质往往不能满足需求。在某个项目中就需要能够模拟水流、能量等流动的效果，在火星科技上面就找到了一个比较满足需求的效果，无奈源码不是开源的，只能参考着效果做。效果图实现思路通过自定义材质类的方式来实现关键代码 // 自定义材质类 function PolylineTrailLinkMaterialProperty(color, duration) { this._def

Cesium实战专栏11.gltf模型标绘

xt3d的博客

10-20

1475

这里写自定义目录标题前言效果图实现思路绘制类封装绘制类使用前言在cesium中gltf模型非常重要，可以用来展现各种各样的三维元素，比如人、车、树等等。我们可以用代码来构建gltf模型，但是在真正的项目中往往需要鼠标交互的方式来添加模型，所以我们需要封装鼠标交互的一个工具来实现模型的添加，这样便于用户使用。效果图实现思路在cesium中我们添加一个gltf模型只需要模型文件和坐标点，所以我们需要的是封装一个工具来获取用户输入的点坐标，在Cesium中通过ScreenSpaceEventHandl

Cesium.js实现显示点位对应的自定义信息弹窗（数据面板）

@Fonden

01-28

3299

首先，获取当前选择的实体（例如点位或图标）在 Cesium 世界坐标系中的位置；现在需要在利用Cesium.js来实现三维地图中，点位的信息弹窗的展示。实现该功能，需要将Cesium世界坐标转为屏幕坐标，进而更新弹窗的位置。第一种：鼠标点击图标显示信息弹窗，点击其他地方隐藏信息弹窗；第二种：鼠标移入图标显示信息弹窗，鼠标移出图标隐藏信息弹窗；然后，将 3D 世界中的点位转换为 2D 屏幕上的像素位置；实现添加点位，并在点位附近显示对应的信息弹窗。最后，将弹窗的位置设置为计算出的屏幕坐标。

Cesium对三维模型进行查询并弹框展示信息

苹果园dog

09-18

1069

三维模型查询

Cesium自定义气泡窗口

zhezhao12的博客

08-02

2617

欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会带来全新的写作体...

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`实例。