Question

当我在代码中调用getdate函数时，我需要在地图上添加图层。但是当我直接在ngoninit（）中传递函数时，它可以正常工作。但是当我在getdate函数中调用相同的函数时，它将在控制台中显示。该函数已执行，但未添加图层。在下面的这段代码中，有服务器用于数据共享。我想在控制台的gettimemfromservice中执行功能，它显示功能正在执行，但图层未在地图上添加。

import { Component, OnInit, ViewChild, Optional, OnChanges, SimpleChanges, Input } from '@angular/core';
import  * as mapboxgl from 'mapbox-gl';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import MapboxDirections from '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions';
import { Map } from 'mapbox-gl';
import { ConvertPropertyBindingResult } from '@angular/compiler/src/compiler_util/expression_converter';
import { MatDialog } from '@angular/material/dialog';
import { GraphComponent } from '../graph/graph.component';
import { SidebarNavComponent } from '../sidebar-nav/sidebar-nav.component';
import { shareresservice } from '../services/shareres.service';
import {dataservice} from '../services/dataservice';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { gdataresponse } from '../services/gdataresponse.service';
@Component({
  selector: 'app-traficitymap',
  templateUrl: './traficitymap.component.html',
  styleUrls: ['./traficitymap.component.css']
})
export class TraficitymapComponent implements OnInit {


  olat:any;
  olng:any;
  dlat:any;
  dlng:any;
  cord:any;
  opoint:any;
  dpoint:any;
  spoint:any;
  directions:any;
  geojson:any;
   startlineid:any;
   endlineid:any;
   myForm: FormGroup;
   submitted = false;
   congestionresponse:any[]=[];
   @ViewChild("traficiytmap",{static:true})  date:any;
   @ViewChild("traficiytmap",{static:true})  time:any;

  // private setgraphdata:any[]=[];
  @ViewChild("traficiytmap",{static:true}) map: Map;
  geocoder:any;
   showcongestion=function()
  {   this.loadgmmavgservice(this.olat,this.olng,this.date,this.time);

  }


  constructor(public fb: FormBuilder,public showgraph:MatDialog,private myService: shareresservice,private congestionapiresp:gdataresponse) { 
    navigator.geolocation.getCurrentPosition(position => {
      this.olat=position.coords.latitude;
      this.olng=position.coords.longitude;
      const userCoordinates = [this.olng, this.olat];
      this.cord=userCoordinates;
      this.map.flyTo({
        center: userCoordinates,
        zoom:11
      });
      // lat long of current location
      this.opoint = new mapboxgl.LngLat(this.olng, this.olat);
      console.info(this.opoint);
    });

  // this.showcongestion();
  }



//get date data from shared service.

getdatefromservice()
{
 this.myService.dateobs$.subscribe((date) => {
this.date=date;
    console.log("date from service",date);
}); 


}
gettimefromservice()
{
this.myService.timeobs$.subscribe((time) => {
this.time=time;
   //And he have data here too
    console.log("time from service",time);

    this.loadgmmavgservice(this.olat,this.olng,this.date,this.time);
});

}
//for congestion api response.
loadgmmavgservice(source: string,destination:string,date:string,time:string){
  this.congestionapiresp.getprediction(source,destination,date,time)
  .subscribe(     
  data=>
  { console.log("congestion:",data);
  this.congestionresponse=data;
  //this.map.on('load', this.showlinestring(this.congestionresponse));
  this.showlinestring(this.congestionresponse);


  });
  }

  // on every load of 
  ngOnInit() {

    mapboxgl.accessToken =  '';
     this.map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/dark-v10',
      zoom:11,
      });
  //  // remove layer
  //  if (this.map.getLayer('linesource')) this.map.removeLayer('linesource');

      //zoom
      this.showzoomcontrols()
      // current location
      this.showlocation();
    // for poi searching
      this.showpoidata1();
      this.showpoidata2();
       //for service data reciever.
        this.getdatefromservice();
        this.gettimefromservice();
}

// current location function
 showlocation():void{
  this.map.addControl(
    new mapboxgl.GeolocateControl({
    positionOptions: {
    enableHighAccuracy: true
    },
    trackUserLocation: true,
    })
    );
};
//zoom control function
showzoomcontrols()
{
  this.map.addControl(new mapboxgl.NavigationControl());
};
// searching 
showpoidata1()
{
  this.geocoder= new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,
    mapboxgl: mapboxgl,
    countries: 'pk',
    placeholder:'Enter Source...',
    render:true
    });
    document.getElementById('geocoder').appendChild(this.geocoder.onAdd(this.map));
    // coordinates of destination.
    this.geocoder.on('result', (ev) =>{
      var styleSpec = ev.result;
      var ln= styleSpec.geometry.coordinates[0];
      var lt= styleSpec.geometry.coordinates[1];
      this.spoint = new mapboxgl.LngLat(ln, lt);
      console.info(this.spoint);
      this.olng=ln;
      this.olat=lt;
      console.log("source:",this.olng,this.olat);
  });
}
showpoidata2()
{
  this.geocoder= new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,
    mapboxgl: mapboxgl,
    countries: 'pk',
    placeholder:'Enter Destination...',
    render:true
    });
    document.getElementById('geocoder1').appendChild(this.geocoder.onAdd(this.map));
    // coordinates of destination.
    this.geocoder.on('result', (ev)=> {
      var styleSpec = ev.result;
      var ln= styleSpec.geometry.coordinates[0];
      var lt= styleSpec.geometry.coordinates[1];
      this.dpoint = new mapboxgl.LngLat(ln, lt);
      console.info(this.dpoint);
      this.dlng=ln;
      this.dlat=lt;
      console.log("destination",this.dlng,this.dlat);
  });
}

//congestion line with colors
 showlinestring(data:any)
{ 
  var gdata = {
    "type": "FeatureCollection",
    "features": data
  };

console.log(gdata);


  this.map.on('load', ()=> {

      this.map.addLayer({
        id: "linesource",
        type: "line",
        source: {
          type:"geojson",
          data:gdata
        },

        layout: {
          "line-join": "round",
          "line-cap": "round"
        },
        paint: {
          "line-color": [

            "match",
            ["get", "congestion_level"],
            [ 
              1,

            ],
            "#FA4F05",
            [
              2,

            ],
            "#e02e2e",
            [
              3,

            ],
            "#29EE02",
            "#29EE02"
          ],
          "line-width": 5
        }
      });
        // Geographic coordinates of the LineString
        var coordinates = gdata.features[0].geometry.coordinates;
        var bounds = coordinates.reduce((bounds, coord)=> {
          return bounds.extend(coord);
        }, new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]));

        this.map.fitBounds(bounds,{
          padding: 20
        });
      });

}


}

功能显示gdata响应，但在地图上添加了图层。看到响应的图像。

我想在函数执行时在地图上添加图层

0 个答案: