问题标签 [webgl-globe]

我需要像这样制作一个 WebGL Globe： https ://trends.google.com/trends/zeitgeist/2013/globe#frame=314

我已经开始使用这个例子： http: //foreverbell.github.io/steps/

让我解释一下我正在尝试做的项目的细节：

我需要一个网站，可以是一个 Wordpress 来管理数据（会员可以输入描述、url 等数据，以便在全球范围内表示）。该网站的上方有一个菜单，下方是 webGL 中的地球仪，然后是新闻和活动部分、赞助商图片库和页脚。

地球将显示代表成员从数据管理器输入的数据的点。单击它们时，信息面板（div 弹出窗口）将显示所选成员的数据和链接。

网络必须有一个搜索引擎来按成员或部门搜索，当一个成员被选中时，地球会旋转到该成员的位置。

成员必须有标题、描述、地址和社交网络链接，以及点击时在地球面板中显示的照片库。

我制作了一个 php 表单以将成员信息插入数据库，然后同一个 PHP 文件更新 JSON 文件，该文件具有地球上显示的点的信息（纬度/经度），由示例的 javascript 文件读取。

我需要显示一个弹出窗口，但我不知道该怎么做，因为在我之前展示的示例中打开窗口的脚本是 javascript，它由主 Web 加载。

我不知道如何从 DB 中读取，获取点击点的 de ID 并将信息传递到具有 webgl 地球的主网络，或者我如何只传递 ID 和地球使用 javascript 从 DB 获取信息... ：/

我需要从 json 或类似文件中获取数据，并且可以单击每个点来显示信息。

我还需要捕获单击围绕地球旋转的对象的事件并显示相同的信息面板，并且当我用鼠标旋转地球时，对象始终围绕地球的 Z 轴继续旋转。

有人可以帮我吗？（至少是大问题的一部分）我被卡住了。

太感谢了。

我有 我想要 的

对于我的论文项目，我使用 DataArts WebGL Globe 来开发一个网页，该网页将在触摸显示器上的展览中使用。作为显示器触摸，我需要使地球可点击以选择单个国家并打开弹出窗口并突出显示所选国家。我正在使用 RayCaster 来查找触摸/点击的坐标，但是通过我的方法，我获得了镜像选择（从字面上看，如果我点击一个点，点击将定位在地球的相反大小）。问题似乎只在 x 轴上，但我认为我犯了更多错误。整个代码和整个项目上传到http://www.pietroforino.com/globe/，raycaster代码位于第660行的onMouseDown函数中。这里的代码

我需要这个实现，请帮我解决这个问题。

编辑 1.0

非常感谢您的回答，我已将 var 从 i 更改为 j，但没有任何改变。我也试过删除

这是没用的，但又没有任何改变。现在可能是什么？

ps 新版while代码上线

我确实编辑了一个 geojson 文件，并希望使用react-globe.gl来显示它，它是一个 3D (threeJS) 地球库。

当我在geojson.io上看到文件时，它看起来很完美：

然而，当它显示出来时，它看起来就像“摩洛哥”占据了整个世界的海洋：

这是geojson 文件。

我正在遵循 Globe.gl 中的这个示例来实现以下输出。我想使用 react-three-fiber 旋转这个地球，即使用这个例子中的方法。

这是我的Globe.js：

然后我将其导入Boxes.js：

使用这种方法会给我以下错误：

关于调试的想法？有没有更好的方法来旋转这个 Globe.gl 地球仪？

我是新手，想学习 JavaScript。我制作了一张带有 API 数据传单的 covid 世界地图。我想将相同的数据应用于globe.gl。

您能否告诉我如何将用于传单地图的相同 statesData 应用于 3d 地球？

我使用这些统计数据并编辑一些国家名称以匹配 API 数据。https://datahub.io/core/geo-countries

例如，这是globe.gl 代码的数据提取部分。

这是传单地图上的代码。我想将此数据用于上面的globe.gl。

非常感谢你的帮助。

我需要使用 resium-cesium 在反应组件上加载一个 kml 文件。我已按照官方 reium 页面中所示的确切程序进行操作，如下所示。

https://resium.darwineducation.com/getting_started#loading-your-own-data

我试图从cesium的官方github页面加载示例kml文件。 https://github.com/CesiumGS/cesium/tree/master/Apps/SampleData 我已经下载了这个 sampleData 文件夹并放在 react 项目的 src 文件夹下。然后尝试如下加载。

我应该收到类似的结果。https://sandcastle.cesium.com/index.html?src=KML.html 但我没有收到。在我的代码中 GeoJsonDataSource 工作得很好。但 KmlDataSource 有问题。在我的日志控制台中，我注意到了这个警告。

我的最终输出是这样的。请帮我完美加载kml文件。感谢你所做的一切。

这是问题：

如何监听“terrainProvider”是否开始加载数据？

我使用 disease.sh API 和 Globe.gl 制作了 covid-19 数据可视化。

我努力解决性能问题，几分钟后屏幕冻结。

我在 google 上查看了 PageSeppe Insights，上面写着“减少第三方代码的影响第三方代码阻塞了主线程 25,690 毫秒”

它是globe.gl，免费图书馆。 https://unpkg.com/globe.gl@2.22.3/dist/globe.gl.min.js

如果有人给我建议以改进我，我将不胜感激。

我正在尝试整合 WebGL 链接：https ://sites.google.com/site/webgearth/

但是当我在浏览器中运行相同时，我收到了这个错误：

未捕获的语法错误：意外的令牌 '<'
api.js:1

高度赞赏解决此问题的 Aby 解决方案

THREE.ImageUtils.getDataURL：出于性能原因将图像转换为 jpg

我收到这样的错误，并且它每秒钟都出现在我的控制台中。我正在使用带有 vuejs 的 globe.gl 及其背景图像。它是png，但由于这个错误我改成了jpg，但我仍然遇到同样的错误。这是我的代码的一部分；

从“../textures/sky.jpg”导入earthbg；

const world = Globe()(document.getElementById("globeViz")) .globeImageUrl( ${earthmap}) .backgroundImageUrl( ${earthbg}) ...

这是什么原因？我用谷歌搜索了它，但我猜没有其他人得到这个。此图像为 349 KB，4096 x 2048。有人知道这些错误吗？