使用JavaScript和Mapbox GL JS API创建交互式地球可视化-DEV365 开发者社区

介绍

曾经想环游世界吗？想看到我们星球上不同的位置吗？好吧，有时候我们的口袋和时间不会给我们带来如此奢侈的奢侈，但请不要担心，只是和我一起旅行，让我们环游世界（从您的家中，我的意思是）。

在本文中，我将引导您了解如何轻松地将互动地图实现到您的项目中，这将使您能够查看我们美丽的星球，从空间，到房屋的建筑或其他任何您选择的位置。

任何具有基本HTML，CSS和JavaScript技能的人都可以跟随。因此，您，是的，您不必担心没有精通这三个中的任何一个，就像Mapbox GL JS API非常容易实现，以至于非常客气，以帮助以超过95％的任务工作。 ρ。

Mapbox是一种强大的基于向量的渲染引擎，能够使用WebGL实时渲染动态图。它允许开发人员创建交互式，可自定义和视觉上令人惊叹的地图和地理空间应用程序。

现在我们知道了Mapbox，让我们开始从项目开始？因此，当我们即将起飞时，搭扣。

目录（TOC）

Setting Up the Html Structure
Adding Styles to the Page
Registration and Obtaining Your Mapbox API Credentials
Initializing the Map in your JavaScript File
Setting Zooming and Panning Controls
Conclusion

设置HTML结构

在开始之前，请确保您创建了3个空文件，即HTML，CSS和JavaScript文件。现在，在HTML文件中，我们将在其他任何内容之前创建我们的基本标准HTML样板。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>View the Earth</title>
</head>
<body>

</body>
</html>

在body标签中，我们包括项目的标题部分：

<header>
    <h1>View the Earth</h1>
</header>

接下来，让我们创建要容纳我们的地图元素的容器，以及额外的div元素，我们稍后将要进行样式，以创建阴影效果，以使地球的3D外观更多。

<div id="map-container">
    <div id="map"></div>
    <div id="shadow-overlay"></div>
</div>

之后，我们创建了一个小的button元素，该元素以后将负责重置地图的缩放和锅级。

<button id="reset">Reset Map </button>

基本上是我们的HTML文件。现在让我们添加一些样式来真正美化我们的页面。

在页面上添加样式

现在直接进入我们的CSS文件，让我们首先在页面上添加一些总体基本样式：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

接下来，我们为页面的正文设计：

body{
    display:grid;
    place-items: center;
    min-height: 100vh;
    max-width: 100vw;
    background-image: url(https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODkyNjI2Nzl8&ixlib=rb-4.0.3&q=85);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

之后，让我们继续为页面的其余部分添加样式：

header{
    padding-top: 5px;
    text-align: center;
    z-index:2;
}

h1{
    text-shadow: 2px 2px 5px #4069ff;
    color: aliceblue;
    letter-spacing: 2px;
    word-spacing: 5px;
    margin-bottom: 10px;
}

#map-container {
    position: relative;
    width: 70%;
    max-width:450px
}

#map{
    width: 100%; 
    height:100%;
    border-radius: 50%;
    padding-bottom: 100%;
    box-shadow: 1px 1px 50px #4069aa; 
}

#shadow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: inset -20px -15px 30px #01011f;
    pointer-events: none; 
  }

button{
    margin-top: 10px;
    font-size: 20px;
    border-radius: 10px;
    background-color: #4069aa;
    padding: 10px;
    color: aliceblue;
    box-shadow: 0px 0px 50px #4069aa;
    border: none;
}

好吧，我们已经在漂亮的装备中打扮了您的HTML文档，让我们进入项目中最有趣的部分。

注册并获得您的Mapbox API凭据

为了能够在项目中使用Mapbox GL JS API，您首先需要与它们有一个帐户，因此您可以获取访问令牌。这是给每个Mapbox用户提供的唯一ID，使他们可以访问Mapbox必须提供的所有惊人功能。

与他们创建一个帐户非常容易。首先，进入他们的website，然后单击开始免费映射按钮

与他们创建帐户后，您需要采取的下一步是获得访问令牌。您可以通过登录您的帐户来完成此操作，这将带您到此页面：

向下滚动到访问令牌并复制提供的默认访问令牌，然后将其放在现在安全的地方，因为我们将在JavaScript文件中使用它。

在JavaScript文件中初始化地图

当您完成注册并获得访问令牌时，在同一页面上继续并单击安装mapbox gl js ，然后将您带到此页面：

因为我们希望使该项目尽可能简单，所以我们将使用Mapbox CDN而不是模块bundler。因此，单击 html 图像。之后，您应该在此页面上看到自己：

复制您在那里找到的脚本和链接标签，然后将它们放入HTML文件中的head标签中。这将使您的文档可以访问地图样式和功能。完成此操作后，单击下一个按钮，它应该带您进入此页面：

现在，仅复制script标签之间的代码，进入您的JavaScript文件并将其粘贴到其中。将YOUR_MAPBOX_ACCESS_TOKEN替换为您之前复制的实际访问令牌，请确保它仍然在双引号内。

在那里，该地图已在您的项目中初始化，就像派一样容易。现在，我们只需要修改代码中的几件事。例如，我们需要更改地图视图样式，以使我们对地球的3D鸟瞰图，因为我们只需进入mapbox styles page并选择我们的所需样式，在这种情况下，这将是 Mapbox卫星街道样式，您可以通过向下滚动该页面找到它。将其旁边的样式代码复制，然后用它替换JavaScript文件中存在的样式属性的值。

设置Zooming和Panning控件

现在，我们已经完成了项目中的地图，我们需要相应地添加和修改PAN和缩放级别。在地图对象内，设置地图的初始变焦级别以及其起始位置：

center: [280.01, -5.01], // starting position
zoom: 1.5,

中心属性的数组为2，这仅仅是要定位的位置的经度和纬度值（按顺序），您可以设置所需的任何位置，只需Google Google经度和纬度该位置的值，然后将它们放在那样的数组中。

在地图对象之外，我们需要设置最小缩放级别，因此地图不能超过指定值，在这种情况下，我们将1.5用作我们的值：

map.setMinZoom(1.5);

接下来，让我们为我们的reset map按钮实现功能。在JavaScript文件中，为元素创建一个变量以获取其id：

const reset = document.getElementById('reset');

之后，我们为元素创建一个onclick事件，这将使我们能够重置地图的缩放级别的初始值，并在每次单击按钮时定位。我们想使用过渡动画效果来实现这一目标，因此我们将使用内置的easeto() mapbox函数，该功能接收我们的map对象。

reset.onclick= ()=>{
  map.easeTo({
    zoom: 1.5,
    center: [280.01, -5.01],
    duration: 3000
  });
}

duration属性用于设置我们希望过渡到持续时间的价值，在这种情况下，我们将其设置为3000毫秒（3秒）。

，您已经成功地创建了地球的实时互动可视化。为您欢呼。

结论

好吧，这篇文章的人。

您可以在下面的笔中查看该项目的结果和整个代码：
（将笔缩放级别设置为0.5倍，以获得更好的视图）

Mapbox API仍然包含大量的附加组件和功能，您可以将其集成到自己的地图中，以使其更加动态和有趣，您可以转到Mapbox页面，探索更多这些功能，并提供所有功能。

希望您已经学到了一些新知识，现在也可以将地图功能纳入您的任何项目。

现在，继续查看我们美丽的地球的整个地球，探索您想参观的不同地点。

如果您有任何疑问，请随时询问他们，我会及时回答。和往常一样，愉快的编码！