如何使用Leaflet在Angular中构建地图，第2部分：标记服务

介绍

Leaflet 支持 标记。 这些是放置在地图上的指示器，可以包含信息。 这提供了一种在地图上突出显示地标和目的地的方法。

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

在本教程中，您将学习如何使用服务向地图添加标记以管理标记逻辑。

先决条件

要完成本教程，您需要：

• 本教程直接建立在 上一部分 中的安装和步骤之上。

第 1 步 — 下载 GeoJSON 数据

本教程将绘制美国各州首府的 GeoJSON 数据。 它还将包括一些关于州名、首都名称和人口的额外元数据。

笔记： usa-capitals.geojson 文件可在随附的项目 repo 中找到.

在assets目录下新建data子目录：

mkdir src/assets/data

然后，将 usa-capitals.geojson 文件保存在此目录中。

第 2 步 - 创建标记服务

此时，您应该在 Angular 应用程序中实现了 Leaflet。

使用终端窗口导航到项目目录。 然后，运行以下命令以生成新服务：

npx @angular/cli generate service marker --skip-tests

这将创建一个新文件：marker.service.ts。

接下来，您将在 app.module.ts 中添加此新服务作为提供程序。 您还将从 assets 文件夹加载数据，因此您需要包含 HttpClientModule。

在代码编辑器中打开 app.module.ts 并进行以下更改：

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { HttpClientModule } from '@angular/common/http';
import { MarkerService } from './marker.service';

import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component';

@NgModule({
  declarations: [
    AppComponent,
    MapComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    MarkerService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

您的应用程序现在支持您的新 MarkerService。

第 3 步 - 加载和绘制标记

接下来，在代码编辑器中打开新创建的 marker.service.ts 并将 HttpClient 添加到构造函数中：

src/app/marker.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class MarkerService {
  capitals: string = '/assets/data/usa-capitals.geojson';

  constructor(private http: HttpClient) { }
}

创建一个将加载 GeoJSON 数据并创建标记的新函数。 此函数将传入传单地图作为参数。

修改 marker.service.ts 以导入 Leaflet 并声明一个 makeCapitalMarkers 函数：

src/app/marker.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as L from 'leaflet';

@Injectable({
  providedIn: 'root'
})
export class MarkerService {
  capitals: string = '/assets/data/usa-capitals.geojson';

  constructor(private http: HttpClient) { }

  makeCapitalMarkers(map: L.map): void { }
}

使用 HttpClient 获取数据，subscribe 得到结果。

获得数据后，您将遍历每个要素，构建一个标记，并将其添加到地图中。

src/app/marker.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as L from 'leaflet';

@Injectable({
  providedIn: 'root'
})
export class MarkerService {
  capitals: string = '/assets/data/usa-capitals.geojson';

  constructor(private http: HttpClient) {
  }

  makeCapitalMarkers(map: L.map): void {
    this.http.get(this.capitals).subscribe((res: any) => {
      for (const c of res.features) {
        const lon = c.geometry.coordinates[0];
        const lat = c.geometry.coordinates[1];
        const marker = L.marker([lat, lon]);
        
        marker.addTo(map);
      }
    });
  }
}

此代码处理加载和添加标记到地图的逻辑。

现在，您将不得不从 MapComponent 调用此方法：

src/app/map/map.component.ts

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

@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(private markerService: MarkerService) { }

  ngAfterViewInit(): void {
    this.initMap();
    this.markerService.makeCapitalMarkers(this.map);
  }
}

如果此时您要运行应用程序，您会在控制台中遇到两个错误：

Outputmarker-icon-2x.png:1 GET http://localhost:4200/marker-icon-2x.png 404 (Not Found)
marker-shadow.png:1 GET http://localhost:4200/marker-shadow.png 404 (Not Found)

您需要将 Leaflet 的资产导入您的项目以引用 marker-icon-2x.png 和 marker-shadow.png 图像文件。

打开 angular.json 文件并添加 Leaflet images 目录：

角.json

{
  // ...
  "projects": {
    "angular-leaflet-example": {
      // ...
      "architect": {
        "build": {
          // ...
          "options": {
            // ...
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/leaflet/dist/images/",
                "output": "./assets"
              }
            ],
            // ..
          },
          // ...
        },
        // ...
      }
    }},
  "defaultProject": "angular-leaflet-example"
}

此代码将在本地复制 Leaflet 的标记图像。

然后，重新访问 map.component.ts 并定义图标：

src/app/map/map.component.ts

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

const iconRetinaUrl = 'assets/marker-icon-2x.png';
const iconUrl = 'assets/marker-icon.png';
const shadowUrl = 'assets/marker-shadow.png';
const iconDefault = L.icon({
  iconRetinaUrl,
  iconUrl,
  shadowUrl,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  tooltipAnchor: [16, -28],
  shadowSize: [41, 41]
});
L.Marker.prototype.options.icon = iconDefault;

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

  constructor(private markerService: MarkerService) { }

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

  ngAfterViewInit(): void {
    this.initMap();
    this.markerService.makeCapitalMarkers(this.map);
  }
}

保存您的更改。 然后，停止您的应用程序并重新启动它。 在 Web 浏览器中打开应用程序 (localhost:4200) 并观察州首府的标记：

此时，您有一个支持默认标记的地图。

第 4 步 - 显示圆圈标记

在下一步中，您会将标记从图标更改为圆圈。 然后缩放圆圈的大小以反映州议会大厦的人口。

打开 MarkerService 并创建一个 makeCapitalCircleMarkers() 函数。 它将与 makrCapitalMarkers() 函数非常相似。 代替 Leaflet 的 marker 方法，您将使用 circleMarker 方法：

src/app/marker.service.ts

makeCapitalCircleMarkers(map: L.map): void {
  this.http.get(this.capitals).subscribe((res: any) => {
    for (const c of res.features) {
      const lon = c.geometry.coordinates[0];
      const lat = c.geometry.coordinates[1];
      const circle = L.circleMarker([lat, lon]);
      
      circle.addTo(map);
    }
  });
}

然后，在MapComponent中调用这个函数：

src/app/map/map.component.ts

ngAfterViewInit(): void {
  this.initMap();
  // this.markerService.makeCapitalMarkers(this.map);
  this.markerService.makeCapitalCircleMarkers(this.map);
}

保存这些更改并在 Web 浏览器中打开应用程序 (localhost:4200)：

图标现在已替换为圆圈。

circleMarker 接受第三个可选参数。 此对象可以包含 radius 属性。 在 MarkerService 中，修改 makeCapitalCircleMarkers 函数以使用 20 的半径：

const circle = L.circleMarker([lat, lon], { radius: 20 }).addTo(map);

此代码将所有半径的大小设置为相同的值 (20)。

接下来，您将更改半径以反映州府的人口：

static scaledRadius(val: number, maxVal: number): number {
  return 20 * (val / maxVal);
}

该函数接受一个值（人口）、一个最大值（最大人口），并返回一个范围为 [0 - 20] 的半径。

您将使用扩展运算符和 map 找到人口最多的首都：

const maxPop = Math.max(...res.features.map(x => x.properties.population), 0);

从 GeoJSON 数据来看，最大的人口将是：“凤凰城，亚利桑那州”（1626078）。

最后，您将使用 ScaledRadius 作为半径函数将它们放在一起。

在代码编辑器中打开 MarkerService 并进行以下更改：

src/app/marker.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as L from 'leaflet';

@Injectable({
  providedIn: 'root'
})
export class MarkerService {
  capitals: string = '/assets/data/usa-capitals.geojson';

  constructor(private http: HttpClient) { }

  static scaledRadius(val: number, maxVal: number): number {
    return 20 * (val / maxVal);
  }

  makeCapitalMarkers(map: L.map): void {
    this.http.get(this.capitals).subscribe((res: any) => {
      for (const c of res.features) {
        const lon = c.geometry.coordinates[0];
        const lat = c.geometry.coordinates[1];
        const marker = L.marker([lat, lon]);
        
        marker.addTo(map);
      }
    });
  }

  makeCapitalCircleMarkers(map: L.map): void {
    this.http.get(this.capitals).subscribe((res: any) => {

      const maxPop = Math.max(...res.features.map(x => x.properties.population), 0);

      for (const c of res.features) {
        const lon = c.geometry.coordinates[0];
        const lat = c.geometry.coordinates[1];
        const circle = L.circleMarker([lat, lon], {
          radius: MarkerService.scaledRadius(c.properties.population, maxPop)
        });
        
        circle.addTo(map);
      }
    });
  }
}

保存您的更改。 然后，停止您的应用程序并重新启动它。 在 Web 浏览器中打开应用程序 (localhost:4200) 并观察州首府的新比例圆圈标记：

您现在有了一个支持标记的地图。

结论

在这篇文章中，您创建了一个用于加载数据和构建标记的标记服务。 您学习了如何创建两种类型的标记：L.marker 和 L.circleMarker。 最后，您学习了如何通过传递半径函数来定义每个圆形标记的大小。

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