简介
LEAFLE是一个JAVASCRIPT库，用于创建地图。它有很多不错的功能，而且对移动非常友好。
<$>[备注] 注意： 这是关于使用角度和传单的四部分系列的第一部分。 <$>
您可以使用此库显示支持放大和缩小以及通过单击和拖动进行平移的地图。
在本教程中，您将学习如何将传单集成到一个角度应用程序中。
前提条件
要完成本教程，您需要：
- 本地安装Node.js，可以按照如何安装Node.js并创建本地开发环境操作。
- 熟悉设置Angular项目和使用Angular组件可能会有所帮助。
本教程使用Node v15.12.0、npmv7.7.4、angularv11.2.7和leafletv1.7.1进行了验证。
第一步-设置项目
您可以使用@ANGLE/CLI创建一个新的角度投影。
在您的终端窗口中，使用以下命令：
1npx @angular/cli new angular-leaflet-example --style=css --routing=false --skip-tests
这将配置一个新的角度项目，将样式设置为)，不布线，并跳过测试。
导航到新创建的项目目录：
1cd angular-leaflet-example
在您的项目文件夹中，运行以下命令来安装leaflet：
1npm install [email protected]
搭建好这个脚手架后，您就可以开始处理地图组件了。
第二步-创建地图组件
现在，您可以创建自定义地图组件：
1npx @angular/cli generate component map --skip-tests
该命令将生成四个新文件：map.Component.css、map.Component.html和map.Component.ts。它还将更新app.mode.ts文件以使用这个新组件。
接下来，打开map.Component.ts并将内容替换为以下几行代码：
1[label src/app/map/map.component.html]
2<div class="map-container">
3 <div class="map-frame">
4 <div id="map"></div>
5 </div>
6</div>
然后，打开map.component.css并将内容替换为以下代码行：
1[label src/app/map/map.component.css]
2.map-container {
3 position: absolute;
4 top: 0;
5 left: 0;
6 right: 0;
7 bottom: 0;
8 margin: 30px;
9}
10
11.map-frame {
12 border: 2px solid black;
13 height: 100%;
14}
15
16#map {
17 height: 100%;
18}
标记和样式的这种组合将创建一个带有.map-tainer类的最外层的‘div`，它将定位地图以占据屏幕上的可用空间。
它还将创建一个id为# map的div。在这里使用id而不是class是很重要的，因为Leaflet需要一个id来放置map。
接下来，打开map.Component.ts，导入单张包：
1[label src/app/map/map.component.ts]
2import { Component, OnInit } from '@angular/core';
3import * as L from 'leaflet';
4
5@Component({
6 selector: 'app-map',
7 templateUrl: './map.component.html',
8 styleUrls: ['./map.component.css']
9})
10export class MapComponent implements OnInit {
11 constructor() { }
12
13 ngOnInit(): void { }
14}
映射div需要存在于DOM中，然后才能引用它来创建映射。这在AfterView Init生命周期hook.]期间是可能的扩展您的组件实现AfterViewInit，并在您的组件中添加ngAfterViewInit()函数：
1[label src/app/map/map.component.ts]
2import { Component, AfterViewInit } from '@angular/core';
3import * as L from 'leaflet';
4
5@Component({
6 selector: 'app-map',
7 templateUrl: './map.component.html',
8 styleUrls: ['./map.component.css']
9})
10export class MapComponent implements AfterViewInit {
11 constructor() { }
12
13 ngAfterViewInit(): void { }
14}
让我们创建一个单独的私有函数initMap()来隔离所有的map初始化。
在此函数中，您将需要创建一个新的LEAFLE map对象。API还允许您在其中定义选项。
在本教程中，您将设置地图的中心和开始缩放值。
中心将是位于北纬39.828175°98.579500°W的毗邻联合States](https://en.wikipedia.org/wiki/Geographic_center_of_the_contiguous_United_States)的地理中心。
Leaflet使用的十进制坐标系假设本初子午线以西的任何东西都是负数，因此实际的中心坐标将是[ 39.8282，-98.5795 ]。
并且缩放级别将被设置为3。
为map对象声明一个变量，创建map，从ngAfterViewinit调用：
1[label src/app/map/map.component.ts]
2import { Component, AfterViewInit } from '@angular/core';
3import * as L from 'leaflet';
4
5@Component({
6 selector: 'app-map',
7 templateUrl: './map.component.html',
8 styleUrls: ['./map.component.css']
9})
10export class MapComponent implements AfterViewInit {
11 private map;
12
13 private initMap(): void {
14 this.map = L.map('map', {
15 center: [ 39.8282, -98.5795 ],
16 zoom: 3
17 });
18 }
19
20 constructor() { }
21
22 ngAfterViewInit(): void {
23 this.initMap();
24 }
25}
接下来，打开app.Component.html，将生成的内容替换为新组件：
1[label src/app/app.component.html]
2<app-map></app-map>
然后运行应用程序：
1npm start
然后，在您的Web浏览器中打开应用程序(本地主机：4200)：
您的应用程序将显示一个空的div，并且缺少地图。
使用LEAFLE，您可以将数据可视化为_Layers_。当你描绘一张地图时，你想到的那种数据被称为瓷砖。您将需要创建一个新的瓦片层并将其添加到地图。
要创建新的切片图层，必须首先传递切片服务器URL。
市面上有很多磁贴服务器提供商，但本教程将使用OpenStreetMap磁贴服务器。
与地图对象类似，瓷砖层也接受可自定义选项。
在本教程中，您将设置最大和最小缩放级别。您还将提供地图数据的属性信息。
重新访问map.component.ts文件并将平铺层添加到地图中：
1[label src/app/map/map.component.ts]
2import { Component, AfterViewInit } from '@angular/core';
3import * as L from 'leaflet';
4
5@Component({
6 selector: 'app-map',
7 templateUrl: './map.component.html',
8 styleUrls: ['./map.component.css']
9})
10export class MapComponent implements AfterViewInit {
11 private map;
12
13 private initMap(): void {
14 this.map = L.map('map', {
15 center: [ 39.8282, -98.5795 ],
16 zoom: 3
17 });
18
19 const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
20 maxZoom: 18,
21 minZoom: 3,
22 attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
23 });
24
25 tiles.addTo(this.map);
26 }
27
28 constructor() { }
29
30 ngAfterViewInit(): void {
31 this.initMap();
32 }
33}
此代码将把最大缩放设置为18，将最小缩放设置为3，并将平铺的属性文本设置为。
然后，在您的Web浏览器中打开应用程序(本地主机：4200)：
磁贴正在加载，但似乎放置不正确。您将需要在构建中包括单张样式表。
打开angular.json文件，添加leaflet.css：
1[label angular.json]
2{
3 // ...
4 "projects": {
5 "angular-leaflet-example": {
6 // ...
7 "architect": {
8 "build": {
9 // ...
10 "options": {
11 // ...
12 "styles": [
13 "./node_modules/leaflet/dist/leaflet.css",
14 "src/styles.css"
15 ],
16 // ..
17 },
18 // ...
19 },
20 // ...
21 }
22 }},
23 "defaultProject": "angular-leaflet-example"
24}
如果您当前正在运行npm start，则需要停止该进程并重新启动，以便刷新基本样式表。
最后，在Web浏览器（localhost：4200)中打开应用程序：
地图切片的完整演示屏幕截图
现在，您拥有了一个支持缩放和拖动的地图。
结论
在本教程中，您学习了如何在角度应用程序中使用LEAFLE。
要获得有关单张高级用法的灵感，请考虑查看官方网站上的示例.
继续关于使用ANGLE和Leaflet.的本系列文章的第2部分