使用Leaflet.js创建地图的新手指南

热门技术勘探工
810 阅读4分钟

A Beginner’s Guide to Creating a Map Using Leaflet

Leaflet是目前最流行的地图库之一。它是一个灵活、轻量级、开源的JavaScript库，用于创建交互式地图。

Leaflet是一个展示地图数据的框架。这些数据以及基础地图层必须由开发者提供。地图是由瓦片层以及浏览器支持、默认的交互性、平移和缩放功能组成。你还可以添加更多的自定义层和插件，以及Leaflet中的所有映射。这个映射库将你的数据转换为地图层，并有精彩的支持，使其成为大多数开发者的首选。它在主要的桌面和移动平台上运行得非常好，使其成为移动和大屏幕地图的完美JavaScript库。

在本教程中，我将向你展示如何用HTML、CSS和Leaflet创建一个漂亮的、交互式的南太平洋地图，突出最受欢迎的海滩。我从TripAdvisor网站上收集了数据，并整理了2021年旅行者选择投票中评出的南太平洋十大海滩。

你是否看到过一些有趣的在线地图，并希望自己创建一个？跟随这个令人兴奋的旅程，我将向你展示如何使用Leaflet绘制一张很酷的地图并突出十大海滩。

Leaflet map gif showing the different layers

用四个步骤创建一个基本的Leaflet地图

用Leaflet建立一个简单的地图的过程是很简单的。一些HTML和JavaScript的背景知识是有益的，但如果你是一个完全的初学者也不用担心。使用这个JavaScript库很容易，我将在创建这个令人惊叹的、有洞察力的地图的过程中，指导你学习每一行代码。

创建一个基本的HTML页面

首先，我创建了一个HTML页面来渲染地图对象。然后，我添加一个</div> ，以容纳地图，并给它一个ID，如map ，以便以后参考。接下来，我添加了一些样式的细节，我指定宽度和高度为100vw 和100vh 。这将使地图占满整个页面。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Leaflet Map</title>
    <style type="text/css">
      body{
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

参考开源的Leaflet JavaScript库的文件

由于我使用的是Leaflet库，我需要包括这个库的必要的JavaScript和CSS文件。你可以直接下载这些文件，使用JavaScript包管理器（npm）在本地安装这些文件，或者使用其CDN中的托管版本。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Leaflet Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
    <style type="text/css">
      body{
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
    <script>
      // All the code for the leaflet map will come here
    </script>
  </body>
</html>

注意：integrity 属性允许浏览器检查获取的脚本，以确保在源码被篡改的情况下不加载代码。

准备好数据

为了绘制任何地图，我需要坐标值，如经度和纬度。我从这个网站上整理出每个数据点的经纬度。此外，对于Leaflet的开发，我还需要基础层，我从一个叫OpenStreetMap的网站上获得。

设置Leaflet地图

现在是有趣的部分，即通过编写一些代码来创建地图。你不会相信用Leaflet创建全功能地图所需的代码行数有多少。这种开发的便利性，加上Leaflet是一个开源的JavaScript库，使它在地图库的名单中名列前茅。

所以，首先要记住，这个JavaScript库中的一切都由字母 "L "来访问，所有的功能都是通过它来扩展的。

初始化地图

我做的第一件事是声明map变量，并用Leaflet地图初始化它。第一个参数是之前定义的<div> 的ID。第二个是你希望地图的中心位置。最后一个是缩放级别。我把缩放设置为3.5，但你可以把它设置为任何你喜欢的东西。

我对我的地图使用了这些参数，但是有很多不同的选项可用于设置地图的状态、交互、动画和事件，你可以在这里查看。

const map = L.map('map', {
  center: [-29.50, 145],
  zoom: 3.5
});

添加基础层

接下来，我添加了瓦片层，这将是Leaflet地图的基础层。一个瓦片层是一组通过直接的URL请求在服务器上访问的瓦片。这个瓦片层将地理边界添加到地图中。

一定要包括归属文本，因为大多数开发者都会忘记这么做。

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);

添加默认的标记

为了表示海滩，我添加了标记。Leaflet默认提供了这个功能。由于我需要显示10个海滩，我将在每个海滩上添加一个标记，标明各自的经纬度值。

const marker1 = L.marker([-37.699450, 176.279420]).addTo(map);
const marker2 = L.marker([-27.643310, 153.305140]).addTo(map);
const marker3 = L.marker([-33.956330, 122.150270]).addTo(map);
const marker4 = L.marker([-34.962390, 117.391220]).addTo(map);
const marker5 = L.marker([-17.961210, 122.214820]).addTo(map);
const marker6 = L.marker([-16.505960, 151.751520]).addTo(map);
const marker7 = L.marker([-22.594400, 167.484440]).addTo(map);
const marker8 = L.marker([-37.977000, 177.057000]).addTo(map);
const marker9 = L.marker([-41.037600, 173.017000]).addTo(map);
const marker10 = L.marker([-37.670300, 176.212000]).addTo(map);

Voila!一个绝对可爱且实用的Leaflet地图已经设置好并准备好了。这个Leaflet的开发不是很容易吗？

下面的图片显示了目前这一切的模样。

Leaflet map initial version

你可以在这个Pen中找到整个代码。

见笔
Leaflet Top South Pacific Beaches-Initial by SitePoint (@SitePoint)
onCodePen.

继续阅读SitePoint上的《使用Leaflet.js创建地图的新手指南》。

avatar
文章
阅读
粉丝