OpenLayers.Blazorの導入

私はこれまでのWeb開発では、「WebForms」を使っていましたが、WebFormsは今後Microsoftのサポートから外れ、Blazorに移植することを推奨されています。ので今後を見据え、「Blazor」を試すことにしました。

いろいろ書籍も買いましたが、初歩的なことばっかりで、詳しい説明もなく、正直あんまり参考になりませんでした。最近はyoutubeで海外の方が紹介しているので、そちらの方が、参考になりました。

「Blazor」を試すついでに、私は地図システムの開発を行っているので、「Blazor」からOpenLayersを使えないか検索したところ、OpenLayers.BlazorのNuGet パッケージがあったので合わせて試しました。

1. Blazorプロジェクトの作成

Vislal Studio2022を起動し、Blazorプロジェクトの作成します。

2. OpenLayers.Blazorの導入

nugetで、OpenLayers.Blazorの最新版をダウンロードします。

3. OpenLayers.jsの導入

別途、OpenLayers.Blazorのデモソースをダウンロードし、デモソースを参考に、環境を構築します。
デモソースにOpenLayers.Blazor.Demo.Serverのプロジェクトがあるので、wwwroot配下のcssやjavascriptをコピーします。

4. MainMap.razorファイルの作成

OpenLayers.Blazorを利用した、MainMap.razorファイルを作成しました。

@page "/"
@rendermode Components.RenderMode.DefaultRenderMode

<Map @ref="_map" Style="height:800px" class="card">
    <Layers>
        <Layer SourceType="SourceType.XYZ" 
               Url="https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png" 
               Format="image/png" 
               CrossOrigin="anonymous" />
    </Layers>
</Map>

@code {
    private Map? _map { get; set; }
    private double _opacity0 = 1, _opacity1 = .3, _opacity2 = .3, _opacity3 = 1;
    private bool _visibility0 = true;
    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _map.Center = new[] { 1660013.0, 1185171.0 };
            StateHasChanged(); // update _map
        }
        return base.OnAfterRenderAsync(firstRender);
    }
}