Web Components Visualización de imágenes de Bing Maps
El Web Components IgcBingMapsMapImagery 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 Web Components puede mostrar imágenes geográficas de Bing Maps en el contenido de fondo del mapa mediante la IgcBingMapsMapImagery clase.
Web Components Ejemplo de visualización de imágenes de Bing Maps
import { MapUtils, MapRegion } from'./MapUtils';
import { IgcGeographicMapModule } from'igniteui-webcomponents-maps';
import { IgcGeographicMapComponent } from'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from'igniteui-webcomponents-charts';
import { BingMapsImageryStyle } from'igniteui-webcomponents-maps';
import { IgcBingMapsMapImagery } from'igniteui-webcomponents-maps';
import { ModuleManager } from'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartInteractivityModule,
IgcGeographicMapModule
);
exportclassMapDisplayImageryBingTiles{
private geoMap1: IgcGeographicMapComponent;
private geoMap2: IgcGeographicMapComponent;
private geoMap3: IgcGeographicMapComponent;
constructor() {
this.geoMap1 = document.getElementById('map1') as IgcGeographicMapComponent;
this.geoMap2 = document.getElementById('map2') as IgcGeographicMapComponent;
this.geoMap3 = document.getElementById('map3') as IgcGeographicMapComponent;
this.createMap1(this.geoMap1);
this.createMap2(this.geoMap2);
this.createMap3(this.geoMap3);
}
createMap1(map: IgcGeographicMapComponent) {
map.zoomable = true;
const tileSource = new IgcBingMapsMapImagery();
tileSource.apiKey = MapUtils.getBingKey();
tileSource.imageryStyle = BingMapsImageryStyle.Aerial;
// resolving BingMaps uri based on HTTP protocol of hosting websitelet tileUri = tileSource.actualBingImageryRestUri;
let isHttpSecured = window.location.toString().startsWith('https:');
if (isHttpSecured) {
tileSource.bingImageryRestUri = tileUri.replace('http:', 'https:');
} else {
tileSource.bingImageryRestUri = tileUri.replace('https:', 'http:');
}
map.backgroundContent = tileSource;
// optional - navigating to a map region
MapUtils.navigateTo(map, MapRegion.Caribbean);
}
createMap2(map: IgcGeographicMapComponent) {
map.zoomable = true;
const tileSource = new IgcBingMapsMapImagery();
tileSource.apiKey = MapUtils.getBingKey();
tileSource.imageryStyle = BingMapsImageryStyle.AerialWithLabels;
// resolving BingMaps uri based on HTTP protocol of hosting websitelet tileUri = tileSource.actualBingImageryRestUri;
let isHttpSecured = window.location.toString().startsWith('https:');
if (isHttpSecured) {
tileSource.bingImageryRestUri = tileUri.replace('http:', 'https:');
} else {
tileSource.bingImageryRestUri = tileUri.replace('https:', 'http:');
}
map.backgroundContent = tileSource;
// optional - navigating to a map region
MapUtils.navigateTo(map, MapRegion.Caribbean);
}
createMap3(map: IgcGeographicMapComponent) {
map.zoomable = true;
const tileSource = new IgcBingMapsMapImagery();
tileSource.apiKey = MapUtils.getBingKey();
tileSource.imageryStyle = BingMapsImageryStyle.Road;
// resolving BingMaps uri based on HTTP protocol of hosting websitelet tileUri = tileSource.actualBingImageryRestUri;
let isHttpSecured = window.location.toString().startsWith('https:');
if (isHttpSecured) {
tileSource.bingImageryRestUri = tileUri.replace('http:', 'https:');
} else {
tileSource.bingImageryRestUri = tileUri.replace('https:', 'http:');
}
map.backgroundContent = tileSource;
// optional - navigating to a map region
MapUtils.navigateTo(map, MapRegion.Caribbean);
}
}
new MapDisplayImageryBingTiles();
ts
<!DOCTYPE html><html><head><title>MapDisplayImageryBingTiles</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container horizontal" ><igc-geographic-mapid="map1"class="container"height="100%"width="100%"></igc-geographic-map><igc-geographic-mapid="map2"class="container"height="100%"width="100%"></igc-geographic-map><igc-geographic-mapid="map3"class="container"height="100%"width="100%"></igc-geographic-map></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Fragmento de código
En el siguiente fragmento de código se muestra cómo mostrar mosaicos de imágenes geográficas de Bing Maps en Web Components IgcGeographicMapComponent clase using IgcBingMapsMapImagery.
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.
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.
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.
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.