La navegación en el control IgcGeographicMapComponent 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.
Web Components Ejemplo de navegación por el contenido del mapa
<!DOCTYPE html><html><head><title>MapNavigation</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-geographic-mapid="geoMap"width="100%"height="100%"></igc-geographic-map><divclass="overlay-left overlay-border vertical"style="background: rgba(217, 217, 217, 0.5)"><labelstyle="font-weight: 600">Zoom to Map Region</label><selectid="selectMapRegion"><option>United States</option><option>United Kingdom</option><option>South Africa</option><option>Poland</option></select><labelstyle="font-weight: 600">Map Geographic Rect</label><divclass="horizontal"><divclass="vertical"style="margin-right: 1rem"><labelid="lblGeoTop"></label><labelid="lblGeoLeft"></label></div><divclass="vertical"><labelid="lblGeoHeight"></label><labelid="lblGeoWidth"></label></div></div><labelstyle="font-weight: 600">Map Window Rect</label><divclass="horizontal"><divclass="vertical"style="margin-right: 1rem"><labelid="lblWindowTop"></label><labelid="lblWindowLeft"></label></div><divclass="vertical"><labelid="lblWindowHeight"></label><labelid="lblWindowWidth"></label></div></div><labelstyle="font-weight: 600">Map Window Position</label><divclass="horizontal"><divclass="vertical"style="margin-right: 1rem"><label>Horizontal:</label><label>Vertical:</label><label>Scale:</label></div><divclass="vertical"><labelid="lblWindowPositionX"></label><labelid="lblWindowPositionY"></label><labelid="lblWindowScale"></label></div></div><labelstyle="font-weight: 600">Map Hover Coordinates</label><divclass="horizontal"><divclass="vertical"style="margin-right: 1rem"><label>Window X: </label><label>Window Y: </label><label>Longitude: </label><label>Latitude: </label><label>Pixel X: </label><label>Pixel Y: </label></div><divclass="vertical"><labelid="lblWindowHoverX"></label><labelid="lblWindowHoverY"></label><labelid="lblGeoLongitude"></label><labelid="lblGeoLatitudes"></label><labelid="lblPixelX"></label><labelid="lblPixelY"></label></div></div></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Coordenadas geográficas
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:
Coordenadas de ventana
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:
Propiedades
La siguiente tabla resume las propiedades que se pueden utilizar en la navegación del control IgcGeographicMapComponent:
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.
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
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.
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.
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.
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
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.
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.