Блог

У меня angular 9 я использую последнюю версию mapbox.

Поэтому я хочу переключить некоторые данные: в данном случае количество и музеи.

Итак, я установил пакет: «@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',
    };
  }
}
  

Но я получаю эти ошибки:

 
    1. If 'mgl-layer' is an Angular component and it has 'paint' input, then verify that it is part of this module.
    2. If 'mgl-layer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

    29         [paint]="{
      m         ~~~~~~~~~~
    30           'line-color': '#877b59',
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    31           'line-width': 1
       ~~~~~~~~~~~~~~~~~~~~~~~~~
    32         }"

  

Итак, что я должен изменить?

Но intellisens находит, например: [layout] … а также, если я встану на [layout] и нажму f12, я перейду к определению. Но я не могу построить Angular. Спасибо

Теперь у меня это так:

 @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'],
})
  

this are the errors:

 src/app/desktop-dashboard/toggle-layer/toggle-layer.component.ts:24:7 - error NG8001: 'mgl-layer' is not a known element:
1. If 'mgl-layer' is an Angular component, then verify that it is part of this module.
2. If 'mgl-layer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

 24       <mgl-layer
          ~~~~~~~~~~
 25         id="contours"
    ~~~~~~~~~~~~~~~~~~~~~
...
 33         sourceLayer="contour"
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 34       >
    ~~~~~~~

  

Итак, в моем дочернем модуле у меня есть это:

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



  

и в app.module у меня есть это:

 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
public paintConfig = {
  'circle-radius': 8,
  'circle-color': 'rgba(55,148,179,1)'
}
  

 // HTML template
<mgl-layer
  ...
  [paint]="paintConfig"
>...</mgl-layer>
  

или вы можете удалить привязку и использовать объектный литерал:

 <mgl-layer
  ...
  paint="{
    'line-color': '#877b59',
    'line-width': 1
  }"
>...</mgl-layer>
  

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