Question

我正在使用Mapbox创建一个角度4项目来制作一个显示不同样式和不同样式的仪表板，因此用户可以在地图的不同样式之间切换，也可以在许多可视化之间切换以显示数据（geoJson格式）以不同的方式。我尝试做的是制作一个有助于在可视化之间切换的选择元素（我为地图样式做了同样的事情），但我不能这样做。这是我的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)，而不是在所选标签上使用与使用选择地图标签时使用的相同模式。如果您不想使用ngModel，可以使用(change)="layerChanged($event)"

例如：

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

我认为您不需要编写[ngValue]="undefined"只需使用[value] attr，并且不需要selected，因为这将使用ngModel值解析。

Angular 4：如何使用Select元素在Mapbox中的不同可视化之间切换？

1 个答案: