Blazor Ejemplo de visualización de imágenes de Open Street Maps
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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<divclass="container vertical"><divclass="container vertical"><IgbGeographicMapHeight="100%"Width="100%"Zoomable="true"BackgroundContent="@OSMImagery"/></div></div>@code {private IgbOpenStreetMapImagery OSMImagery;
private IgbGeographicMap MapRef { get; set; }
protectedoverridevoidOnInitialized()
{
this.OSMImagery = new IgbOpenStreetMapImagery();
}
protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && this.MapRef != null)
{
Rect zoomRect = new Rect() { Left = -150, Top = -60, Width = 315, Height = 140 };
awaitthis.MapRef.EnsureReady();
awaitthis.MapRef.UpdateWorldRectAsync(zoomRect);
}
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。