Blazor 지리적 폴리곤 맵

Blazor 맵 구성 요소에서 IgbGeographicShapeSeries 사용하여 지리적 컨텍스트에서 모양 폴리곤을 사용하여 지리 공간 데이터를 표시할 수 있습니다. 이러한 유형의 지리적 시리즈는 종종 지리적 위치로 정의된 국가 또는 지역의 모양을 렌더링하는 데 사용됩니다.

Blazor 지리적 폴리곤 맵 예제

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="@null">
            <IgbGeographicShapeSeries ShapefileDataSource="Data"
                                   Outline="black"
                                   Thickness="0.5"
                                   StyleShapeScript="onStylingShape"
                                   MarkerTemplateScript="onStylingMarker"
                                   MarkerCollisionAvoidance="@CollisionAvoidanceType.Omit"/>
        </IgbGeographicMap>
    </div>
</div>

@code {

    private IgbShapeDataSource Data;

    protected override void OnInitialized()
    {

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

function onStylingShape(o, e) {
    // applying conditional styling based on Contient field loaded from DBF file
    var c = e.item.getFieldValue("Continent")
    if (c == "Africa") {
        e.shapeFill = "#ECB912"; 
    } else if (c == "Asia") {
        e.shapeFill = "#E11D1D";
    } else if (c == "Europe") {
        e.shapeFill = "#2894EC";
    } else if (c == "South America" || c == "North America") {
        e.shapeFill = "#0CC308";
    } else if (c == "Australia") {
        e.shapeFill = "#B42AE9";
    } else {
        e.shapeFill = "gray";
    }
    e.shapeOutline = "black";
}
igRegisterScript("onStylingShape", onStylingShape, false);

function onStylingMarker(o, e) {

    return {
        // measuing size of a marker based on lenght of the Code text field loaded from DBF file
        measure: function (measureInfo) {
            var cont = measureInfo.context;
            var data = measureInfo.data;
            var code = "null";
            if (data.item != null) {
                code = data.item.getFieldValue("Code").toString();
            }
            var height = cont.measureText("M").width;
            var width = cont.measureText(code).width;
            measureInfo.width  = width;
            measureInfo.height = height;
        },

        // rendering a marker with the Code text field inside of filled rectanlge
        render: function (renderInfo) {
            //console.log("mapStyling onStylingMarker render ");
            var ctx = renderInfo.context;
            if (renderInfo.isHitTestRender) {
                ctx.fillStyle = renderInfo.data.actualItemBrush.fill;
            } else {
                ctx.fillStyle = "black";
            }

            var halfWidth  = renderInfo.availableWidth / 2.0;
            var halfHeight = renderInfo.availableHeight / 2.0; 

            var cx = renderInfo.xPosition;
            var cy = renderInfo.yPosition;

            var x = renderInfo.xPosition - halfWidth;
            var y = renderInfo.yPosition - (halfHeight);
 
            if (renderInfo.isHitTestRender) {
                ctx.fillRect(x, y, renderInfo.availableWidth, renderInfo.availableHeight);
            } else { 

                ctx.fillStyle = "rgba(100, 100, 100, 0.5)";
                ctx.fillRect(x - 2, cy - 2, renderInfo.availableWidth + 4, renderInfo.availableHeight + 4);

                ctx.lineWidth = 0.5;
                ctx.strokeStyle = "#7A7A7A"; 
                ctx.strokeRect(x - 2, cy - 2, renderInfo.availableWidth + 4, renderInfo.availableHeight + 4); 

                var data = renderInfo.data;
                var code = data.item.getFieldValue("Code").toString();
                ctx.font = "bold 8px Verdana";
                ctx.textAlign = "center";
                ctx.textBaseline = "top";
                ctx.fillStyle = "#EEEEEE";
                ctx.fillText(code, cx, cy);
            }
        }
    }
}
 
igRegisterScript("onStylingMarker", onStylingMarker, true);
 js

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

이 샘플이 마음에 드시나요? Ignite UI for Blazor에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

IgbGeographicShapeSeries는 지리 공간 데이터가 폴리라인 대신 다각형으로 렌더링된다는 점을 제외하면 IgbGeographicPolylineSeries와 매우 유사하게 작동합니다.

데이터 요구 사항

지도 컨트롤에 있는 다른 유형의 지리 계열과 마찬가지로 에는 IgbGeographicShapeSeries 개체 배열에 바인딩할 수 있는 속성이 있습니다 DataSource. 또한 이 개체의 각 데이터 항목에는 지리적 위치를 나타내는 x 및 y 값이 있는 개체 배열 배열을 사용하여 단일/다중 모양을 저장하는 하나의 데이터 열이 있어야 합니다. 그런 다음 이 데이터 열이 속성에 매핑됩니다 ShapeMemberPath. 이 IgbGeographicShapeSeries 매핑된 데이터 열의 점을 사용하여 지도 컨트롤에 다각형을 그립니다.

코드 조각

다음 코드는 IgbShapeDataSource를 사용하여 모양 파일에서 로드된 전 세계 국가의 모양에 IgbGeographicShapeSeries 바인딩하는 방법을 보여줍니다.

@using IgniteUI.Blazor.Controls


<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <GeographicShapeSeries ShapefileDataSource="DataSource"/>
</IgbGeographicMap>

@code {

    public IgbShapeDataSource DataSource;

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

Blazor 지리적 폴리곤 맵