Visualización de imágenes desde Bing Maps Angular
El Angular IgxBingMapsMapImagery
es un servicio de mapeo de imágenes geográficas proporcionado por la empresa Microsoft®. Proporciona 3 estilos de mosaicos de imágenes geográficas del mundo. Se puede acceder a este servicio de imágenes geográficas directamente en el sitio web de www.bing.com/maps . El componente de mapa Ignite UI for Angular puede mostrar imágenes geográficas de Bing Maps en el contenido de fondo del mapa mediante la IgxBingMapsMapImagery
clase.
Ejemplo de visualización de imágenes de Bing Maps Angular
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
import { IgxGeographicMapComponent } from "igniteui-angular-maps" ;
export enum MapRegion {
Caribbean = "Caribbean" ,
UnitedStates = "United States" ,
UnitedKingdom = "United Kingdom" ,
European = "European" ,
SouthAfrica = "South Africa" ,
Poland = "Poland" ,
Australia = "Australia" ,
Japan = "Japan" ,
Uruguay = "Uruguay" ,
Egypt = "Egypt" ,
Hawaii = "Hawaii"
}
export class MapUtility {
public static navigateTo (geoMap: IgxGeographicMapComponent, name: MapRegion ) {
const geoRect = this .getRegions()[name];
geoMap.zoomToGeographic(geoRect);
}
public static toPixel(num: number ): string {
const s = Math .abs(num).toFixed(0 );
return s + " px" ;
}
public static toLng(num: number ): string {
num = this .clamp(num, -180 , 180 );
let s = Math .abs(num).toFixed(1 );
if (num < 100 ) {
s = " " + s;
}
if (num > 0 ) {
return s + "°E" ;
} else {
return s + "°W" ;
}
}
public static toLat(num: number ): string {
num = this .clamp(num, -90 , 90 );
let s = Math .abs(num).toFixed(1 );
if (num < 100 ) {
s = " " + s;
}
if (num > 0 ) {
return s + "°N" ;
} else {
return s + "°S" ;
}
}
public static clamp(num: number , min : number , max : number ): number {
return Math .max(min, Math .min(max, num));
}
public static pad(num: number , places?: number ): string {
places = places || 20 ;
let s = num.toFixed(1 ).toString();
while (s.length < places) { s = " " + s; }
return s;
}
public static getBingKey(): string {
return "Avlo7qsH1zZZI0XNpTwZ4XwvUJmCbd-mczMeUXVAW9kYYOKdmBIVRe8aoO02Xctq" ;
}
public static getRegions(): any {
if (this .regions === undefined ) {
this .createRegions();
}
return this .regions;
}
private static regions: any ;
private static addRegion (name: string , geoRect: any ) {
geoRect.name = name;
geoRect.longitude = geoRect.left + (geoRect.width / 2 );
geoRect.latitude = geoRect.top + (geoRect.height / 2 );
this .regions[name] = geoRect;
}
private static createRegions ( ) {
this .regions = {};
this .addRegion(MapRegion.Australia, { left : 81.5 , top : -52.0 , width : 98.0 , height : 56.0 });
this .addRegion(MapRegion.Caribbean, { left : -92.9 , top : 5.4 , width : 35.1 , height : 25.8 });
this .addRegion(MapRegion.Egypt, { left : 19.3 , top : 19.9 , width : 19.3 , height : 13.4 });
this .addRegion(MapRegion.European, { left : -36.0 , top : 31.0 , width : 98.0 , height : 38.0 });
this .addRegion(MapRegion.Japan, { left : 122.7 , top : 29.4 , width : 27.5 , height : 17.0 });
this .addRegion(MapRegion.Hawaii, { left : -161.2 , top : 18.5 , width : 6.6 , height : 4.8 });
this .addRegion(MapRegion.Poland, { left : 13.0 , top : 48.0 , width : 11.0 , height : 9.0 });
this .addRegion(MapRegion.SouthAfrica, { left : 9.0 , top : -37.1 , width : 26.0 , height : 17.8 });
this .addRegion(MapRegion.UnitedStates, { left : -134.5 , top : 16.0 , width : 70.0 , height : 37.0 });
this .addRegion(MapRegion.UnitedKingdom, { left : -15.0 , top : 49.5 , width : 22.5 , height : 8.0 });
this .addRegion(MapRegion.Uruguay, { left : -62.1 , top : -35.7 , width : 10.6 , height : 7.0 });
}
}
ts コピー import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxGeographicMapModule } from "igniteui-angular-maps" ;
import { IgxDataChartInteractivityModule } from "igniteui-angular-charts" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxGeographicMapModule,
IgxDataChartInteractivityModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { AfterViewInit, Component, ViewChild } from "@angular/core" ;
import { BingMapsImageryStyle } from "igniteui-angular-maps" ;
import { IgxBingMapsMapImagery } from "igniteui-angular-maps" ;
import { IgxGeographicMapComponent } from "igniteui-angular-maps" ;
import { MapUtility } from "./MapUtility" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent implements AfterViewInit {
@ViewChild ("map" , { static : true })
public map: IgxGeographicMapComponent;
constructor ( ) {
}
public ngAfterViewInit(): void {
const tileSource = new IgxBingMapsMapImagery();
tileSource.apiKey = MapUtility.getBingKey();
tileSource.imageryStyle = BingMapsImageryStyle.AerialWithLabels;
let tileUri = tileSource.actualBingImageryRestUri;
const isHttpSecured = window .location.toString().startsWith("https:" );
if (isHttpSecured) {
tileUri = tileUri.replace("http:" , "https:" );
} else {
tileUri = tileUri.replace("https:" , "http:" );
}
tileSource.bingImageryRestUri = tileUri;
this .map.backgroundContent = tileSource;
this .map.updateZoomWindow({ left : 0.2 , top : 0.1 , width : 0.7 , height : 0.7 });
}
}
ts コピー <div class ="container vertical" >
<igx-geographic-map #map
width ="100%"
height ="100%"
zoomable ="true" >
</igx-geographic-map >
</div >
html コピー
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Fragmento de código
El siguiente fragmento de código muestra cómo mostrar mosaicos de imágenes geográficas de Bing Maps en Angular IgxGeographicMapComponent
usando la clase IgxBingMapsMapImagery
.
<igx-geographic-map #map
width ="100%"
height ="100%"
zoomable ="true" >
</igx-geographic-map >
html
import { IgxGeographicMapComponent } from 'igniteui-angular-maps' ;
import { IgxBingMapsMapImagery } from 'igniteui-angular-maps' ;
const tileSource = new IgxBingMapsMapImagery();
tileSource.apiKey = "YOUR_BING_MAPS_API_KEY" ;
tileSource.imageryStyle = BingMapsImageryStyle.AerialWithLabels;
tileSource.imageryStyle = BingMapsImageryStyle.Aerial;
tileSource.imageryStyle = BingMapsImageryStyle.Road;
let tileUri = tileSource.actualBingImageryRestUri;
const isHttpSecured = window .location.toString().startsWith("https:" );
if (isHttpSecured) {
tileUri = tileUri.replace("http:" , "https:" );
} else {
tileUri = tileUri.replace("https:" , "http:" );
}
tileSource.bingImageryRestUri = tileUri;
this .map.backgroundContent = tileSource;
ts
Propiedades
The following table summarized properties of the IgxBingMapsMapImagery
class:
Nombre de la propiedad
tipo de propiedad
Descripción
apiKey
cadena
Representa la propiedad para configurar una clave API requerida para el servicio de imágenes de Bing Maps. Debe obtener esta clave en el sitio web www.bingmapsportal.com .
imageryStyle
BingMapsImageryStyle
Representa la propiedad para configurar el estilo del mapa de mosaicos de imágenes de Bing Maps. Esta propiedad se puede establecer en lo siguienteBingMapsImageryStyle
valores de enumeración:Aérea: especifica el estilo del mapa aéreo sin superposición de carreteras ni etiquetas. AerialWithLabels: especifica el estilo del mapa aéreo con carreteras y etiquetas superpuestas. Carretera: especifica el estilo del mapa de carreteras sin superposición aérea.
bingImageryRestUri
cadena
Representa la propiedad para configurar el URI REST de imágenes de Bing que especifica de dónde provendrán TilePath y los subdominios. Esta es una propiedad opcional y, si no se especifica, utilizará el URI REST predeterminado.
cultureName
cadena
Representa una propiedad para establecer el nombre de la cultura para el origen del mosaico.
isDeferredLoad
booleano
Representa la propiedad que especifica si el servicio Bing Maps debe inicializarse automáticamente tras la asignación de valores de propiedad válidos.
isInitialized
booleano
Representa que la propiedad establecida en True ocurre cuando los mosaicos de imágenes geográficas del servicio Bing Maps se han inicializado y están listos para representarse en el componente de mapa.
subDomains
SubDomainsCollection
Representa una colección de imágenes de subdominios de URI.
tilePath
cadena
Representa una propiedad que establece el URI de la imagen del mosaico del mapa; esta es la ubicación real de Bing Maps.
Referencias de API