「ASP.NET Web API」を利用して、GeoJsonデータを取得する

引き続き、「ASP.NET」と「OpenLayers」を利用して、WebGISを開発中でして、
これまで、OpenLayersに表示する図形データは、「System.Web.UI.Page」クラスで行ていましたが、メソッド名が独自で定義できないPage_Load()のみだったので、「ASP.NET Web API」で実装することにしました。それにしても、「ASP.NET」は色んな技術があり、覚えるのが大変ですね。

「ASP.NET Web API」により、独自のメソッド名が定義できるため、クライアントからは使いやすくなると考えています。

各処理とファイルは以下の通りです。

ルーティングの設定…WebApiConfig.cs
APIコントローラー…ReportController.cs
クライアント…map.js

WebApiConfig.cs

WebApiConfigでは、ルーティングの設定を行います。デフォルトの設定から少し変更しました。routeTemplateに設定された{controller}がクラスの先頭部分、{action}がメソッド名になります。URLとクラス名＋メソッド名が紐づいているので、クライアントからは覚えやすいです。

あと、APIコントローラーでは、戻り値がデフォルトがxml形式で返却されるので、json形式で返却されるようHttpConfiguration.Formattersの内容を変更しています。

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.MapHttpAttributeRoutes();
        var json = config.Formatters.JsonFormatter;
        json.SerializerSettings.PreserveReferencesHandling = Newtonsoft.Json.PreserveReferencesHandling.Objects;
        config.Formatters.Remove(config.Formatters.XmlFormatter);

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "Controllers/{controller}/{action}/{id}",
            defaults: new { id=RouteParameter.Optional }
        );
    }
}

public static class WebApiConfig

{

public static void Register(HttpConfiguration config)

{

config.MapHttpAttributeRoutes();

var json = config.Formatters.JsonFormatter;

json.SerializerSettings.PreserveReferencesHandling = Newtonsoft.Json.PreserveReferencesHandling.Objects;

config.Formatters.Remove(config.Formatters.XmlFormatter);

config.Routes.MapHttpRoute(

routeTemplate: "Controllers/{controller}/{action}/{id}",

defaults: new { id=RouteParameter.Optional }

);

}

ReportController.cs

APIコントローラーでは、GetFeatures()という全図形を返却するメソッドを作成しました。
通常のAPIコントローラーでは、Listを返すと、フレームワークでJson形式に変換してクライアントに返却してもらえますが、今回は「OpenLayers」で図形データとして読み込む必要があるため、GeoJson形式で返却します。

APIコントローラーでは、自動でGeoJson形式に変換できないため、自前でGeoJson変換を行い、HttpResponseMessage形式に格納してクライアントに返します。GeoJson形式に変換は、空間演算ライブラリのNetTopologySuiteにある、GeoJsonWriterを利用します。

    public class ReportController : ApiController
    {
        public HttpResponseMessage GetFeatures()
        {
            var response = new HttpResponseMessage();
            try
            {
                var features = new FeatureCollection();
                var geoJsonWriter = new GeoJsonWriter();
                features.CRS = new NamedCRS("urn:ogc:def:crs:EPSG::3857");
                var wktReader = new WKTReader();
                var reports = this.ReportService.GetReports();
                foreach (var report in reports)
                {
                    var wkt = report.Geometry.AsText();
                    var geometry = wktReader.Read(wkt);
                    var attributes = new AttributesTable();
                    attributes.AddAttribute("ReportId", report.ReportId.ToString());
                    attributes.AddAttribute("ReportStatus", report.ReportStatus);
                    var feature = new Feature(geometry, attributes);
                    features.Add(feature);
                }

                var jsonString = geoJsonWriter.Write(features);
                response = Request.CreateResponse(HttpStatusCode.OK);
                response.Content = new StringContent(jsonString, Encoding.UTF8, "application/json");
            }
            catch (Exception ex)
            {
                throw ex;
            }
            return response;
        }    
    }

public class ReportController : ApiController

{

public HttpResponseMessage GetFeatures()

{

var response = new HttpResponseMessage();

try

{

var features = new FeatureCollection();

var geoJsonWriter = new GeoJsonWriter();

features.CRS = new NamedCRS("urn:ogc:def:crs:EPSG::3857");

var wktReader = new WKTReader();

var reports = this.ReportService.GetReports();

foreach (var report in reports)

{

var wkt = report.Geometry.AsText();

var geometry = wktReader.Read(wkt);

var attributes = new AttributesTable();

attributes.AddAttribute("ReportId", report.ReportId.ToString());

attributes.AddAttribute("ReportStatus", report.ReportStatus);

var feature = new Feature(geometry, attributes);

features.Add(feature);

}

var jsonString = geoJsonWriter.Write(features);

response = Request.CreateResponse(HttpStatusCode.OK);

response.Content = new StringContent(jsonString, Encoding.UTF8, "application/json");

}

catch (Exception ex)

{

throw ex;

}

return response;

}

map.js

図形レイヤとして、APIコントローラーを呼びます。

var layer1 = new ol.layer.Tile({
    name: '電子国土基本図(標準地図)',
    type: 'base',
    source: new ol.source.XYZ({
        url: "https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",
        projection: "EPSG:3857"
    })
});
var vectorSource = new ol.source.Vector(
    {
        url: '../../Controllers/Report/GetFeatures',
        projection: 'EPSG:3857',
        format: new ol.format.GeoJSON()
    });

var layer2 = new ol.layer.Vector({
    name: 'Vecteur',
    source: vectorSource,
    style: function (feature) {
        var style = getStyle(feature);
        return style;
    }
});

var map = new ol.Map({
    target: 'MapPanel',
    view: new ol.View({
        center: center,
        zoom: 11,
        minZoom: 10,
        maxZoom: 18
    }),
    layers: [layer1, layer2]
});