Blazor Visualización de imágenes de Esri Maps

​IgbArcGISOnlineMapImagery es un servicio gratuito de mapeo de imágenes geográficas creado por la empresa Esri. Proporciona más de 40 estilos de mosaicos de imágenes geográficas del mundo y algunos mosaicos temáticos para los EE. UU. Se puede acceder a este servicio de imágenes geográficas directamente en el sitio web www.arcgisonline.com.

Blazor Displaying Imagery from Esri Maps Example

EXAMPLE

MODULES

DATA

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 System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Infragistics.Samples
{
    public class EsriStyle
    {
        // these Esri maps show geographic tiles for the whole of world
        public static string WorldStreetMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";
        public static string WorldTopographicMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
        public static string WorldImageryMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
        public static string WorldOceansMap = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean/World_Ocean_Base/MapServer";
        public static string WorldNationalGeoMap = "https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer";
        public static string WorldTerrainMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer";
        public static string WorldDeLormesMap = "https://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer";
        public static string WorldLightGrayMap = "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer";
        public static string WorldShadedReliefMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer";
        public static string WorldPhysicalMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer";

        // these Esri maps show geographic tiles for the whole of world without contours of continents
        // therefore the Map should also load a shapefile of continents when using them
        public static string WorldAdminOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer";
        public static string WorldTransportationOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer";
        public static string WorldBoundariesDarkOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer";
        public static string WorldBoundariesLightOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places_Alternate/MapServer";
        public static string WorldLabelsLightGrayOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer";

        // these Esri maps show only geographic tiles for the USA
        // therefore the Map should be zoomed in to geographic bounds of USA when using them
        public static string UsaOwnerOccupiedHousing = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Owner_Occupied_Housing/MapServer";
        public static string UsaSoilSurvey = "https://services.arcgisonline.com/ArcGIS/rest/services/Specialty/Soil_Survey_Map/MapServer";
        public static string UsaPopulationOlderThanAge64 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Percent_Over_64/MapServer";
        public static string UsaPopulationYoungerThan18 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Percent_Under_18/MapServer";
        public static string UsaPopulationGrowth2015 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Projected_Population_Change/MapServer";
        public static string UsaUnemploymentRate = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Unemployment_Rate/MapServer";
        public static string UsaSocialVulnerability = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Social_Vulnerability_Index/MapServer";
        public static string UsaRetailSpendingPotential = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Retail_Spending_Potential/MapServer";
        public static string UsaPopulationChange2010 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Recent_Population_Change/MapServer";
        public static string UsaPopulationChange2000 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_1990-2000_Population_Change/MapServer";
        public static string UsaPopulationDensity = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Population_Density/MapServer";
        public static string UsaPopulationByGender = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Population_by_Sex/MapServer";
        public static string UsaMedianHouseholdIncome = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Household_Income/MapServer";
        public static string UsaMedianNetWorth = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Net_Worth/MapServer";
        public static string UsaMedianHomeValue = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Home_Value/MapServer";
        public static string UsaMedianAge = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Age/MapServer";
        public static string UsaLaborForceParticipation = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Labor_Force_Participation_Rate/MapServer";
        public static string UsaAverageHouseholdSize = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Average_Household_Size/MapServer";
        public static string UsaDiversityIndex = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Diversity_Index/MapServer";
        public static string UsaRailNetwork = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer";
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container horizontal">
    <IgbGeographicMap Height="100%" Width="100%" Zoomable="true" BackgroundContent="@StreetMapImagery">
    </IgbGeographicMap>
    <IgbGeographicMap Height="100%" Width="100%" Zoomable="true" BackgroundContent="@OceansImagery">
    </IgbGeographicMap>
    <IgbGeographicMap Height="100%" Width="100%" Zoomable="true" BackgroundContent="@TopographicImagery">
    </IgbGeographicMap>
</div>

@code {

    private IgbArcGISOnlineMapImagery StreetMapImagery;
    private IgbArcGISOnlineMapImagery OceansImagery;
    private IgbArcGISOnlineMapImagery TopographicImagery;

    protected override void OnInitialized()
    {

        IgbArcGISOnlineMapImagery image1 = new IgbArcGISOnlineMapImagery()
        {
            MapServerUri = EsriStyle.WorldStreetMap
        };

        IgbArcGISOnlineMapImagery image2 = new IgbArcGISOnlineMapImagery()
        {
            MapServerUri = EsriStyle.WorldOceansMap
        };

        IgbArcGISOnlineMapImagery image3 = new IgbArcGISOnlineMapImagery()
        {
            MapServerUri = EsriStyle.WorldTopographicMap
        };

        this.StreetMapImagery = image1;
        this.OceansImagery = image2;
        this.TopographicImagery = image3;
    }
}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

El siguiente fragmento de código muestra cómo mostrar teselas de imágenes geográficas Blazor de los servidores de imágenes de Esri en IgbGeographicMap la clase using IgbArcGISOnlineMapImagery.

@using IgniteUI.Blazor.Controls


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

protected override void OnInitialized()
{
    IgbArcGISOnlineMapImagery imagery = new IgbArcGISOnlineMapImagery()
    {
        MapServerUri = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"
    };

    this.EsriImagery = imagery;
}
razor

Utilidad de Esri

Alternativamente, puede utilizar EsriUtility, que define todos los estilos proporcionados por los servidores de imágenes de Esri.

@using IgniteUI.Blazor.Controls


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

protected override void OnInitialized()
{
    IgbArcGISOnlineMapImagery imagery = new IgbArcGISOnlineMapImagery()
    {
        MapServerUri = EsriStyle.WorldOceansMap
    };

    this.EsriImagery = imagery;
}
razor

API References

• IgbArcGISOnlineMapImagery
• IgbGeographicMap