Blazor Exibindo imagens do Azure Mapas VISUALIZAR

O Blazor IgbAzureMapsImagery é o serviço de mapeamento de imagens geográficas fornecido pela Microsoft®. Ele fornece vários estilos de blocos de imagens geográficas do mundo. Este serviço de imagens geográficas pode ser acessado diretamente no site www.azure.microsoft.com. O componente de mapa Ignite UI for Blazor pode exibir imagens geográficas do Azure Mapas no conteúdo em segundo plano do mapa usando a IgbAzureMapsImagery classe.

Blazor Displaying Imagery from Azure Maps Example

Code Snippet

O snippet de código a seguir mostra como exibir blocos de imagens geográficas do Azure Mapas em Blazor IgbGeographicMap usando a IgbAzureMapsImagery classe.

@using IgniteUI.Blazor.Controls

<IgbGeographicMap @ref="AzureMap"
    Height="100%" Width="100%"
    Zoomable="true"
    BackgroundContent="@AzureImagery">
</IgbGeographicMap>

@code {
    
    private IgbGeographicMap AzureMap;
    private IgbAzureMapsImagery AzureImagery { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        //Update Map Background
        AzureImagery = new IgbAzureMapsImagery
        {
            ApiKey = AzureKey,
            ImageryStyle = AzureMapsImageryStyle.Satellite
        };
    }
}

Blazor Displaying Tile Series Overlays over Imagery from Azure Maps Example

Ao trabalhar com o IgbGeographicTileSeries, você pode combinar sobreposições (tráfego, clima, rótulos) em cima de um estilo de mapa base, como, por exemplo. Satélite, Estrada ou Cinza Escuro. Usando TerraOverlay com, por exemplo. Satélite para visualizar o terreno.

• Estilos básicos: Satélite, Estrada, Terra e Cinza Escuro fornecem os blocos de fundo principais.
• Estilos de sobreposição: as imagens de tráfego e clima (por exemplo, TrafficRelativeOverlay, WeatherRadarOverlay) são projetadas para serem colocadas em camadas sobre um estilo base, atribuindo-as a uma série de blocos.
• Estilos híbridos: variantes como HybridRoadOverlay e HybridDarkGreyOverlay já combinam um estilo base com sobreposições (rótulos, estradas, etc.), para que você não precise gerenciar várias camadas manualmente.

Este design permite que você crie mapas mais ricos, por exemplo:

• Exibindo imagens de satélite com um TrafficOverlay para destacar o congestionamento em imagens do mundo real.
• Usando Terra com WeatherRadarOverlay para visualizar o terreno com precipitação.
• Aplicando DarkGrey com LabelsRoadOverlay para uma exibição amigável ao painel e com alto contraste.

Code Snippet

O trecho de código a seguir mostra como exibir blocos de imagens geográficas sobre uma junção de imagens de plano de fundo, por exemplo. tráfego com um mapa cinza escuro para o Blazor IgbGeographicMap usando IgbAzureMapsImagery e IgbGeographicTileSeries classes.

@using IgniteUI.Blazor.Controls

<IgbGeographicMap @ref="AzureMap"
                          Height="100%" Width="100%"
                          Zoomable="true"
                          BackgroundContent="@AzureImagery">
        <IgbGeographicTileSeries @ref="ImagerySeries" />
</IgbGeographicMap>

@code {
    
    private IgbGeographicMap AzureMap;
    private IgbAzureMapsImagery AzureImagery { get; set; }
    private IgbGeographicTileSeries ImagerySeries;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        
        //Update TileSeries
        var imagery = new IgbAzureMapsImagery
        {
            ApiKey = AzureKey,
            ImageryStyle = AzureMapsImageryStyle.TrafficAbsoluteOverlay
        };

        ImagerySeries.TileImagery = imagery;

        //Update Map Background
        AzureImagery = new IgbAzureMapsImagery
        {
            ApiKey = AzureKey,
            ImageryStyle = AzureMapsImageryStyle.DarkGrey
        };
    }
}

Properties

A tabela a seguir resume as propriedades da IgbAzureMapsImagery classe:

Nome da propriedade	Tipo de propriedade	Descrição
ApiKey	corda	Representa a propriedade para definir uma chave de API necessária para o serviço de imagens do Azure Mapas. Você deve obter essa chave no site da azure.microsoft.com.
ImageryStyle	AzureMapsImageryStyle	Representa a propriedade para definir o estilo de mapa de blocos de imagens do Azure Mapas. Essa propriedade pode ser definida com os seguintesAzureMapsImageryStyle valores de enumeração: Satélite - Especifica o estilo de mapa de satélite sem sobreposição de estrada ou rótulos Estrada - Especifica o estilo de mapa aéreo com sobreposição de estrada e rótulos DarkGrey - Especifica um estilo de mapa base cinza escuro para sobreposições de contraste e realce TerraOverlay - Especifica um estilo de mapa de terreno com relevo sombreado para destacar a elevação e as feições da paisagem LabelsRoadOverlay - Uma das várias sobreposições de rótulos de cidades sem uma sobreposição aérea HybridRoadOverlay - Plano de fundo de satélite combinado com sobreposições de estradas e rótulos HybridDarkGreyOverlay - Fundo satélite combinado com sobreposições de rótulos cinza escuro LabelsDarkGreyOverlay - Uma das várias sobreposições de rótulos de cidade sobre um mapa base cinza escuro TrafficDelayOverlay - Exibe atrasos de tráfego e áreas de congestionamento em tempo real TrafficAbsoluteOverlay - Exibe as velocidades de tráfego atuais como valores absolutos TrafficReducedOverlay - Exibe o fluxo de tráfego reduzido com visualização baseada em luz TrafficRelativeOverlay - Exibe as velocidades do tráfego em relação às condições normais TrafficRelativeDarkOverlay - Exibe velocidades de tráfego em relação às condições normais em um mapa base escuro para contraste aprimorado WeatherRadarOverlay - Exibe imagens de radar quase em tempo real da precipitação WeatherInfraredOverlay - Exibe imagens de satélite infravermelho da cobertura de nuvens

API References

• AzureMapsImageryStyle
• IgbAzureMapsImagery
• IgbGeographicMap