在Angular Google Maps数据层LayerClick事件中获取要素ID

Question

我已成功将GeoJSON文件添加到angular-google-maps应用程序的数据层，并希望当用户单击在该层上绘制的一个多边形时能够访问该要素的属性和ID。但是，尝试访问feature参数的layerClick属性时收到错误。

这里是一个简短的示例，概述了问题：

home.component.html：

<agm-map [latitude]="latitude" [longitude]="longitude">
  <agm-data-layer [geoJson]="geoJson" [style]="styleFunc" (layerClick)="onClick($event)"></agm-data-layer>
</agm-map>

home.component.ts：

export class HomeComponent {
    latitude: number = 5;
    longitude: number = 5;
    zoom: number = 4;
    geoJson = JSON.parse(`
    {
      "type": "FeatureCollection",
      "features": [{
          "type": "Feature",
          "id": 10,
          "geometry": {
            "type": "Polygon",
            "coordinates": [[[1.0, 1.0], [1.0, 10.0], [10.0, 10.0], [10.0, 1.0], [1.0, 1.0]]]
          },
          "properties": {
            "name": "Alpha",
            "color": "#FF0000"
          }
        }, {
          "type": "Feature",
          "id": 20,
          "geometry": {
            "type": "Polygon",
            "coordinates": [[[11.0, 11.0], [11.0, 20.0], [20.0, 20.0], [20.0, 11.0], [11.0, 11.0]]]
          },
          "properties": {
            "name": "Bravo",
            "color": "#0000FF"
          }
        }]
    }`);

    styleFunc(feature: any): any {
        return ({
            clickable: true,
            fillColor: feature.getProperty('color'),
            strokeWeight: 1
        });
    }

    onClick(clickEvent: DataMouseEvent): void {
        console.log('Click Event Detected');
        console.log(clickEvent.latLng.toString());
        console.log(clickEvent.feature.id);
        console.log(clickEvent.feature.properties.name);
    }

地图正在按预期方式显示和着色多边形：

但是，单击其中一个阴影区域（以下示例是红色区域）时，我收到以下错误：

我正在使用@agm/core版本"~1.0.0-beta.7"和Angular 8.2，它们在ASP.Net Core 3.0应用程序中运行。

UPDATED 10/29/19

按下面的问题，我尝试了以下修改：

    onClick(clickEvent: DataMouseEvent): void {
        console.log('Click Event Detected');
        console.log(clickEvent.latLng.toString());
        console.log(clickEvent.feature.getId());
        console.log(clickEvent.feature.getProperty('name'));
    }

进行了这些更改之后，IntelliSense在getId（）和getProperty（）上均报告了一个错误，表示这些属性不存在。该项目的构建没有错误，但是在启动时收到404错误，并且在输出窗口中出现以下错误：

Microsoft.AspNetCore.SpaServices：错误：ERROR insrc / app / home / home.component.ts（51,40）：错误TS2339：属性“ getId”在“功能”类型上不存在。src / app / home / home.component.ts（52,40）：错误TS2339：属性类型“功能”上不存在“ getProperty”。

Answer 1

您可以使用getId() + getProperty('propName')函数获取ID和道具：