谷歌地图 | 如何开始使用 Maps JavaScript API 中的 3D 地图

Maps JavaScript API 一直致力于突破基于位置的数据可视化的极限。今年的 Google I/O 大会上，Google 宣布了可以使用 Maps JavaScript API 中的 3D 地图，将照片级逼真的 3D 地图直接集成到您的应用程序中。

在本文中，我们将逐步介绍如何开始使用这个新版本来创建真正身临其境的可视化体验。如需更多资源和技术支持，可以联系拥有谷歌地图一级代理资质的 Cloud Ace云一。
 Cloud Ace——谷歌云高级合作伙伴

从平面到3D：拥抱新维度

还记得 Google Earth 首次推出时，您可以体验飞越峡谷、盘旋摩天大楼吗？现在，您可以使用尖端的照片级 3D 地图将相同的惊人真实感直接引入您的 Web 应用程序。借助此新版本，您只需几行代码就能渲染出具有惊人精度的详细城市景观、地形和地标。

通过将 3D 地图集成到您的应用程序中，您可以解锁一个全新的世界：

• 增强用户参与度：让用户沉浸在熟悉而又迷人的周围环境中，并促进更深入地参与您的应用程序。
• 直观探索：简化应用程序中的导航和探索，并使复杂的空间关系变得清晰。
• 更深入的数据洞察：在 3D 景观上显示数据叠加，为用户提供更具影响力和直观的地理信息理解。

入门：比你想象的更容易

将 3D 地图集成到现有应用程序中非常简单。下面是快速分解。

1、添加 3D 地图 Web 组件：
当前的实验版本可在 Maps JavaScript API 的 alpha 通道中获得，这意味着您首先需要加载正确的地图库。

您有两种加载库的选项。方法一是直接链接到整个库，这在语法上要简单得多。方法二是使用较新的动态库函数来引用库，但仅在运行时需要时加载。在这两种情况下，您都需要包含启用了地图的云项目的特定 API 密钥，并确保它使用 alpha 通道（每种情况下都以粗体突出显示）。

直接加载脚本：

登录后复制

<script async src="https://maps.googleapis.com/maps/api/js?key=<Enter API Key>>&v=alpha&libraries=maps3d&callback=init"></script>

• 1.

动态库加载：

登录后复制

&lt;script async defer&gt;<font></font>
   (g =&gt; { var h, a, k, p = "The Google Maps JavaScript API", ... )({<font></font>
       key: "&lt;Enter API Key&gt;",<font></font>
       v: "alpha",<font></font>
   });<font></font>
&lt;/script&gt;<font></font>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

2、微调视角
通过 3D 地图对象可以对视角进行基础交互，就像在操作相机俯瞰地球一样，您可以控制许多参数来指定对象正在查看的内容，如下图所示：

您可以设置多个值来控制所观察的点：

• Map3DElement center 属性控制您正在查看的点。
• Map3DElement range 属性控制您希望查看对象的距离。
• Map3DElement heading 属性控制您希望从哪个方向查看该点。
• Maps3DElement tilt 属性显示您希望从哪个角度向下查看该点。

下面的代码片段说明了如何创建一个 3D 地图，指定要可视化的位置、视图的范围和视角。如上所述，可以通过直接脚本加载或动态库加载来添加 3D 地图对象。

直接加载脚本：

登录后复制

<gmp-map-3d center="43.6425,-79.3871,400" range="1000" tilt="60"></gmp-map-3d>

• 1.

动态库加载：

登录后复制

async function init() {<font></font>
   const { Map3DElement } = await google.maps.importLibrary("maps3d");<font></font>
<font></font>
   const map3DElement = new Map3DElement({<font></font>
       center: { lat: 43.6425, lng: -79.3871, altitude: 400 },<font></font>
       range: 1000,<font></font>
       tilt: 60,<font></font>
   });<font></font>
<font></font>
   document.body.append(map3DElement);<font></font>
}<font></font>
init();<font></font>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.

在这两个示例中，您可以看到地图的以下视图，查看加拿大多伦多的 CN 塔：

根据需要将所有这些结合起来。修改它们以操纵“虚拟”空间中的视角在各个位置移动，根据对用户交互和对象的响应查看不同的点，并执行动画，例如飞行穿梭。

3、添加地图功能：

现在您已经了解了如何控制视图，下一步可能是将数据添加到 3D 地图中以突出显示某个特征或建筑物。目前，API 允许您向视图添加线条和多边形，设置各种颜色级别（命名并指定 CSS）和线条边界的不透明度（0 - 1 表示百分比）以及区域填充颜色。

由于您是在 3D 环境中工作，因此也可以通过设置对象每个点的高度属性来拉伸线和多边形以添加第三维。每个点由纬度和经度对或纬度、经度、高度三者组成。

回到加拿大 CN 塔的例子，您可以将多边形加载到地图上，该多边形包含您之前查看的塔基。对于每个点，您可以指定一个高度，以便在拉伸时，它会从地面绘制到高度的框。（同样，下面的代码示例展示了直接和动态形式，以突出每个选项的优点。）

直接形式：

登录后复制

&lt;gmp-map-3d center="43.6425,-79.3871,400" range="1000" tilt="60"&gt;<font></font>
   &lt;gmp-polygon-3d<font></font>
       fill-color="rgba(0, 255, 255, 0.2)"<font></font>
       stroke-color="rgba(255, 0, 255, 0.8)"<font></font>
       stroke-width="4"<font></font>
       extruded<font></font>
       draws-occluded-segments<font></font>
       altitude-mode="absolute"&gt;<font></font>
   &lt;/gmp-polygon-3d&gt;<font></font>
&lt;/gmp-map-3d&gt;<font></font>
<font></font>
&lt;script&gt;<font></font>
   function init() {<font></font>
     const polygon = document.querySelector('gmp-polygon-3d');<font></font>
<font></font>
     polygon.outerCoordinates = [<font></font>
       { lat: 43.6427196, lng: -79.3876802, altitude: 600 },<font></font>
       { lat: 43.6421742, lng: -79.3869184, altitude: 600 },<font></font>
       { lat: 43.643001, lng: -79.3866475, altitude: 600 },<font></font>
       { lat: 43.6427196, lng: -79.3876802, altitude: 600 }<font></font>
     ];<font></font>
   }<font></font>
&lt;/script&gt;<font></font>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.

动态形式：

登录后复制

const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");<font></font>
<font></font>
const polygonOptions = {<font></font>
   strokeColor: "rgba(255, 0, 255, 0.8)",<font></font>
   strokeWidth: 4,<font></font>
   fillColor: "rgba(0, 255, 255, 0.2)",<font></font>
   altitudeMode: AltitudeMode.ABSOLUTE,<font></font>
   extruded: true,<font></font>
   drawsOccludedSegments: true,<font></font>
}<font></font>
<font></font>
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);<font></font>
<font></font>
towerPolygon.outerCoordinates = [<font></font>
   { lat: 43.6427196, lng: -79.3876802, altitude: 600 },<font></font>
   { lat: 43.6421742, lng: -79.3869184, altitude: 600 },<font></font>
   { lat: 43.643001, lng: -79.3866475, altitude: 600 },<font></font>
   { lat: 43.6427196, lng: -79.3876802, altitude: 600 }<font></font>
];<font></font>
<font></font>
map3DElement.append(towerPolygon);<font></font>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.

在代码中，将多边形的高度模式属性设置为，以ABSOLUTE确保您使用的是真实世界高度（从海平面开始）。同样，有许多选项可用于处理对象的高度，您可以在谷歌地图官方技术文档中找到这些选项。

因为这是多边形，所以第一个点和最后一个点应该相同，以确保它是封闭的，并且封闭的空间用指定的颜色填充。线条不需要这样做。

最终的交互式地图将如下所示：

希望这篇文章能够展示使用 Maps JavaScript API 创建 3D 地图是多么简单，以及适合您的编程风格和应用程序需求的不同选项。

基于位置的体验的新篇章
Maps JavaScript API 中 3D 地图的推出标志着沉浸式网络地图发展的一个重要里程碑。我们很高兴看到您将使用这个强大的新工具集创建创新且引人入胜的应用程序。

原创作者: u_15961229 转载于: https://blog.51cto.com/u_15961229/11684814