Blazor Open Street Maps의 이미지 표시

Blazor IgbOpenStreetMapImagery는 전 세계의 OpenStreetMap© 기여자들이 공동으로 만든 무료 지리적 이미지 매핑 서비스입니다. 구성 옵션 없이 도로 지도 스타일로만 세계의 지리적 이미지 타일을 제공합니다. 이 지리적 이미지 서비스는 www.OpenStreetMap.org 웹 사이트에서 직접 액세스할 수 있습니다. 기본적으로 Ignite UI for Blazor 맵 구성 요소는 이미 Open Street Maps의 지리적 이미지를 표시합니다. 따라서 Open Street Maps의 지리적 이미지를 표시하도록 컨트롤을 구성할 필요가 없습니다.

Blazor Displaying Imagery from Open Street Maps Example

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbGeographicMapModule),
                typeof(IgbDataChartInteractivityModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">

    <div class="container vertical">
        <IgbGeographicMap Height="100%" Width="100%" Zoomable="true" BackgroundContent="@OSMImagery"/>
    </div>
</div>

@code {

    private IgbOpenStreetMapImagery OSMImagery;
    private IgbGeographicMap MapRef { get; set; }

    protected override void OnInitialized()
    {

        this.OSMImagery = new IgbOpenStreetMapImagery();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.MapRef != null)
        {
            Rect zoomRect = new Rect() { Left = -150, Top = -60, Width = 315, Height = 140 };
            await this.MapRef.EnsureReady();
            await this.MapRef.UpdateWorldRectAsync(zoomRect);
        }
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

Code Snippet

이 코드 예제에서는 지도 구성 요소의 BackgroundContent OpenStreetMap© 기여자의 지리 이미지를 제공하는 IgbOpenStreetMapImagery 객체로 명시적으로 설정합니다.

<IgbGeographicMap Height="100%" Width="100%" Zoomable="true"
    BackgroundContent="OSMImagery" />

@code {

    public IgbOpenStreetMapImagery OSMImagery;

    protected override void OnInitialized()
    {
        this.OSMImagery = new IgbOpenStreetMapImagery();
    }
}
razor

API References

• BackgroundContent
• IgbOpenStreetMapImagery