React navegando por el contenido del mapa

    La navegación en el control IgrGeographicMap está habilitada de forma predeterminada y permite hacer zoom y desplazarse por el contenido del mapa. Sin embargo, este comportamiento se puede cambiar utilizando la propiedad zoomable. Es importante saber que el mapa sólo permite hacer zoom sincronizado: escalar el contenido del mapa manteniendo la relación de aspecto. Como resultado, no es posible escalar el contenido del mapa verticalmente sin escalarlo también horizontalmente y viceversa.

    React Navigating Map Content Example

    Geographic Coordinates

    Navega por el contenido del mapa dentro de una región geográfica delimitada por estas coordenadas:

    • horizontalmente desde 180°E (negativo) a 180°W (positivo) de longitud
    • verticalmente desde 85°S (negativo) a 85°N (positivo) de latitud

    Este fragmento de código muestra cómo navegar por el mapa utilizando coordenadas geográficas:

    const geoMap = new IgrGeographicMap({ name: "geoMap" });

geoMap.zoomToGeographic({ left: -134.5, top: 16.5, width: 70.0, height: 37.0 });

    Window Coordinates

    Además, puede navegar por el contenido del mapa dentro del rectángulo de la ventana delimitado por estas coordenadas relativas:

    • horizontalmente de 0,0 a 1,0 valores
    • verticalmente de 0,0 a 1,0 valores

    Este fragmento de código muestra cómo navegar por el mapa utilizando coordenadas relativas de ventana:

    const geoMap = new IgrGeographicMap({ name: "geoMap" });

geoMap.windowRect = { left: 0.1, top: 0.1, width: 0.5, height: 0.5 };
// or
geoMap.windowPositionHorizontal = 0.1;
geoMap.windowPositionVertical = 0.1;
geoMap.windowScale = 0.5;

    Properties

    La siguiente tabla resume las propiedades que se pueden utilizar en la navegación del control IgrGeographicMap:

    Nombre de la propiedad tipo de propiedad Descripción
    windowRect recto Establece una nueva posición y tamaño de la ventana de navegación en el área visible del contenido del mapa. Rect con valores 0, 0, 1, 1 alejará todo el contenido del mapa en la ventana de navegación.
    windowScale número Establece un nuevo tamaño de la ventana de navegación en el control del mapa. Es el valor más pequeño equivalente de Ancho o Alto almacenado en elwindowRect propiedad
    windowPositionHorizontal número Establece una nueva posición horizontal del punto de anclaje de la ventana de navegación desde el borde izquierdo del control del mapa. Es equivalente al valor almacenado en la izquierda delwindowRect propiedad.
    windowPositionVertical número Establece una nueva posición vertical del punto de anclaje de la ventana de navegación desde el borde superior del control del mapa. Es equivalente al valor almacenado en la parte superior de lawindowRect propiedad.
    actualWindowRect recto Indica la posición actual y el tamaño de la ventana de navegación en el área visible del contenido del mapa. Rect con valores 0, 0, 1, 1 muestra todo el contenido del mapa en la ventana de navegación.
    actualWindowScale número Indica el tamaño actual de la ventana de navegación en el control del mapa. Es equivalente al valor más pequeño de Ancho o Alto almacenado en elactualWindowRect propiedad
    actualWindowPositionHorizontal número Indica la posición horizontal actual del punto de anclaje de la ventana de navegación desde el borde izquierdo del control del mapa. Es equivalente al valor almacenado en la izquierda delactualWindowRect propiedad.
    actualWindowPositionVertical número Indica la posición vertical del punto de anclaje de la ventana de navegación desde el borde superior del control del mapa. Es equivalente al valor almacenado en la parte superior de laactualWindowRect propiedad.

    API References