如何在ngx-leaflet中放置热图？

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

@Component({
  selector: 'app-map',
  template: '<div id="map"></div>',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    // 创建Leaflet地图
    const map = L.map('map').setView([51.505, -0.09], 13);

    // 添加瓦片图层
    const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
    }).addTo(map);

    // 添加热图图层
    const heatLayer = L.heatLayer([[51.5, -0.09, 0.5], [51.51, -0.1, 0.2]], {
      radius: 25,
      gradient: { 0.4: 'blue', 0.65: 'lime', 1: 'red' }
    }).addTo(map);
  }
}