React Visualización de imágenes de Open Street Maps
El React IgrOpenStreetMapImagery
es un servicio gratuito de mapeo de imágenes geográficas creado en colaboración por colaboradores de OpenStreetMap© de todo el mundo. Proporciona mosaicos de imágenes geográficas del mundo solo en estilo de mapa de carreteras sin ninguna opción de configuración. Se puede acceder a este servicio de imágenes geográficas directamente en www.OpenStreetMap.org sitio web. De forma predeterminada, el componente de mapa Ignite UI for React ya muestra imágenes geográficas de Open Street Maps. Por lo tanto, no es necesario configurar el control para mostrar imágenes geográficas de Open Street Maps.
React Ejemplo de visualización de imágenes de Open Street Maps
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrRectChangedEventArgs } from "@infragistics/igniteui-react-core" ;
import { IgrGeographicMapModule } from "@infragistics/igniteui-react-maps" ;
import { IgrGeographicMap } from "@infragistics/igniteui-react-maps" ;
import { IgrOpenStreetMapImagery } from "@infragistics/igniteui-react-maps" ;
import { IgrDataChartInteractivityModule, IgrSeriesViewer } from "@infragistics/igniteui-react-charts" ;
IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();
export default class MapDisplayImageryOSM extends React.Component <any, any> {
public geoMap: IgrGeographicMap;
constructor (props: any ) {
super (props);
this .onMapRef = this .onMapRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="container" >
<IgrGeographicMap
ref ={this.onMapRef}
// actualWindowRectChanged ={this.onMapWindowRectChanged}
width ="100%"
height ="100%"
zoomable ="true" />
</div >
<div className ="overlay-bottom-right overlay-border" > Imagery Tiles: @OpenStreetMap</div >
</div >
);
}
public onMapRef(geoMap: IgrGeographicMap) {
if (!geoMap) { return ; }
const mapImagery = new IgrOpenStreetMapImagery();
geoMap.backgroundContent = mapImagery;
const geoRect = { left: -150.0 , top: -60.0 , width: 315.0 , height: 140.0 };
geoMap.zoomToGeographic(geoRect);
}
public onMapWindowRectChanged(viewer: IgrSeriesViewer, e: IgrRectChangedEventArgs) {
let geoMap = viewer as IgrGeographicMap;
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<MapDisplayImageryOSM /> );
tsx コピー
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Fragmento de código
Este ejemplo de código establece BackgroundContent
explícitamente el componente de mapa en el IgrOpenStreetMapImagery
objeto que proporciona imágenes geográficas de los colaboradores de OpenStreetMap©.
import { IgrGeographicMap } from 'igniteui-react-maps' ;
import { IgrOpenStreetMapImagery } from 'igniteui-react-maps' ;
const tileSource = new IgrOpenStreetMapImagery();
const geoMap = new IgrGeographicMap({ name : "geoMap" });
geoMap.backgroundContent = tileSource;
ts
Referencias de API