如何使用Leaflet在Angular中构建地图，第1部分：生成地图

介绍

Leaflet 是一个用于创建地图的 JavaScript 库。它具有很好的功能，并且非常适合移动设备。

注意： 这是关于使用 Angular 和 Leaflet 的 4 部分系列的第 1 部分。

您可以使用此库显示支持放大和缩小以及通过单击和拖动进行平移的地图。

在本教程中，您将学习如何将 Leaflet 集成到 Angular 应用程序中。

先决条件

要完成本教程，您需要：

Node.js 安装在本地，您可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行。
熟悉设置 Angular 项目和使用 Angular 组件可能会有所帮助。

本教程已使用 Node v15.12.0、npm v7.7.4、angular v11.2.7 和 leaflet v1.7.1 进行了验证。

第 1 步 — 设置项目

您可以使用 @angular/cli 创建一个新的 Angular 项目。

在您的终端窗口中，使用以下命令：

npx @angular/cli new angular-leaflet-example --style=css --routing=false --skip-tests

这将配置一个新的 Angular 项目，其样式设置为“CSS”（与“Sass”、“Less”或“Stylus”相对）、无路由和跳过测试。

导航到新创建的项目目录：

cd angular-leaflet-example

在您的项目文件夹中，运行以下命令来安装 leaflet：

npm install leaflet@1.7.1

有了这个脚手架，您就可以开始处理地图组件了。

第 2 步 - 创建地图组件

现在，您可以创建自定义地图组件：

npx @angular/cli generate component map --skip-tests

此命令将生成四个新文件：map.component.css、map.component.html 和 map.component.ts。它还将更新 app.module.ts 文件以使用这个新组件。

接下来，打开 map.component.ts 并将内容替换为以下代码行：

src/app/map/map.component.html

<div class="map-container">
  <div class="map-frame">
    <div id="map"></div>
  </div>
</div>

然后，打开map.component.css，将内容替换为以下代码行：

src/app/map/map.component.css

.map-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 30px;
}

.map-frame {
  border: 2px solid black;
  height: 100%;
}

#map {
  height: 100%;
}

标记和样式的这种组合将创建一个最外层的 div，其类为 .map-container，它将定位地图以占据屏幕上的可用空间。

它还将创建一个 ID 为 #map 的 div。在这里使用 id 而不是类很重要，因为 Leaflet 期望将 id 传递给它以放置地图。

接下来，打开 map.component.ts 并导入 Leaflet 包：

src/app/map/map.component.ts

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  constructor() { }

  ngOnInit(): void { }
}

地图 div 需要存在于 DOM 中，然后才能引用它来创建地图。这在 AfterViewInit 生命周期钩子期间是可能的。扩展您的组件以实现 AfterViewInit 并将 ngAfterViewInit() 功能添加到您的组件：

src/app/map/map.component.ts

import { Component, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements AfterViewInit {
  constructor() { }

  ngAfterViewInit(): void { }
}

让我们创建一个名为 initMap() 的单独私有函数来隔离所有地图初始化。

在这个函数中，您需要创建一个新的 Leaflet map 对象。 API 还允许您在其中定义选项。

在本教程中，您将设置地图的中心和起始缩放值。

该中心将是位于 39.828175°N 98.579500°W 的毗邻美国的地理中心。

Leaflet 使用的十进制坐标系假设本初子午线以西的任何东西都是负数，因此实际的中心坐标将为 [ 39.8282, -98.5795 ]。

缩放级别将设置为 3。

为地图对象声明一个变量，创建地图，然后从 ngAfterViewinit 调用它：

src/app/map/map.component.ts

import { Component, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements AfterViewInit {
  private map;

  private initMap(): void {
    this.map = L.map('map', {
      center: [ 39.8282, -98.5795 ],
      zoom: 3
    });
  }

  constructor() { }

  ngAfterViewInit(): void {
    this.initMap();
  }
}

接下来，打开app.component.html，将生成的内容替换为新组件：

src/app/app.component.html

<app-map></app-map>

并运行应用程序：

npm start

然后，在 Web 浏览器中打开应用程序 (localhost:4200)：

您的应用程序将显示一个空 div 并缺少地图。

使用 Leaflet，您可以将数据可视化为 Layers。您在绘制地图时想到的那种数据称为“图块”。您将需要创建一个新的切片图层并将其添加到地图中。

要创建新的切片图层，您必须首先传递切片服务器 URL。

那里有许多瓦片服务器提供商，但本教程将使用 OpenStreetMap 瓦片服务器。

与地图对象类似，瓦片层也接受可自定义的选项。

对于本教程，您将设置最大和最小缩放级别。您还将提供地图数据的归属信息。

重新访问 map.component.ts 文件并将切片图层添加到地图：

src/app/map/map.component.ts

import { Component, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements AfterViewInit {
  private map;

  private initMap(): void {
    this.map = L.map('map', {
      center: [ 39.8282, -98.5795 ],
      zoom: 3
    });

    const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      minZoom: 3,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });

    tiles.addTo(this.map);
  }

  constructor() { }

  ngAfterViewInit(): void {
    this.initMap();
  }
}

此代码将最大缩放设置为 18，最小缩放设置为 3，以及图块的归属文本。

然后，在 Web 浏览器中打开应用程序 (localhost:4200)：

瓷砖正在加载，但似乎没有正确放置。您需要在构建中包含 Leaflet 样式表。

打开 angular.json 文件并添加 leaflet.css：

角.json

{
  // ...
  "projects": {
    "angular-leaflet-example": {
      // ...
      "architect": {
        "build": {
          // ...
          "options": {
            // ...
            "styles": [
              "./node_modules/leaflet/dist/leaflet.css",
              "src/styles.css"
            ],
            // ..
          },
          // ...
        },
        // ...
      }
    }},
  "defaultProject": "angular-leaflet-example"
}

如果您当前正在运行 npm start，则需要停止进程并重新启动，以便刷新基本样式表。

最后，在您的网络浏览器中打开应用程序 (localhost:4200)：

您现在拥有一个支持缩放和拖动的地图。

结论

在本教程中，您学习了如何在 Angular 应用程序中使用 Leaflet。

有关 Leaflet 高级用法的灵感，请考虑查看官方网站上的示例。

继续阅读本系列的第 2 部分关于使用 Angular 和 Leaflet 。