Conteúdo do mapa de navegação React

    A navegação no controle IgrGeographicMap é habilitada por padrão e permite zoom e panorâmica do conteúdo do mapa. No entanto, esse comportamento pode ser alterado usando a propriedade zoomable. É importante saber que o mapa permite apenas zoom sincronizado - dimensionando o conteúdo do mapa com proporção de aspecto preservada. Como resultado, não é possível dimensionar o conteúdo do mapa verticalmente sem dimensioná-lo também horizontalmente e vice-versa.

    React Navigating Map Content Example

    Geographic Coordinates

    Você navega pelo conteúdo do mapa dentro da região geográfica delimitada por estas coordenadas:

    • horizontalmente de 180°E (negativo) a 180°W (positivo) longitudes
    • verticalmente de latitudes de 85°S (negativo) a 85°N (positivo)

    Este trecho de código mostra como navegar no mapa usando 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

    Além disso, você pode navegar pelo conteúdo do mapa dentro do retângulo da janela delimitado por estas coordenadas relativas:

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

    Este trecho de código mostra como navegar no mapa usando coordenadas relativas da janela:

    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

    A tabela a seguir resume as propriedades que podem ser usadas na navegação do controle IgrGeographicMap:

    Nome da propriedade Tipo de propriedade Descrição
    windowRect Retângulo Define nova posição e tamanho da janela de navegação na área visível do conteúdo do mapa. Rect com valores 0, 0, 1, 1 diminuirá o zoom de todo o conteúdo do mapa na janela de navegação.
    windowScale número Define o novo tamanho da janela de navegação no controle do mapa. É equivalente ao menor valor de Largura ou Altura armazenado nowindowRect propriedade
    windowPositionHorizontal número Define a nova posição horizontal do ponto de ancoragem da janela de navegação a partir da borda esquerda do controle do mapa. É equivalente ao valor armazenado na Esquerda dowindowRect propriedade.
    windowPositionVertical número Define a nova posição vertical do ponto de ancoragem da janela de navegação a partir da borda superior do controle do mapa. É equivalente ao valor armazenado no Topo dowindowRect propriedade.
    actualWindowRect Retângulo Indica a posição atual e o tamanho da janela de navegação na área visível do conteúdo do mapa. Rect com valores 0, 0, 1, 1 exibe todo o conteúdo do mapa na janela de navegação.
    actualWindowScale número Indica o tamanho atual da janela de navegação no controle do mapa. É equivalente ao menor valor de Largura ou Altura armazenado noactualWindowRect propriedade
    actualWindowPositionHorizontal número Indica a posição horizontal atual do ponto de ancoragem da janela de navegação a partir da borda esquerda do controle do mapa. É equivalente ao valor armazenado na Esquerda doactualWindowRect propriedade.
    actualWindowPositionVertical número Indica a posição vertical do ponto de ancoragem da janela de navegação a partir da borda superior do controle do mapa. É equivalente ao valor armazenado no Topo doactualWindowRect propriedade.

    API References