angular - 属性 'features' 在类型 'Feature' 上不存在

Question

我是 Angular 的新手，我正在尝试使用 Angular/d3 构建德国 map 。 map 数据存储在 Topojson 文件 plz_map_ger.json 中:

{
"type": "Topology",
"arcs": [...],
"transform": {...},
"objects": {
      "plz5stellig": {...}
      }
 }

这是我绘制 map 的代码:

import * as d3 from "d3";
import * as t from 'topojson';

...

d3.json("../../assets/plz_map_ger.json")
  .then(function(top:any) {
    g.selectAll('path')
      .data(t.feature(top, top.objects.plz5stellig).features)
      .enter()
      .append('path')
      .attr('d', path)
      .attr("class","kreisgrenzen")
      .on("click", function() {
        d3.select(this).attr("class","selected-kreis");
      });

但是我收到以下编译错误:

error TS2339: Property 'features' does not exist on type 'Feature<Point, { [name: string]: any; }>'.

我需要做什么来解决这个问题？

编辑:
当我将鼠标悬停在 VS Code 中的错误上时，我收到以下消息:

Property 'features' does not exist on type 'Feature<Point, { [name: string]: any; }>'.ts(2339)

我使用以下由 mapshaper.org 创建的 Topojson 文件(这个文件有点简化，但结构保持不变):
gist.github.com/.../plz_map_ger.json

Answer 1

根据 the types函数feature()返回 Feature或 FeatureCollection .只有FeatureCollection将有 .features您正在寻找的属性。

检查 code of the TopoJSON Package (第 4 - 8 行)我们可以看到 a FeatureCollection仅返回，如果 topology 有 GeometryCollection作为其 type .

export default function(topology, o) {
  return o.type === "GeometryCollection"
  ? {type: "FeatureCollection", features: o.geometries.map(function(o) { return feature(topology, o); })}
      : feature(topology, o);
}

您正在加载 topology异步，所以编译器不可能知道它是否 .type是 GeometryCollection或不。

为了解决这个问题，您需要安装 GeoJSON 类型 ( npm i @types/geojson )。

然后您可以设置临时变量的类型

    ...
    d3.json("../../assets/plz_map_ger.json")
      .then(function(top:any) {

          // This row sets the temporary variable
          let mapFeatures: FeatureCollection = t.feature(top, top.objects.plz5stellig)

           g.selectAll('path')

          // We use the temporary variable here
          .data(mapFeatures.features)
          .enter()
          .append('path')
          .attr('d', path)
          .attr("class","kreisgrenzen")
          .on("click", function() {
            d3.select(this).attr("class","selected-kreis");
          });
      });

或者您可以显式地将集合转换为功能集合(感谢@altocumulus)

  ...
    d3.json("../../assets/plz_map_ger.json")
      .then(function(top:any) {
           g.selectAll('path')
          // explicit cast
          .data((t.feature(top, top.objects.plz5stellig) as GeometryCollection).features)
          .enter()
          .append('path')
          .attr('d', path)
          .attr("class","kreisgrenzen")
          .on("click", function() {
            d3.select(this).attr("class","selected-kreis");
          });
      });