GeoJson在Angular中无法使用Bing Map

Question

下面是我的角码。我试着从文件和必应地图上的变量读取Geoson数据，但它没有反映在地图上。怎么了？

我引用的是必应地图SDK作为例子。

http://bingmapsv8samples.azurewebsites.net/#GeoJSON%20Shape%20事件

import { ViewContainerRef, Component, ElementRef, OnInit, ViewChild, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { MapService } from '../../services/map.service';
import { CookieService } from 'ngx-cookie';
import { Config } from '../../config/config';
import { NguiAutoCompleteModule } from '@ngui/auto-complete/dist';
import * as io from 'socket.io-client';
import { CommonUtils } from './../../shared/CommonUtils';
import { fail, throws } from 'assert';
import { Toast, ToastsManager } from 'ng2-toastr/ng2-toastr';
import { OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
import { DeviceDetectorService } from 'ngx-device-detector';

declare const Microsoft: any;
declare const Bing;
declare const GeoJson: any;
declare var jQuery: any;
declare var $: any;

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})

export class MapComponent implements OnInit, OnDestroy {
  map: any;
  infobox: any;
  dataLayer: any;

  @ViewChild('mapElement') someInput: ElementRef;
  myMap = document.querySelector('#myMap');

  constructor(private mapService: MapService,
    private router: Router, private config: Config,
    private utils: CommonUtils,
    private cookieService: CookieService,
    public toastr: ToastsManager, vRef: ViewContainerRef,
    private deviceService: DeviceDetectorService,
    private zone: NgZone) {
    this.toastr.setRootViewContainerRef(vRef);
  }

  ngOnInit() {

    if (document.readyState != 'complete') {
      document.onreadystatechange = () => {
        if (document.readyState === 'complete') {
          this.loadMapView(this.config.getConstants('mapTypeRoad'));
          setTimeout(() => { this.ReadGeoJson(); }, 5000);
        } else {
          this.ngOnInit();
        }
      }
    } else {
      if (document.readyState === 'complete') {
        this.loadMapView(this.config.getConstants('mapTypeRoad'));
        setTimeout(() => { this.ReadGeoJson(); }, 5000);
      }
    }

  }

  loadMapView(type: String) {

    var location = new Microsoft.Maps.Location(53.32, -110.29);

    this.map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
      credentials: this.config.get('BingMapKey'),
      center: location,
      mapTypeId: type == this.config.getConstants('mapTypeSatellite') ? Microsoft.Maps.MapTypeId.aerial : Microsoft.Maps.MapTypeId.road,
      zoom: 5,
      liteMode: true,
      enableClickableLogo: false,
      showLogo: false,
      showTermsLink: false,
      showMapTypeSelector: false,
      showTrafficButton: true,
      enableSearchLogo: false,
      showCopyright: false
    });

    //Load the Animation Module
    Microsoft.Maps.loadModule('AnimationModule', function () {
    });

    //Store some metadata with the pushpin
    this.infobox = new Microsoft.Maps.Infobox(this.map.getCenter(), {
      visible: false
    });

    this.infobox.setMap(this.map);

    // Load the Spatial Math module.
    Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () { });

    // Create a layer to load pushpins to.
    // this.dataLayer = new Microsoft.Maps.EntityCollection();

    //Create a layer to add the GeoJSON data to.
    this.dataLayer = new Microsoft.Maps.Layer();
    this.map.layers.insert(this.dataLayer);
  }

  ReadGeoJson() {
    Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
      var featureCollection = Microsoft.Maps.GeoJson.read(this.getSouthAfricaGeoJson(), { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
      for (var i = 0; i < featureCollection.length; i++) {
        // this.map.entities.push(featureCollection[i]);
        this.dataLayer.add(featureCollection[i]);
      }
    });

    // //Load GeoJSON module.
    // Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {

    //   //Read the GeoJSON file that is hosted on the same domain.
    //   Microsoft.Maps.GeoJson.readFromUrl('../../assets/us-states.json',
    //       function (shapes) {
    //           //Add the shape(s) to the map.
    //           this.map.entities.push(shapes);
    //       }, null, {
    //       polygonOptions: {
    //           fillColor: 'rgba(255,0,0,0.5)',
    //           strokeColor: 'white',
    //           strokeThickness: 5
    //       }
    //   });
    // });

  }

  getSouthAfricaGeoJson() {
    return { 'type': 'FeatureCollection', 'features': [{ 'type': 'Feature', 'id': 'ZAF', 'properties': { 'name': 'South Africa' }, 'geometry': { 'type': 'Polygon', 'coordinates': [[[31.521001, -29.257387], [31.325561, -29.401978], [30.901763, -29.909957], [30.622813, -30.423776], [30.055716, -31.140269], [28.925553, -32.172041], [28.219756, -32.771953], [27.464608, -33.226964], [26.419452, -33.61495], [25.909664, -33.66704], [25.780628, -33.944646], [25.172862, -33.796851], [24.677853, -33.987176], [23.594043, -33.794474], [22.988189, -33.916431], [22.574157, -33.864083], [21.542799, -34.258839], [20.689053, -34.417175], [20.071261, -34.795137], [19.616405, -34.819166], [19.193278, -34.462599], [18.855315, -34.444306], [18.424643, -33.997873], [18.377411, -34.136521], [18.244499, -33.867752], [18.25008, -33.281431], [17.92519, -32.611291], [18.24791, -32.429131], [18.221762, -31.661633], [17.566918, -30.725721], [17.064416, -29.878641], [17.062918, -29.875954], [16.344977, -28.576705], [16.824017, -28.082162], [17.218929, -28.355943], [17.387497, -28.783514], [17.836152, -28.856378], [18.464899, -29.045462], [19.002127, -28.972443], [19.894734, -28.461105], [19.895768, -24.76779], [20.165726, -24.917962], [20.758609, -25.868136], [20.66647, -26.477453], [20.889609, -26.828543], [21.605896, -26.726534], [22.105969, -26.280256], [22.579532, -25.979448], [22.824271, -25.500459], [23.312097, -25.26869], [23.73357, -25.390129], [24.211267, -25.670216], [25.025171, -25.71967], [25.664666, -25.486816], [25.765849, -25.174845], [25.941652, -24.696373], [26.485753, -24.616327], [26.786407, -24.240691], [27.11941, -23.574323], [28.017236, -22.827754], [29.432188, -22.091313], [29.839037, -22.102216], [30.322883, -22.271612], [30.659865, -22.151567], [31.191409, -22.25151], [31.670398, -23.658969], [31.930589, -24.369417], [31.752408, -25.484284], [31.837778, -25.843332], [31.333158, -25.660191], [31.04408, -25.731452], [30.949667, -26.022649], [30.676609, -26.398078], [30.685962, -26.743845], [31.282773, -27.285879], [31.86806, -27.177927], [32.071665, -26.73382], [32.83012, -26.742192], [32.580265, -27.470158], [32.462133, -28.301011], [32.203389, -28.752405], [31.521001, -29.257387]], [[28.978263, -28.955597], [28.5417, -28.647502], [28.074338, -28.851469], [27.532511, -29.242711], [26.999262, -29.875954], [27.749397, -30.645106], [28.107205, -30.545732], [28.291069, -30.226217], [28.8484, -30.070051], [29.018415, -29.743766], [29.325166, -29.257387], [28.978263, -28.955597]]] } }] };
  }

  ngOnDestroy() {

  }

}

Answer 1

如果可以，在ReadGeoJson函数内部的代码中添加一些断点。我怀疑this在回调中可能有不同的含义，因此您无法访问映射和getSouthAfricaGoJson函数。尝试在loadModule调用之前添加var self=this；,然后将ReadGeoJson函数中的其余代码中的this替换为self。