Leaflet根据坐标画圆形区域

在做地图应用时，有时需要根据指定的坐标来画一个圆形区域，比如签到打卡类的应用，此时我们可以使用 leaflet.Circle 来在在指定坐标上创建一个圆并添加到的地图上，其中可以通过 radius 属性可以指定区域半径，比如:

const circle = leaflet.circle([lat, lng], {
    color: 'red',
    fillColor: 'red',
    fillOpacity: 0.5,
    radius: 100,
}).addTo(this.map);

完整例子如下

import { Component, OnInit, AfterViewInit } from "@angular/core";
import * as leaflet from "leaflet";

@Component({
    selector: "app-map-circle",
    templateUrl: "./map-circle.component.html",
    styleUrls: ["./map-circle.component.css"],
})
export class MapCircleComponent 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], 16);

        const tiles = leaflet.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
            maxZoom: 19,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        });
        tiles.addTo(this.map);

        let marker: leaflet.Marker | null = null;
        let circle: leaflet.Circle | null = null;

        this.map.on("click", (e) => {
            console.log(e.latlng);

            if (marker) {
                this.map.removeLayer(marker);
            }
            const icon = leaflet.icon({
                iconUrl: "media/marker-icon.png",
                iconSize: [25, 41],
                iconAnchor: [12, 41]});
            marker = leaflet.marker([e.latlng.lat, e.latlng.lng], {icon: icon}).addTo(this.map);

            if (circle) {
                this.map.removeLayer(circle);
            }
            circle = this.createCircle(e.latlng.lat, e.latlng.lng, "red").addTo(this.map);
        });
    }

    private createCircle(lat: number, lng: number, color: string): leaflet.Circle {
        return leaflet.circle([lat, lng], {
            color: color,
            fillColor: color,
            fillOpacity: 0.5,
            radius: 100,
        });
    }
}