Angular中如何通过弹窗显示Leaflet绘制的多边形坐标？

先处理坐标格式转换 #

拿到的polygonCoordinates是二维LatLng数组（多边形可能包含内环），先转成易读的字符串格式：

// 格式化坐标数组为字符串
formatPolygonCoords(coords: L.LatLng[][]): string {
  return coords.map((ring, index) => {
    const ringStr = ring.map(latlng => `(${latlng.lat.toFixed(6)}, ${latlng.lng.toFixed(6)})`).join('\n');
    return index === 0 ? `外环坐标:\n${ringStr}` : `内环${index}坐标:\n${ringStr}`;
  }).join('\n\n');
}

方法1：原生alert快速实现 #

适合测试或简单场景，直接在onDrawCreated回调里调用：

onDrawCreated(event: L.DrawEvents.Created) {
  const polygon = event.layer as L.Polygon;
  const polygonCoordinates = polygon.getLatLngs() as L.LatLng[][];
  
  const formattedCoords = this.formatPolygonCoords(polygonCoordinates);
  alert(formattedCoords);
}

方法2：Angular Material MatDialog（推荐） #

如果项目用了Angular Material，用对话框展示更美观：

1. 确保模块中导入MatDialogModule
2. 在组件中注入MatDialog：

import { MatDialog } from '@angular/material/dialog';

constructor(private dialog: MatDialog) {}

3. 在回调中打开对话框：

onDrawCreated(event: L.DrawEvents.Created) {
  const polygon = event.layer as L.Polygon;
  const polygonCoordinates = polygon.getLatLngs() as L.LatLng[][];
  const formattedCoords = this.formatPolygonCoords(polygonCoordinates);

  this.dialog.open(DialogContentExampleDialog, {
    data: formattedCoords,
    width: '500px',
    height: 'auto'
  });
}

4. 简单的对话框内容组件示例：

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  template: `<pre>{{ data }}</pre>`
})
export class DialogContentExampleDialog {
  constructor(@Inject(MAT_DIALOG_DATA) public data: string) {}
}

方法3：自定义弹窗组件 #

如果项目有自己的弹窗样式，直接调用自定义组件：

1. 提前准备好自定义弹窗组件（比如CustomAlertComponent），支持传入文本内容
2. 在回调中触发：

onDrawCreated(event: L.DrawEvents.Created) {
  const polygon = event.layer as L.Polygon;
  const polygonCoordinates = polygon.getLatLngs() as L.LatLng[][];
  const formattedCoords = this.formatPolygonCoords(polygonCoordinates);

  // 假设自定义弹窗有open方法，传入内容
  this.customAlertService.open(formattedCoords);
}

内容的提问来源于stack exchange，提问作者Nil