Javascript Can'；t绑定到'；油漆'；因为它不是'；t'的已知属性；mgl层'；使用角度为9的mapbox

我有angular 9+我正在使用最新的mapbox版本

所以我想切换一些数据：在本例中是countours和museums

所以我安装了包：“@types/mapbox gl”：“^1.12.5”

我在app.module.ts中包括如下内容：

 NgxMapboxGLModule.withConfig({
      accessToken:
        'pk.ljljlkjnA5ZzAyYnVtaGkifQ.LfTgQzPszKiyVQjKiUFsyg', // accessToken can also be set per map (accessToken input of mgl-map)
    }),

@Component({
  template: `
    <mgl-map
      style="mapbox://styles/mapbox/streets-v9"
      [zoom]="[15]"
      [center]="[-71.97722138410576, -13.517379300798098]"
    >
      <mgl-vector-source id="museums" url="mapbox://mapbox.2opop9hr"> </mgl-vector-source>
      <mgl-vector-source id="contours" url="mapbox://mapbox.mapbox-terrain-v2"> </mgl-vector-source>
      <mgl-layer
        id="museums"
        type="circle"
        source="museums"
        [layout]="layouts.museums"
        [paint]="{
          'circle-radius': 8,
          'circle-color': 'rgba(55,148,179,1)'
        }"
        sourceLayer="museum-cusco"
      >
      </mgl-layer>
      <mgl-layer
        id="contours"
        type="line"
        source="contours"
        [layout]="layouts.contours"
        [paint]="{
          'line-color': '#877b59',
          'line-width': 1
        }"
        sourceLayer="contour"
      >
      </mgl-layer>
    </mgl-map>
    <div class="menu">
     <!--  <mat-button-toggle [checked]="true" value="contours" (change)="toggleLayer($event)"
        >contours</mat-button-toggle
      >
      <mat-button-toggle [checked]="true" value="museums" (change)="toggleLayer($event)"
        >museums</mat-button-toggle -->
      >
    </div>
  `,
  styleUrls: ['./toggle-layer.component.scss'],
})
export class ToggleLayersComponent implements OnInit {
  layouts = {
    contours: {
      visibility: 'visible',
      'line-join': 'round',
      'line-cap': 'round',
    },
    museums: {
      visibility: 'visible',
    },
  };

  ngOnInit() {}

  toggleLayer(evt: {value: 'contours' | 'museums'}) {
    const key = evt.value as 'contours';

    this.layouts[key] = {
      ...this.layouts[key],
      visibility: this.layouts[key].visibility === 'visible' ? 'none' : 'visible',
    };
  }
}

@Component({
  template: `
    <mgl-map
      style="mapbox://styles/mapbox/streets-v9"
      [zoom]="[15]"
      [center]="[-71.97722138410576, -13.517379300798098]"
    >
      <mgl-vector-source id="museums" url="mapbox://mapbox.2opop9hr"> </mgl-vector-source>
      <mgl-vector-source id="contours" url="mapbox://mapbox.mapbox-terrain-v2"> </mgl-vector-source>
      <mgl-layer
        id="museums"
        type="circle"
        source="museums"
        layout="layouts.museums"
        paint="{
          'circle-radius': 8,
          'circle-color': 'rgba(55,148,179,1)'
        }"
        sourceLayer="museum-cusco"
      >
      </mgl-layer>
      <mgl-layer
        id="contours"
        type="line"
        source="contours"
        layout="layouts.contours"
        paint="{
          'line-color': '#877b59',
          'line-width': 1
        }"
        sourceLayer="contour"
      >
      </mgl-layer>
    </mgl-map>

    <div class="menu">></div>
  `,
  styleUrls: ['./toggle-layer.component.scss'],
})

我有这样一个组件：

 NgxMapboxGLModule.withConfig({
      accessToken:
        'pk.ljljlkjnA5ZzAyYnVtaGkifQ.LfTgQzPszKiyVQjKiUFsyg', // accessToken can also be set per map (accessToken input of mgl-map)
    }),

@Component({
  template: `
    <mgl-map
      style="mapbox://styles/mapbox/streets-v9"
      [zoom]="[15]"
      [center]="[-71.97722138410576, -13.517379300798098]"
    >
      <mgl-vector-source id="museums" url="mapbox://mapbox.2opop9hr"> </mgl-vector-source>
      <mgl-vector-source id="contours" url="mapbox://mapbox.mapbox-terrain-v2"> </mgl-vector-source>
      <mgl-layer
        id="museums"
        type="circle"
        source="museums"
        [layout]="layouts.museums"
        [paint]="{
          'circle-radius': 8,
          'circle-color': 'rgba(55,148,179,1)'
        }"
        sourceLayer="museum-cusco"
      >
      </mgl-layer>
      <mgl-layer
        id="contours"
        type="line"
        source="contours"
        [layout]="layouts.contours"
        [paint]="{
          'line-color': '#877b59',
          'line-width': 1
        }"
        sourceLayer="contour"
      >
      </mgl-layer>
    </mgl-map>
    <div class="menu">
     <!--  <mat-button-toggle [checked]="true" value="contours" (change)="toggleLayer($event)"
        >contours</mat-button-toggle
      >
      <mat-button-toggle [checked]="true" value="museums" (change)="toggleLayer($event)"
        >museums</mat-button-toggle -->
      >
    </div>
  `,
  styleUrls: ['./toggle-layer.component.scss'],
})
export class ToggleLayersComponent implements OnInit {
  layouts = {
    contours: {
      visibility: 'visible',
      'line-join': 'round',
      'line-cap': 'round',
    },
    museums: {
      visibility: 'visible',
    },
  };

  ngOnInit() {}

  toggleLayer(evt: {value: 'contours' | 'museums'}) {
    const key = evt.value as 'contours';

    this.layouts[key] = {
      ...this.layouts[key],
      visibility: this.layouts[key].visibility === 'visible' ? 'none' : 'visible',
    };
  }
}

@Component({
  template: `
    <mgl-map
      style="mapbox://styles/mapbox/streets-v9"
      [zoom]="[15]"
      [center]="[-71.97722138410576, -13.517379300798098]"
    >
      <mgl-vector-source id="museums" url="mapbox://mapbox.2opop9hr"> </mgl-vector-source>
      <mgl-vector-source id="contours" url="mapbox://mapbox.mapbox-terrain-v2"> </mgl-vector-source>
      <mgl-layer
        id="museums"
        type="circle"
        source="museums"
        layout="layouts.museums"
        paint="{
          'circle-radius': 8,
          'circle-color': 'rgba(55,148,179,1)'
        }"
        sourceLayer="museum-cusco"
      >
      </mgl-layer>
      <mgl-layer
        id="contours"
        type="line"
        source="contours"
        layout="layouts.contours"
        paint="{
          'line-color': '#877b59',
          'line-width': 1
        }"
        sourceLayer="contour"
      >
      </mgl-layer>
    </mgl-map>

    <div class="menu">></div>
  `,
  styleUrls: ['./toggle-layer.component.scss'],
})

那么我要改变什么呢

但是intellisens查找例如：[布局]。。。 如果我站在[layout]上，按f12键，我就会进入定义。但我不能建立一个有棱角的。 多谢各位

我现在是这样的：

 NgxMapboxGLModule.withConfig({
      accessToken:
        'pk.ljljlkjnA5ZzAyYnVtaGkifQ.LfTgQzPszKiyVQjKiUFsyg', // accessToken can also be set per map (accessToken input of mgl-map)
    }),

@Component({
  template: `
    <mgl-map
      style="mapbox://styles/mapbox/streets-v9"
      [zoom]="[15]"
      [center]="[-71.97722138410576, -13.517379300798098]"
    >
      <mgl-vector-source id="museums" url="mapbox://mapbox.2opop9hr"> </mgl-vector-source>
      <mgl-vector-source id="contours" url="mapbox://mapbox.mapbox-terrain-v2"> </mgl-vector-source>
      <mgl-layer
        id="museums"
        type="circle"
        source="museums"
        [layout]="layouts.museums"
        [paint]="{
          'circle-radius': 8,
          'circle-color': 'rgba(55,148,179,1)'
        }"
        sourceLayer="museum-cusco"
      >
      </mgl-layer>
      <mgl-layer
        id="contours"
        type="line"
        source="contours"
        [layout]="layouts.contours"
        [paint]="{
          'line-color': '#877b59',
          'line-width': 1
        }"
        sourceLayer="contour"
      >
      </mgl-layer>
    </mgl-map>
    <div class="menu">
     <!--  <mat-button-toggle [checked]="true" value="contours" (change)="toggleLayer($event)"
        >contours</mat-button-toggle
      >
      <mat-button-toggle [checked]="true" value="museums" (change)="toggleLayer($event)"
        >museums</mat-button-toggle -->
      >
    </div>
  `,
  styleUrls: ['./toggle-layer.component.scss'],
})
export class ToggleLayersComponent implements OnInit {
  layouts = {
    contours: {
      visibility: 'visible',
      'line-join': 'round',
      'line-cap': 'round',
    },
    museums: {
      visibility: 'visible',
    },
  };

  ngOnInit() {}

  toggleLayer(evt: {value: 'contours' | 'museums'}) {
    const key = evt.value as 'contours';

    this.layouts[key] = {
      ...this.layouts[key],
      visibility: this.layouts[key].visibility === 'visible' ? 'none' : 'visible',
    };
  }
}

@Component({
  template: `
    <mgl-map
      style="mapbox://styles/mapbox/streets-v9"
      [zoom]="[15]"
      [center]="[-71.97722138410576, -13.517379300798098]"
    >
      <mgl-vector-source id="museums" url="mapbox://mapbox.2opop9hr"> </mgl-vector-source>
      <mgl-vector-source id="contours" url="mapbox://mapbox.mapbox-terrain-v2"> </mgl-vector-source>
      <mgl-layer
        id="museums"
        type="circle"
        source="museums"
        layout="layouts.museums"
        paint="{
          'circle-radius': 8,
          'circle-color': 'rgba(55,148,179,1)'
        }"
        sourceLayer="museum-cusco"
      >
      </mgl-layer>
      <mgl-layer
        id="contours"
        type="line"
        source="contours"
        layout="layouts.contours"
        paint="{
          'line-color': '#877b59',
          'line-width': 1
        }"
        sourceLayer="contour"
      >
      </mgl-layer>
    </mgl-map>

    <div class="menu">></div>
  `,
  styleUrls: ['./toggle-layer.component.scss'],
})

在app.module中，我有：

@NgModule({
  declarations: [DesktopDashboardComponent, BarChartComponent, TestDesktopComponent],
  imports: [
    CommonModule,
    SharedModule,
    DragDropModule,
    MatCardModule,
    MatGridListModule,
    DesktopRoutingModule,
    NgxMapboxGLModule,
    /*  MatButtonToggleModule, */
  ],
  exports: [],
})
export class DesktopDashboardModule {}

NgxMapboxGLModule.withConfig({
      accessToken:
        'pk.eyJ1IpwYjBpazAyenA5ZzAyYnVtaGkifQ.LfTgQzPszKiyVQjKiUFsyg', // accessToken can also be set per map (accessToken input of mgl-map)
    }),

啊，好吧，我这样做了：

@NgModule({
  declarations: [DesktopDashboardComponent, BarChartComponent, TestDesktopComponent, ToggleLayersComponent],
  imports: [
    CommonModule,
    SharedModule,
    DragDropModule,
    MatCardModule,
    MatGridListModule,
    DesktopRoutingModule,
    NgxMapboxGLModule,
    /*  MatButtonToggleModule, */
  ],
  exports: [],
})
export class DesktopDashboardModule {}

---

我没有任何错误。但是也没有显示任何内容

您试图将

paint

绑定到局部变量，但实际上提供了一个内联对象文本。您必须在组件中创建公共属性，例如：

//toggle-layer.component.ts
公共配置={
“圆半径”：8，
“圆形颜色”：“rgba（55148179,1）”
}

//HTML模板
...

或者，您可以删除绑定并使用对象文字：

。。。

？但是所有的错误都存在于mgl映射中这个例子：你所有的错误都是同一类型的-你通过使用一个对象/数组文本“中心”，“缩放”等绑定到不存在的属性。是的，oke，但在我发布的整个例子中。那么，总体解决方案是什么？因为如果我只放一个片段，它就不起作用了