Angular 4: как использовать элемент Select для переключения между различными визуализациями в Mapbox?

Question

Я работаю над угловым проектом 4, используя Mapbox, чтобы создать панель мониторинга, отображающую разные визуализации с разными стилями, чтобы пользователь мог переключаться между разными стилями для карты, а также между многими визуализациями для отображения данных (формат geoJson)по-разному.Я пытаюсь сделать элемент select, который помогает переключаться между визуализациями (я сделал то же самое для стилей карты), но я не могу этого сделать.Вот мой HTML-код:

    <div id='map'></div>
    <div id='geocoder' class='geocoder'>
    </div>
    <div id='styles'>
      <select id='style' name='style' class='select-option' [(ngModel)]="style" (ngModelChange)="changeStyle($event)">
        <option id='sty' *ngFor="let l of styleList" [value]="l.value" [ngValue]="undefined" selected> {{l.value}} </option >
      </select>
    </div>
   <select id='layer' name='layer'>
    <option id='markers' class='select-option' value="markers" (ngModelChange)="addHeatmaps($event)">Markers</option>
    <option id='heatmaps' class='select-option' value="heatmaps" (ngModelChange)="colorHeatmaps($event)">Heatmaps</option>
    <option id='dotdensity' class='select-option' value="dotdensity" (ngModelChange)="dotLayer($event)">Dot density</option>
    <option id='clusters' class='select-option' value="clusters" (ngModelChange)="clusterLayer($event)">Clusters</option>
    <option id='hexbins' class='select-option' value="hexbins" (ngModelChange)="hexbinsLayer($event)">Hexbins</option>
  </select>
</div>

А вот мой component.ts:

export class MapComponent implements OnInit {

  public map: any;
  constructor(private http: HttpClient) { }
  public styleList: Array<Object> = [
    { id: 'basic', value: 'Basic' },
    { id: 'streets', value: 'Streets' },
    { id: 'bright', value: 'Bright' },
    { id: 'light', value: 'Light' },
    { id: 'dark', value: 'Dark' },
    { id: 'satellite', value: 'Satellite' }
  ];
  public visualisations: Array<Object> = [
    { id: 'markers', value: 'Markers' },
    { id: 'heatmaps', value: 'Heatmaps' },
    { id: 'dotdensity', value: 'Dot density' },
    { id: 'clusters', value: 'Clusters' },
    { id: 'hexbins', value: 'Hexbins' }
  ];
  public style = this.styleList[0].id;
  public vis = this.visualisations[0];

  ngOnInit() {
    this.init('basic')
  }
  changeStyle(data) {
    console.log("data", data)
    this.init(data.toLowerCase())
  }
  init(type) {
    var map;
    console.log("map", map)
    mapboxgl.accessToken = 'myToken';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [16.05, 48],
      zoom: 6
    });

    map.addControl(new mapboxgl.NavigationControl());
    map.addControl(new mapboxgl.FullscreenControl());
    let self = this;
    map.on('load', function () {
      addHeatmaps();
      switchLayer()
      function switchLayer() {
        var layerId = self.style.toLowerCase();    
        map.setStyle('mapbox://styles/mapbox/' + layerId + '-v9');
        var visualisation = self.vis;
        setTimeout(() => {
          SwitchVisualisation(visualisation);
        }, 1000);
      }

      function SwitchVisualisation(visualisation) {
        switch (visualisation) {
          case "markers": {
            map.addHeatmaps();
            break;
          }
          case "heatmaps": {
            map.colorHeatmaps();
            break;
          }
          case "dotdensity": {
            map.dotLayer();
            break;
          }
          case "clusters": {
            map.clusterLayer();
            break;
          }
          case "hexbins": {
            map.hexbinsLayer();
            break;
          }
          default: {
            console.log("Invalid choice");
            break;
          }
        }
      }

    });

    function addHeatmaps() {
      console.log(heatmaps);
    };


    function colorHeatmaps() {
      console.log(color);
    }
    function clusterLayer() {
      console.log(cluster);
    }
    function dotLayer() {
      console.log(dot);
    }
    function hexbinsLayer() {
      console.log(hexbins);
    }

    this.http.get('http://127.0.0.1:5000').subscribe(data => {
      // using the HttpClient instance, http to call the API then subscribe to the data and display to console
      console.log(data);

    },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log('Client-side error occured.');
        } else {
          console.log('Server-side error occured.');
        }
      });
  }

Я пробовал много вещей, но мне чего-то не хватает, ваша помощь очень ценится.

Answer 1

Есть некоторые проблемы, которые я заметил в вашем коде,

Прежде всего вы используете (ngModelChange)="addHeatmaps($event) для тегов параметров, а не для выбранного тега, используйте тот же шаблон, который вы использовали с тегом select map. Если вы не хотите использовать ngModel, вы можете просто использовать (change)="layerChanged($event)"

Например:

<select id='layer' name='layer' (change)="layerChanged($event)">

Я думаю, вам не нужно писать [ngValue]="undefined", просто используйте [value] attr, и нет необходимости в selected, так как это будет решено с использованием значения ngModel.