在Angular中使用Leaflet构建地图应用

Leaflet是一个用于创建地图的JavaScript库，它包含许多功能，并且非常适用于移动设备。

准备

nodejs: v20.15.0
npm: 10.7.0
angular: 19.2.10

创建一个地图应用工程

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

提示 “Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?” 的时候选择 No

创建完成后，启动一下，验证工程可以正常运行。

cd my-leaflet-app
npm start

然后访问 http://localhost:4200/ 验证。

安装leaflet

npm install leaflet @types/leaflet

创建地图组件

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

编辑 map.component.ts 文件

import { Component, OnInit, AfterViewInit } from "@angular/core";
import * as leaflet from "leaflet";@Component({selector: "app-map",templateUrl: "./map.component.html",styleUrls: ["./map.component.css"],
})
export class MapComponent implements OnInit, AfterViewInit {map!: leaflet.Map;constructor() {}ngOnInit(): void {}ngAfterViewInit(): void {this.initMap();}private initMap(): void {this.map = leaflet.map("map").setView([51.5, -0.09], 13);const tiles = leaflet.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png",{maxZoom: 19,minZoom: 3,},);tiles.addTo(this.map);}
}

编辑 map.component.html 文件

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

编辑 map.component.css 文件

.map-container {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: 30px;
}.map-frame {border: 2px solid black;height: 300px;width: 500px;
}#map {height: 100%;
}

使用地图组件

编辑 app.component.ts 文件，导入地图组建

import { Component } from "@angular/core";
import { MapComponent } from "./map/map.component";@Component({selector: "app-root",imports: [MapComponent],templateUrl: "./app.component.html",styleUrl: "./app.component.css",
})
export class AppComponent {title = "my-leaflet-app";
}

编辑 app.component.html 文件，在视图中添加地图组件

<app-map></app-map>

最后修改 angular.json 文件，在编译选项中添加 “./node_modules/leaflet/dist/leaflet.css”，如下：

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

验证

启动服务 npm start，然后访问 http://localhost:4200/。