Esri Maps에서 이미지를 표시하는 Blazor

​IgbArcGISOnlineMapImagery는 Esri 회사에서 만든 무료 지리 이미지 매핑 서비스입니다. 40개 이상의 세계 지리 이미지 타일과 미국의 일부 주제별 타일을 제공합니다. 이 지리 이미지 서비스는 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

다음 코드 조각은 IgbArcGISOnlineMapImagery 클래스를 사용하여 Esri 이미지 서버의 Blazor 지리적 이미지 타일을 IgbGeographicMap에 표시하는 방법을 보여줍니다.

@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

에스리 유틸리티

또는 Esri 이미지 서버에서 제공하는 모든 스타일을 정의하는 EsriUtility를 사용할 수 있습니다.

@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