Blazor Binding and Overlaying Multiple Shape Files

In the Ignite UI for Blazor map, you can add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. For example, IgbGeographicSymbolSeries for plotting geographic locations of ports, the IgbGeographicPolylineSeries for plotting routes between ports, and the IgbGeographicShapeSeries for plotting shapes of countries.

Blazor Binding and Overlaying Multiple Shape Files Example

이 주제는 지도 구성 요소에서 여러 지리적 연속을 표시하는 단계별로 안내합니다. 모든 지리 연속은 셰이프 파일에서 로드된 지리 공간 데이터를 따라IgbShapeDataSource 수업. 참고하세요 형태 파일 바인딩 더 많은 정보를 위한 주제IgbShapeDataSource 객체.

IgbGeographicSymbolSeries– 주요 도시의 위치 표시
IgbGeographicPolylineSeries– 주요 항구 간 경로 표시
IgbGeographicShapeSeries– 세계 각국의 형태를 보여줍니다

위의 지리적 계열이나 다른 조합을 사용하여 원하는 데이터를 표시할 수 있습니다.

Importing Components

먼저 필수 구성 요소와 모듈을 가져옵니다.

// in Program.cs file

builder.Services.AddIgniteUIBlazor(
    typeof(IgbGeographicMapModule),
    typeof(IgbDataChartInteractivityModule)
);

Creating Series

다음으로, 나중에 다른 유형의 쉐이프파일을 로드할 몇 가지 지리적 시리즈가 포함된 지도를 만들어야 합니다.

<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <IgbGeographicShapeSeries ShapefileDataSource="@AsiaShape" Outline="Black" Thickness="1" Brush="Red" />
    <IgbGeographicShapeSeries ShapefileDataSource="@EuropeShape" Outline="Black" Thickness="1" Brush="Purple" />
</IgbGeographicMap>

Loading Shapefiles

다음, 페이지 구성자에서 지리적 지도 컴포넌트에서 표시하고 싶은 각 쉐이프파일에 대해 a를IgbShapeDataSource 추가하세요.

public IgbShapeDataSource AsiaShape;
public IgbShapeDataSource EuropeShape;

protected override void OnInitialized()
{
    this.AsiaShape = new IgbShapeDataSource()
    {
        ShapefileSource = "https://static.infragistics.com/xplatform/shapes/world_region_asia.shp",
        DatabaseSource = "https://static.infragistics.com/xplatform/shapes/world_region_asia.dbf"
    };

    this.EuropeShape = new IgbShapeDataSource()
    {
        ShapefileSource = "https://static.infragistics.com/xplatform/shapes/world_region_europe.shp",
        DatabaseSource = "https://static.infragistics.com/xplatform/shapes/world_region_europe.dbf"
    };
}

Map Background

또한 모양 파일이 애플리케이션에 충분한 지리적 컨텍스트(예: 국가 모양)를 제공한 경우 지도 배경 콘텐츠에서 지리적 이미지를 숨길 수도 있습니다.

<IgbGeographicMap Height="100%" Width="100%" BackgroundContent="@null"/>

Summary

귀하의 편의를 위해 위의 모든 코드 조각은 아래의 하나의 코드 블록으로 결합되어 프로젝트에 쉽게 복사할 수 있습니다.

@using IgniteUI.Blazor.Controls


<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <IgbGeographicShapeSeries ShapefileDataSource="AsiaShape" Outline="Black" Thickness="1" Brush="Red" />
    <IgbGeographicShapeSeries ShapefileDataSource="EuropeShape" Outline="Black" Thickness="1" Brush="Purple" />
</IgbGeographicMap>

@code {

    public IgbShapeDataSource AsiaShape;
    public IgbShapeDataSource EuropeShape;

    protected override void OnInitialized()
    {
        this.AsiaShape = new IgbShapeDataSource()
        {
            ShapefileSource = "https://static.infragistics.com/xplatform/shapes/world_region_asia.shp",
            DatabaseSource = "https://static.infragistics.com/xplatform/shapes/world_region_asia.dbf"
        };

        this.EuropeShape = new IgbShapeDataSource()
        {
            ShapefileSource = "https://static.infragistics.com/xplatform/shapes/world_region_europe.shp",
            DatabaseSource = "https://static.infragistics.com/xplatform/shapes/world_region_europe.dbf"
        };
    }
}

Blazor Binding and Overlaying Multiple Shape Files