GeoJson 在 Angular 中无法使用 Bing 地图
GeoJson is not working in Angular using Bing Map
以下是我的 angular 代码。我正在尝试从文件和 bing 地图上的变量读取 Geoson 数据，但它没有反映在地图上。怎么了？
我以 Bing Map SDK 为例。
http://bingmapsv8samples.azurewebsites.net/#GeoJson%20Shape%20Events
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() {
}
}
如果可以，请在ReadGeoJson 函数内部的代码中添加一些断点。我怀疑 this 在回调中可能有不同的含义，因此您无法访问地图和 getSouthAfricaGeoJson 函数。尝试在 loadModule 调用之前添加 var self = this;，然后将 ReadGeoJson 函数中其余代码中的 this 替换为 self。
以下是我的 angular 代码。我正在尝试从文件和 bing 地图上的变量读取 Geoson 数据，但它没有反映在地图上。怎么了？
我以 Bing Map SDK 为例。
http://bingmapsv8samples.azurewebsites.net/#GeoJson%20Shape%20Events
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() {
}
}
如果可以，请在ReadGeoJson 函数内部的代码中添加一些断点。我怀疑 this 在回调中可能有不同的含义，因此您无法访问地图和 getSouthAfricaGeoJson 函数。尝试在 loadModule 调用之前添加 var self = this;，然后将 ReadGeoJson 函数中其余代码中的 this 替换为 self。