51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

使用 Leaflet.js 创建地图的初学者指南

500.jpg

Leaflet 是一个用于呈现地图数据的框架。数据以及底图图层必须由开发人员提供。地图由切片图层以及浏览器支持、默认交互性、平移和缩放功能组成。您还可以添加更多自定义图层和插件,以及 Leaflet 中的所有映射。该地图库将您的数据转换为地图图层,并提供出色的支持,使其成为大多数开发人员的首选。它在主要的桌面和移动平台上运行良好,使其成为移动和大屏幕地图的完美 JavaScript 库。

在本教程中,我将向您展示如何使用 HTMLCSS 和 Leaflet 创建漂亮的交互式南太平洋地图,以突出显示最受欢迎的海滩。我从 TripAdvisor 网站收集了数据,并整理了2021 年旅行者之选投票评选的南太平洋前十名海滩。【https://www.tripadvisor.com.au/TravelersChoice-Beaches-cTop-g255055】。

通过四个步骤创建基本的传单地图

使用传单构建简单地图的过程很简单。一些 HTML 和 JavaScript 的背景知识是有益的,但如果您是一个完整的初学者,请不要担心。使用这个 JavaScript 库非常简单,在创建这个令人惊叹的、富有洞察力的地图时,我将引导您完成每一行代码。

创建一个基本的 HTML 页面

首先,我创建一个 HTML 页面来呈现地图对象。然后我添加一个</div>来保存地图并给它一个 ID,map以便稍后参考。接下来,我添加了一些样式细节,其中我将宽度和高度指定为100vw100vh。这将使地图占据整个页面:


<!DOCTYPE html>
<html>
  <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 库的文件 {#referencethefilesoftheopensourceleafletjavascriptlibrary}

由于我使用的是 Leaflet 库,因此我需要包含该库的必要 JavaScript 和 CSS 文件。您可以直接下载文件【https://leafletjs.com/download.html】,使用 JavaScript 包管理器 (npm) 在本地安装文件,或使用其 CDN 中的托管版本:

<!DOCTYPE html>
<html>
  <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属性允许浏览器检查获取的脚本,以确保如果源已被操纵,则不会加载代码。

准备数据 {#preparethedata}

要绘制任何地图,我需要像纬度和经度这样的坐标值。我在此处【https://www.latlong.net/】整理了来自该站点的每个数据点的纬度和经度。此外,对于 Leaflet 开发,我还需要从名为OpenStreetMap【https://www.openstreetmap.org/#map=4/-19.64/142.38】的站点获得的基础层。

设置传单地图 {#setuptheleafletmap}

现在是通过编写几行代码来创建地图的有趣部分。您不会相信使用 Leaflet 创建功能齐全的地图只需要几行代码。这种易于开发的特点,加上 Leaflet 是一个开源 JavaScript 库,使其在映射库列表中名列前茅。

因此,首先,请记住这个 JavaScript 库中的所有内容都通过字母"L"访问,并且所有功能都通过它进行扩展。

初始化地图 {#initializethemap}

我要做的第一件事是声明 map 变量并使用 Leaflet map 对其进行初始化。第一个参数是<div>前面定义的ID 。第二个是您希望地图中心所在的位置。最后是缩放级别。我已将缩放设置为 3.5,但您可以将其设置为您喜欢的任何值。

我将这些参数用于我的地图,但有许多不同的选项可用于设置地图、交互、动画和事件的状态,您可以在此处查看【https://leafletjs.com/reference.html#map-l-map】:

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

添加基础层 {#addthebaselayer}

接下来,我添加了切片图层,这将是 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);

添加默认标记 {#addthedefaultmarkers}

为了指示海滩,我添加了标记。Leaflet 默认提供此功能。由于我需要显示十个海滩,我将添加一个标记,每个标记带有相应海滩的纬度和经度值:

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);

瞧!一个绝对可爱且实用的传单地图已全部设置并准备就绪。这传单开发不是轻而易举吗?

下图显示了到目前为止这一切的样子。

a.jpg

可以看下代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 Leaflet.js 创建地图的初学者指南 | Web前端之家www.jiangweishan.com</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
    <style>
       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>
        const map = L.map('map', {
            center: [-29.50, 145],
            zoom: 3.5
        });

        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);


        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);
    </script>

</body>
</html>

自定义传单地图 {#customizingtheleafletmap}

Leaflet JavaScript 库的一个有用功能是它可以快速构建基本地图,并且它还具有大量自定义地图的选项。因此,让我向您展示四种方法,使这张传单地图更具信息性和美观性。

1.禁用鼠标滚动缩放 {#1disablezoomwithmousescroll}

主要的桌面问题之一是在尝试浏览页面时意外滚动地图。为了处理这个问题,我修改了我在设置阶段声明地图的代码。我将添加scrollWheelZoom属性并将其设置为false,以确保地图只能使用缩放按钮进行缩放。我还将使用不同的方式来设置中心和缩放级别,这样可以有效地工作并且更具可读性:

const map = L.map('map', {scrollWheelZoom:false}).setView([-29.50, 145], 3.5);

2. 向地图添加图层 {#2addlayerstothemap}

Leaflet 的另一个令人兴奋和有用的功能是添加多个矢量图层的选项。将街景作为图层之一,我将从提供免费网络地图服务 (WMS) 的站点添加另外两个切片图层。我将添加一个地形图层和一个地点图层:

const basemaps = {
  StreetView: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',   {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}),
  Topography: L.tileLayer.wms('http://ows.mundialis.de/services/service?',   {layers: 'TOPO-WMS'}),
  Places: L.tileLayer.wms('http://ows.mundialis.de/services/service?', {layers: 'OSM-Overlay-WMS'})
};

Leaflet 还提供了让用户控制要渲染的图层的功能。使用该功能,我将在页面右上角添加一个选项菜单按钮,让您选择要覆盖在地图上的三个图层中的哪一个:

L.control.layers(basemaps).addTo(map);

最后,我将 Topography 图层设置为要渲染的默认图层。在最终版本中,我将恢复为 Streetview 作为默认选项:

basemaps.Topography.addTo(map);

3.自定义标记 {#3customizethemarkers}

默认标记非常适合指示位置,但自定义标记为地图提供了个性化的外观,并且使用 Leaflet 库很容易设置它。

要定义图标,我需要指定图标的 URL 和大小。我将下载一个免费的 SVG 图标并将其托管在我的 GitHub 帐户上,该帐户提供了 URL。我将大小设置为 40,但您可以或多或少地保留它。

现在,我将简单地将这个图标添加到之前定义的每个标记中,仅此而已。所有指示海滩的标记现在都是海滩图标:

const basicBeachIcon = L.icon({
  iconUrl: 'https://raw.githubusercontent.com/shacheeswadia/leaflet-map/main/beach-icon-chair.svg',
  iconSize: [40, 40],
});

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

DEMO如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 Leaflet.js 创建地图的初学者指南 | Web前端之家www.jiangweishan.com</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
    <style>
       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>
        const map = L.map('map', {scrollWheelZoom:false}).setView([-29.50, 145], 3.5);

        const basemaps = {
        StreetView: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',   {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}),
        Topography: L.tileLayer.wms('http://ows.mundialis.de/services/service?',   {layers: 'TOPO-WMS'}),
        Places: L.tileLayer.wms('http://ows.mundialis.de/services/service?', {layers: 'OSM-Overlay-WMS'})
        };

        L.control.layers(basemaps).addTo(map);

        basemaps.Topography.addTo(map);

        const basicBeachIcon = L.icon({
        iconUrl: 'https://raw.githubusercontent.com/shacheeswadia/leaflet-map/main/beach-icon-chair.svg',
        iconSize: [40, 40],
        });

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

</body>
</html>

这个图标只是一个例子,所以当我在可视化的最终版本中更改自定义标记时,请留意一个更时髦的图标。

4.添加弹出窗口 {#4addpopups}

与工具提示一样,弹出窗口可以包含有关数据的更多信息。单击时会显示地图中的弹出窗口,并且可以根据您的喜好进行自定义。使用 Leaflet,可以使用名为bindPopup.

由于我们在地图对象上显示海滩,我决定在弹出窗口中显示每个海滩的名称。我只是将文本添加到函数并将其绑定到每个标记:

const marker1 = L.marker([-37.699450, 176.279420], {icon: basicBeachIcon})
    .bindPopup('Whitehaven Beach, Whitsunday Island')
    .addTo(map);
const marker2 = L.marker([-27.643310, 153.305140], {icon: basicBeachIcon})
    .bindPopup('Turquoise Bay Exmouth, Australia')
    .addTo(map);
const marker3 = L.marker([-33.956330, 122.150270], {icon: basicBeachIcon})
    .bindPopup('Cape Le Grand National Park Esperance, Australia')
    .addTo(map);
const marker4 = L.marker([-34.962390, 117.391220], {icon: basicBeachIcon})
    .bindPopup('Greens Pool Denmark, Australia')
    .addTo(map);
const marker5 = L.marker([-17.961210, 122.214820], {icon: basicBeachIcon})
    .bindPopup('Cable Beach Broome, Australia')
    .addTo(map);
const marker6 = L.marker([-16.505960, 151.751520], {icon: basicBeachIcon})
    .bindPopup('Matira Beach, Society Islands')
    .addTo(map);
const marker7 = L.marker([-22.594400, 167.484440], {icon: basicBeachIcon})
    .bindPopup('Piscine Naturelle Ile Des Pins, New Caledonia')
    .addTo(map);
const marker8 = L.marker([-37.977000, 177.057000], {icon: basicBeachIcon})
    .bindPopup('Ohope Beach Whakatane, New Zealand')
    .addTo(map);
const marker9 = L.marker([-41.037600, 173.017000], {icon: basicBeachIcon})
    .bindPopup('Kaiteriteri Beach, New Zealand')
    .addTo(map);
const marker10 = L.marker([-37.670300, 176.212000], {icon: basicBeachIcon})
    .bindPopup('Mt Maunganui Main Beach, New Zealand')
    .addTo(map);

Leaflet 地图的其他自定义项 {#othercustomizationswithleafletmaps}

除了我在本教程中向您展示的内容之外,Leaflet 还有大量自定义选项------例如添加圆形或多边形等形状、自定义弹出窗口以及添加事件。

一个插件打开了整个定制领域,而作为开源的 Leaflet 有许多第三方插件,可以为原始地图提供扩展功能。您可以使用 Leaflet 插件添加更多地图图块、页面、URL 模板、PNG 图像、图块图像、高级缩放选项和增强的图块交互。还可以选择使用 Google 的 API 进行定位和搜索。

结论 {#conclusion}

如您所见,使用 Leaflet 等 JS 库创建交互式地图非常简单快捷。安装无忧,工作高效,代码可读,所有映射都由库方便地处理。它也是创建适合移动设备的交互式地图的绝佳选择,因为它适用于所有移动平台。除了出色的可用性外,Leaflet 还支持大量自定义选项。


赞(1)
未经允许不得转载:工具盒子 » 使用 Leaflet.js 创建地图的初学者指南