El React IgrBingMapsMapImagery 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 React puede mostrar imágenes geográficas de Bing Maps en el contenido de fondo del mapa mediante la IgrBingMapsMapImagery clase.
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import { MapUtils, MapRegion } from'./MapUtils';
import { IgrGeographicMapModule } from"@infragistics/igniteui-react-maps";
import { IgrGeographicMap } from"@infragistics/igniteui-react-maps";
import { IgrBingMapsMapImagery } from"@infragistics/igniteui-react-maps";
import { BingMapsImageryStyle } from"@infragistics/igniteui-react-maps";
import { IgrDataChartInteractivityModule, IgrSeriesViewer } from"@infragistics/igniteui-react-charts";
// for handling of maps eventsimport { IgrRectChangedEventArgs } from"@infragistics/igniteui-react-core";
IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();
exportdefaultclass MapDisplayImageryBing extendsReact.Component<any, any> {
publicrender(): JSX.Element {
return (
<divclassName="container horizontal" ><divclassName="container" ><IgrGeographicMapref={this.onBingMapsLabels}width="100%"height="100%"zoomable="true"/></div><divclassName="container" ><IgrGeographicMapref={this.onBingMapsArial}width="100%"height="100%"zoomable="true"/></div><divclassName="container" ><IgrGeographicMapref={this.onBingMapsRoad}
// actualWindowRectChanged={this.onMapWindowRectChanged}width="100%"height="100%"zoomable="true"/></div><divclassName="overlay-bottom-right overlay-border">Imagery Tiles: @Bing Maps</div></div>
);
}
public onBingMapsLabels(geoMap: IgrGeographicMap) {
if (!geoMap) { return; }
consttileSource = new IgrBingMapsMapImagery();
tileSource.apiKey = MapUtils.getBingKey();
tileSource.imageryStyle = BingMapsImageryStyle.AerialWithLabels;
// resolving BingMaps uri based on HTTP protocol of hosting websitelettileUri = tileSource.actualBingImageryRestUri;
letisHttpSecured = window.location.toString().startsWith("https:");
if (isHttpSecured) {
tileSource.bingImageryRestUri = tileUri.replace("http:", "https:");
} else {
tileSource.bingImageryRestUri = tileUri.replace("https:", "http:");
}
geoMap.backgroundContent = tileSource;
// optional - navigating to a map region
MapUtils.navigateTo(geoMap, MapRegion.Caribbean);
}
public onBingMapsArial(geoMap: IgrGeographicMap) {
if (!geoMap) { return; }
consttileSource = new IgrBingMapsMapImagery();
tileSource.apiKey = MapUtils.getBingKey();
tileSource.imageryStyle = BingMapsImageryStyle.Aerial;
// resolving BingMaps uri based on HTTP protocol of hosting websitelettileUri = tileSource.actualBingImageryRestUri;
letisHttpSecured = window.location.toString().startsWith("https:");
if (isHttpSecured) {
tileSource.bingImageryRestUri = tileUri.replace("http:", "https:");
} else {
tileSource.bingImageryRestUri = tileUri.replace("https:", "http:");
}
geoMap.backgroundContent = tileSource;
// optional - navigating to a map region
MapUtils.navigateTo(geoMap, MapRegion.Caribbean);
}
public onBingMapsRoad(geoMap: IgrGeographicMap) {
if (!geoMap) { return; }
consttileSource = new IgrBingMapsMapImagery();
tileSource.apiKey = MapUtils.getBingKey();
tileSource.imageryStyle = BingMapsImageryStyle.Road;
// resolving BingMaps uri based on HTTP protocol of hosting websitelettileUri = tileSource.actualBingImageryRestUri;
letisHttpSecured = window.location.toString().startsWith("https:");
if (isHttpSecured) {
tileSource.bingImageryRestUri = tileUri.replace("http:", "https:");
} else {
tileSource.bingImageryRestUri = tileUri.replace("https:", "http:");
}
geoMap.backgroundContent = tileSource;
// optional - navigating to a map region
MapUtils.navigateTo(geoMap, MapRegion.Caribbean);
}
public onMapWindowRectChanged(viewer: IgrSeriesViewer, e: IgrRectChangedEventArgs) {
// let geoMap = viewer as IgrGeographicMap;// const rect = e.newRect;// console.log("win \n left:" + rect.left +// ", top:" + rect.top + ", width:" + rect.width + ", height:" + rect.height);// const geo = geoMap.getGeographicFromZoom(rect);// console.log("geo \n left:" + geo.left +// ", top:" + geo.top + ", width:" + geo.width + ", height:" + geo.height);
}
}
// rendering above class to the React DOMconstroot = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MapDisplayImageryBing/>);
tsx
Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.
Code Snippet
En el siguiente fragmento de código se muestra cómo mostrar mosaicos de imágenes geográficas de Bing Maps en React IgrGeographicMap clase using IgrBingMapsMapImagery.
import { IgrGeographicMap } from'igniteui-react-maps';
import { IgrBingMapsMapImagery } from'igniteui-react-maps';
import { BingMapsImageryStyle } from'igniteui-react-maps';
// ...const tileSource = new IgrBingMapsMapImagery();
tileSource.apiKey = "YOUR_BING_MAPS_API_KEY";
tileSource.imageryStyle = BingMapsImageryStyle.AerialWithLabels; // or
tileSource.imageryStyle = BingMapsImageryStyle.Aerial; // or
tileSource.imageryStyle = BingMapsImageryStyle.Road;
// resolving BingMaps uri based on HTTP protocol of hosting websitelet 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;
const geoMap = new IgrGeographicMap({ name: "geoMap" });
geoMap.backgroundContent = tileSource;
ts
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.