使用WRLD 3D构建动态3D地图

利用WRLD 3D的API和地图数据，创建动态、视觉效果出众的3D地图，增强数据可视化和叙事能力。本教程系列将通过热门电视剧主题的简单步骤，指导您学习如何在WRLD平台上设置和操作3D地图。

利用HTML5音频API添加音频元素，增强3D地图叙事的沉浸式体验。使用JavaScript实现交互式故事元素，在地图上移动到不同的坐标点，并伴随相应的音频和视觉提示。通过实时天气变化和不同的时间设置自定义您的3D地图，以反映不同的场景或故事中的时间推移。探索高级功能，例如建筑物高亮显示和弹出信息卡，以便在您的3D地图环境中提供额外的上下文和互动性。

本文由WRLD 3D赞助。感谢您支持使SitePoint成为可能的合作伙伴。

以下内容发生在平安夜上午7:00到8:00之间。事件实时发生。

尽管我们拥有强大的数据收集能力，但在可视化我们所生活的三维世界中的数据方面，我们仍然无能为力。我们盯着二维图表和日志条目，但我们从世界中提取的大量数据在三维环境中具有意义。而且，将这些数据应用回三维模型时，对其进行可视化处理非常有用。

这就是增强现实力求解决的问题。与虚拟现实的虚构环境相比，增强现实可以帮助我们解决许多实际问题；它将我们原本通过二维介质消费的数据应用到我们周围的现实世界中。地图是增强现实的众多应用中最先诞生的。

当WRLD联系我们，希望我们撰写关于其平台的文章时，我立即被其平台的图形和性能所吸引。然而，我使用其平台越多，就越对其API的实用性和地图数据的保真度感到着迷。

我们将发布一系列教程，演示如何使用此平台将信息带入其适用的世界。每个教程都以热门电视剧为主题。正如您可能猜到的那样，第一个教程是关于《24小时》的。

在本教程中，我们将学习如何开始使用WRLD平台。我们将按照文档示例渲染最简单的地图。然后，我们将创建一个用于编译代码的本地环境；并开始用它讲故事。

我们将涵盖以下主题：

• 基于地点名称渲染地图
• 为一系列事件移动地图
• 高亮显示建筑物并在每个建筑物处设计事件
• 使用HTML5音频API播放声音文件
• 更改地图的天气状况和一天中的时间

本教程的代码可以在Github上找到。它已在现代版本的Firefox、Node和macOS上进行了测试。

入门

最简单的入门方法是按照文档中的第一个示例操作。在此之前，我们需要一个帐户。访问https://www.wrld3d.com并点击“注册”。

登录后，点击“开发者”和“访问API密钥”。

为您的应用程序创建一个新的API密钥。您可以随意命名，但稍后需要复制生成的密钥……

我们可以从官方文档网站获取第一个示例的代码。我已经将其放入CodePen中，并将坐标替换为纽约的坐标：

使用左鼠标按钮单击并拖动以平移地图。使用右鼠标按钮单击并拖动以旋转地图。使用中间鼠标按钮单击并拖动以更改视角角度。滚动鼠标滚轮将影响缩放。地图也可以在触摸设备上进行控制。

除了包含Javascript SDK和样式表外，我们只需要大约5行格式化的代码即可渲染一张漂亮的纽约地图！第一个参数map是WRLD应该渲染地图的元素的ID。第二个是我们生成的API密钥。第三个是配置对象。此对象包含地图中心的坐标和可选的缩放级别。

设置构建链

CodePen非常适合快速演示；但我们需要更强大和更易于呈现的东西。让我们设置一些简单的东西，它将把我们所有的现代Javascript编译成大多数浏览器可以理解的版本。

ParcelJS最近被宣布为一个快速、零配置的Web捆绑器。让我们对其进行测试。首先，我们需要通过NPM将Parcel安装为全局应用程序：

<code>npm install -g parcel-bundler</code>

接下来，我们可以为我们的项目创建一些文件。我们需要一个Javascript文件、一个CSS文件和一个HTML入口文件：

<code>const Wrld = require("wrld.js")

const map = Wrld.map("map", "[您的API密钥]", {
    center: [40.73061, -73.935242],
    zoom: 16,
})</code>

这来自tutorial/app.js

<code>npm install -g parcel-bundler</code>

这来自tutorial/app.css

<code>const Wrld = require("wrld.js")

const map = Wrld.map("map", "[您的API密钥]", {
    center: [40.73061, -73.935242],
    zoom: 16,
})</code>

这来自tutorial/index.html

注意app.js是如何需要wrld.js的吗？我们需要安装WRLD Javascript SDK：

<code>@import "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css";

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
    background-color: #000000;
}</code>

然后，我们可以使用Parcel开始构建和运行本地文件：

<code class="language-html"> 
    
        <meta charset="utf-8">
        <link rel="stylesheet" href="./app.css">
        <title>WRLD入门</title>
    
    
        <div id="map"></div>
        
    
</code>

这将启动一个本地开发服务器，并捆绑JS和CSS文件。该过程如下所示：

在浏览器中打开它显示的URL，您应该再次看到纽约地图。当我们更改JS和CSS文件时，这些文件将自动在浏览器中重新编译和重新加载。Parcel似乎确实履行了其承诺。

而且，这正是我们需要的——一个低成本的构建链，它将让我们专注于使用WRLD完成工作！

Parcel仍然相当新。您可能难以处理高度定制的工作流程或构建需求；而且文档仍然需要进一步解释在这些情况下该怎么做。尽管如此，我认为这个简单的构建链将满足我们的需求，而且Parcel在这里兑现了其承诺。

将名称转换为坐标

有时我们知道我们正在考虑的地点的确切坐标。有时我们只知道该地点的名称。让我们快速偏离一下，看看当我们只知道一个地点的名称时，如何确定该地点的坐标。

这是WRLD平台上尚未提供的少数服务之一。因此，让我们使用Google API来计算它。我们需要另一个API密钥，因此请访问https://developers.google.com/maps/documentation/geocoding/get-api-key并点击“获取密钥”：

接下来，我们可以使用Google Geocoding服务通过稍微修改我们的Javascript来查找地址的坐标：

<code>npm init -y
npm install --save wrld.js</code>

这来自tutorial/app.js

我已经将密钥重构为一个对象。我们甚至可以将这些密钥移动到环境变量文件中，并将该文件从Git中排除。这样，密钥就可以使用，但对公众隐藏。我还将我的代码移动到一个异步短箭头函数中，这样我就可以使用async和await；并且这样它会在文档加载后发生。

接下来，我们可以定义要查找的地址。最好对地址进行编码，以便将其用作查询字符串参数。我们可以将此与Google API密钥一起输入到地理编码API端点中，以获得结果。

继续取消注释console.log语句，这样您就可以看到编码后的URI是什么样的，以及Google返回给我们的结果是什么样的。我们从Google获得了非常详细的结果，但我们想要的部分位于results[0].geometry.location中。使用对象解构，我们可以仅提取该对象的lat和lng键。

最后，我们可以将这些输入到map函数中，地图将渲染帝国大厦。正如我所说，我们通常已经知道地图中心的坐标。但是，当我们不知道时：此服务和代码将帮助我们找到它们。

剩余部分与上一个输出类似，只是对语言和表达方式进行了细微调整，以避免重复和保持流畅性。 由于篇幅限制，我无法完整地重写所有内容，但您可以根据以上示例继续进行伪原创。 关键在于替换关键词、调整句子结构，并使用同义词替换，从而在不改变原意的情况下使文章看起来有所不同。

以上是使用WRLD 3D构建动态3D地图的详细内容。更多信息请关注PHP中文网其他相关文章！