CesiumViewer 中的响应式 DIV [CesiumJS]

2023-12-31

我正在定制一个 Cesium 地图,它有一个覆盖层,里面有各种信息,我用 bootsrap 实现的覆盖层的样式,不幸的是我放置的 div 保留在特定位置并忽略页面大小的调整。有没有办法让添加到铯查看器的 DIV 响应?

我现在做的是

    var position = Cesium.Cartesian3.fromDegrees(-76.59777, 39.03883);
    var scratch = new Cesium.Cartesian2();
    
    var canvasPosition = viewer.scene.cartesianToCanvasCoordinates(position, scratch);
    
    viewer.scene.preRender.addEventListener(function () {
        if (Cesium.defined(canvasPosition)) {
            
            htmlOverlayBoxInfo.style.left = '600px';
            htmlOverlayBoxInfo.style.top = '180px';
            
        }
    });
<div id="box-info" style="position: absolute" class="circles push-50 visibility">

            <div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn">
                <span class="circle circle-0"></span>
            </div>
            <div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn" data-timeout="100">
                <span class="circle circle-1"></span>
            </div>
            <div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn" data-timeout="200">
                <span class="circle circle-2"></span>
            </div>
            <div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn" data-timeout="300">
                <span class="circle circle-3"></span>
            </div>
            <div class="visibility-hidden " data-toggle="appear" data-class="animated fadeIn" data-timeout="400">
                <span class="circle circle-4"></span>
            </div>
            <div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn" data-timeout="500">
                <span class="circle circle-5"></span>
            </div>
            <div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn" data-timeout="600">
                <span class="circle circle-6"></span>
            </div>

            <span class="circle circles-main-content visibility-hidden" data-toggle="appear"
                  data-class="animated fadeIn" data-timeout="100">
                <h4>
                    New </h4>

                             </span>
        </div>

我被迫放置 [style="position:absolute"] 否则我需要覆盖地图的 div 根本不会显示。我究竟做错了什么?


我将使用 Reactjs 来解决所有数据呈现的问题。扩展一下:https://www.npmjs.com/package/cesium-react https://www.npmjs.com/package/cesium-react

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CesiumViewer 中的响应式 DIV [CesiumJS] 的相关文章

  • 暂停除了已激活的玩家之外的所有其他玩家。

    我有这个插件 它可以将不同的样式应用于 html5
  • 如何隐藏div元素中太长的文本?

    如何隐藏 div 中的溢出 如果文本比 div 长 则文本将换行到新行 div style width 50px border 1px solid black test test test test div 也许是 CSS 属性text o
  • ajaxChosen 插件将无法工作

    我整个下午都在摆弄 ajaxChosen 因为我喜欢 Chosen 但我的选项值集变得太大了 我也尝试过 select2 但它太慢了 http harvesthq github io chosen http harvesthq github
  • @media语法/可能的组合

    我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • 带有淘汰赛js的隐形recaptcha

    我正在完成隐形验证码 但我在实现它时遇到问题 谷歌开发人员页面中的代码显示它应该是这样的
  • 最大宽度调整以适应文本?

    不是最好的标题 但无论如何 我有一个元素max width和一些文字 如果文本长度超过一行所能容纳的长度 我会得到以下结果 My text here hello everyone 换句话说 它占据了完整的最大宽度 但由于单词向下移动 右侧有
  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我
  • Angular - CSS - 自定义类型=文件输入,如何使用按钮而不是标签?

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了
  • 为什么 IE8 在我的图像锚标记上添加底部边框?

    我知道 这很可悲 但今天早上 IT 刚刚在我的机器上安装了 IE8 我立刻遇到了一个明显的问题 尽管我知道答案就在我面前 但我已经把它搞砸了太久了 首先 这是网站 www mchenry edu http www mchenry edu 在
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • Jquery一键提交多个同名表单

    我有动态创建的循环表单 我需要一键提交所有表单 我正在遵循下面的代码 你能建议我怎么做吗 谢谢
  • CSS3 信封形状

    正如您可能已经猜到的 该图像是邮件信封形状的一部分 如果可能的话 我想使用 CSS3 创建该形状 我已经制作了其他部分 但这个很棘手 该形状需要两侧都有三角形切口和圆角 大概是 border radius bottom left borde
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • 在 CKEditor 中设置字体大小和字体系列

    我正在使用 ckeditor 我想问一下这个插件如何设置font family和font size 我尝试过使用 CKEDITOR config font defaultLabel Arial CKEDITOR config fontSiz
  • Jquery - 选择选项后如何获取选项的特定数据类型?

    我将直接跳到标记 然后解释我想要做什么 HTML 选择选项

随机推荐

  • C# OpenGL字体显示

    我正在Windows中使用Tao框架开发2D CAD应用程序 我想使用 Windows 库中的字体来显示绘图信息 除此之外 我想旋转缩放我的文本 对于位图字体我无法做到这一点 我进行了 OpenGL 字体调查 http www opengl
  • SQL-合并两个具有不同日期值的表

    我正在开发一个在网站上显示股票信息的项目 我想问一下如何在SQL中合并两个表 假设我们有表1 stock id date p high p low 3 2013 02 26 100 80 3 2013 02 25 100 80 3 2013
  • 如何使用python获取一列数据中包含的特定行的时间差

    这里我有一个包含时间和三个输入的数据集 这里我用panda来计算时差 代码是 data Time different pd to timedelta data time astype str diff 1 dt total seconds
  • 为什么要创建“隐式解包选项”,因为这意味着您知道有一个值?

    为什么要创建 隐式解包可选 而不是仅创建常规变量或常量 如果您知道它可以成功解包 那么为什么首先要创建一个可选呢 例如 这是为什么 let someString String this is the string 将比以下更有用 let s
  • 代码高尔夫:井字棋

    Locked 这个问题及其答案是locked help locked posts因为这个问题是题外话 但却具有历史意义 目前不接受新的答案或互动 按字符数发布您的最短代码 以检查玩家是否获胜 如果获胜 是哪一个 假设变量中有一个整数数组b
  • 重命名 ASP.NET Identity 表时出现重复的外键

    我遵循了以下建议这个问题 https stackoverflow com questions 19460386 how can i change the table names when using visual studio 2013 a
  • 参数包扩展的“模式”定义,尤其是在函数调用中

    据我了解 当包含参数包的模式右侧出现省略号 时 该模式将为包中的每个参数扩展一次 然而 尽管我能够找到模式及其扩展的孤立示例 但我无法找到模式构成的定义 据我所知 空格在模式的定义中不起任何作用 但括号却起作用 例如 在这个例子中 temp
  • 在 sbt 控制台上运行 Spark

    我是 Spark 新手 正在尝试在 sbt 控制台上运行它 我有一个合适的build sbt 因为代码在 Intellij 上运行良好 并且能够导入代码中的包 问题是 当在 sbt 控制台 终端 上运行时 执行器只是保持运行并且无法完成任务
  • android 阿拉伯语十进制格式,符号位于数字右侧

    我正在尝试支持左语言的 RTL 并且正在使用阿拉伯语进行测试 我对此一无所知 负号 正号应该位于数字的右侧还是左侧 我认为它应该在左侧 但是当我使用 Android 的 DecimalFormat 将数字放入设备设置的区域设置时 该符号出现
  • 候选者的 UITableView 类型不匹配?

    Xcode 说 候选者的 UITableView 类型不匹配 有人知道如何解决这个问题吗 func tableView tableView UITableView numberOfRowsInSection section Int gt I
  • C++ 11 代码可以使用 `clang++` 进行编译,但不能使用 `clang -x c++` 进行编译

    基本问题 我有以下代码 include
  • Android SQLite删除行问题

    我正在尝试从表中删除一行 但我有三个 WHERE 子句 并且不确定我是否使用了正确的语句 db delete DBAdapter TableName Id Id AND WHERE QstnrId Integer parseInt Ques
  • 使用 github 操作创建拉取请求

    我试图让它发挥作用 但我也很困惑 在触发彼得埃文斯公关之前 它之间缺少什么 这个场景非常简单 我喜欢在任何 feature 分支上推送 自动创建 PR 但相反 我遇到了奇怪的场景 其中开发更改应用于 feature 分支之上 有人可以给我提
  • 为什么使用 webflux 进行 Spring Boot 测试会忽略自定义 Jackson 模块

    我正在使用 Spring Boot 2 0 1 和 WebFlux 路由器功能编写一个应用程序 not基于注释 对于我的一些数据对象 我编写了扩展的自定义序列化器StdSerializer 这些我注册在SimpleModule并将该模块公开
  • 隐藏溢出时检测用户滚动尝试

    scroll 当内容为overflow hidden wheel 滚轮鼠标会触发 但鼠标不会触发魔术触控板 http www apple com shop product MC380LL A magic trackpad or 魔术鼠标 h
  • SQL - 检查列是否自动递增

    我正在尝试运行查询来检查列是否自动递增 我可以检查类型 默认值 是否可为空等 但我不知道如何测试它是否自动递增 这是我测试其他事情的方法 SELECT FROM INFORMATION SCHEMA COLUMNS WHERE TABLE
  • InfluxDB - 仅获取查询中的最后一个值

    是否可以只查询查询结果的最后一个值 或第n个值 例如 在查询中 SELECT value FROM response times WHERE time gt now 1h limit 1000 是否有可能只获取最后一个值 即时间上更早的值
  • Django 管理表单 - 如何动态更改选择选项?

    我有 2 个型号 class City models Model name models CharField max length 50 slug models SlugField max length 50 class CityNews
  • 批处理文件中括号内的转义括号

    这就是我正在尝试做的 echo This is some code that is echo Important to echo exactly as is echo Even if I use parenthesis echo for s
  • CesiumViewer 中的响应式 DIV [CesiumJS]

    我正在定制一个 Cesium 地图 它有一个覆盖层 里面有各种信息 我用 bootsrap 实现的覆盖层的样式 不幸的是我放置的 div 保留在特定位置并忽略页面大小的调整 有没有办法让添加到铯查看器的 DIV 响应 我现在做的是 var