Descripción general del mapa React
El componente de mapa Ignite UI for React le permite mostrar datos que contienen ubicaciones geográficas de modelos de vista o datos geoespaciales cargados desde archivos de formas en mapas de imágenes geográficas.
Ejemplo de mapa React
El siguiente ejemplo demuestra cómo mostrar datos en IgrGeographicMap usando IgrGeographicProportionalSymbolSeries también conocido como Bubble Series.
El componente de mapa le permite representar imágenes geográficas de Bing Maps™ y Open Street Maps. El mapa proporciona un trazado de decenas de miles de puntos de datos y los actualiza cada pocos milisegundos para que el control pueda manejar sus transmisiones en tiempo real.
La propiedad Serie del mapa se utiliza para admitir la representación de un número ilimitado de series geográficas. Esta propiedad es una colección de objetos de series geográficas y se le puede agregar cualquier tipo de serie geográfica. Por ejemplo, se puede agregar IgrGeographicSymbolSeries para trazar ubicaciones geográficas como ciudades y IgrGeographicPolylineSeries para trazar conexiones (por ejemplo, carreteras) entre estas ubicaciones geográficas.
El mapa proporciona comportamientos de navegación personalizables para navegar por el contenido del mapa mediante el mouse, el teclado o el código subyacente.
Dependencies
Para el componente de mapa geográfico React, primero debe instalar estos paquetes:
npm install --save igniteui-react-core
npm install --save igniteui-react-charts
npm install --save igniteui-react-maps
Component Modules
IgrGeographicMap requiere los siguientes módulos; sin embargo, DataChartInteractivityModule solo es necesario para interacciones con el mouse, como desplazarse y hacer zoom en el contenido del mapa.
import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();
Usage
Ahora que se importa el módulo de mapas, el siguiente paso es crear un mapa geográfico. El siguiente código muestra cómo hacer esto y habilitar el zoom en el mapa.
<IgrGeographicMap
width="600px"
height="600px"
zoomable="true" />
Additional Resources
Puede encontrar más información sobre las características relacionadas del mapa React en estos temas:
- Usando la serie de símbolos de dispersión
- Uso de series proporcionales de dispersión
- Uso de series de contornos de dispersión
- Uso de series de densidad de dispersión
- Usando series de áreas de dispersión
- Usando series de polígonos de formas
- Uso de series de polilíneas de formas
API References
La siguiente es una lista de miembros de API mencionados en las secciones anteriores: