Openlayersで、平面直角座標系のタイル画像を表示する

はじめに

以前にOpenlayersで平面直角座標系を表示したが、背景が地理院地図であった。今回は、自前で作成した背景タイル画像を表示させてみる

処理概要は以下の通り

・平面直角座標系の定義（前回の復習）
・平面直角座標系の解像度の定義
・タイルレイヤの設定1
・タイルレイヤの設定2

平面直角座標系の定義

proj4jsのデフォルト値では、平面直角座標系のコードが定義されていないので、プログラムの最初に、使用する平面直角座標系の定義を設定する。

        proj4.defs("EPSG:2448", "+proj=tmerc +lat_0=36 +lon_0=136 +k=0.9999 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs");
        ol.proj.proj4.register(proj4);

1 2	proj4.defs("EPSG:2448", "+proj=tmerc +lat_0=36 +lon_0=136 +k=0.9999 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs"); ol.proj.proj4.register(proj4);

平面直角座標系の解像度の定義

前回は背景が地理院地図であったっため、必要なかったが、平面直角座標系を背景にするため、解像度(resolution)の定義を設定する。平面直角座標系の範囲は、geoserverの定義から設定した。

const proj2448 = ol.proj.get('EPSG:2448');
proj2448.setExtent([-106045.51424833966, -288400.06136639323, 92091.56382666754, 37217.083288232236]);

createResolutions(epsg) {
    const projExtent = ol.proj.get('EPSG:' + epsg).getExtent();
    const startResolution = ol.extent.getHeight(projExtent) / 256;
    const resolutions = new Array(22);
    for (let i = 0, ii = resolutions.length; i < ii; ++i) {
        resolutions[i] = startResolution / Math.pow(2, i);
        console.log("resolutions[" + i + "]=" + resolutions[i]);
    }
    return resolutions;
}
createTileGrid(epsg) {
    const projExtent = ol.proj.get('EPSG:' + epsg).getExtent();
    const resolutions = this.createResolutions(epsg);
    const tileGrid = new ol.tilegrid.TileGrid({
        extent: projExtent,
        resolutions: resolutions,
        tileSize: [256, 256],
    });
}

const proj2448 = ol.proj.get('EPSG:2448');

proj2448.setExtent([-106045.51424833966, -288400.06136639323, 92091.56382666754, 37217.083288232236]);

createResolutions(epsg) {

const projExtent = ol.proj.get('EPSG:' + epsg).getExtent();

const startResolution = ol.extent.getHeight(projExtent) / 256;

const resolutions = new Array(22);

for (let i = 0, ii = resolutions.length; i < ii; ++i) {

resolutions[i] = startResolution / Math.pow(2, i);

console.log("resolutions[" + i + "]=" + resolutions[i]);

}

return resolutions;

}

createTileGrid(epsg) {

const projExtent = ol.proj.get('EPSG:' + epsg).getExtent();

const resolutions = this.createResolutions(epsg);

const tileGrid = new ol.tilegrid.TileGrid({

extent: projExtent,

resolutions: resolutions,

tileSize: [256, 256],

});

}

タイルレイヤの設定1

タイルレイヤを設定する。タイルソースにはol.source.XYZクラスを利用する。

    var childLayer = new ol.layer.Tile({
        name: item.id,
        source: new ol.source.XYZ({
            url: "Wms/GetMap2?layerId=" + item.id + "&z={z}&x={x}&y={y}",
            projection: "EPSG:" + item.epsg,
            tileGrid: this.createTileGrid(item.epsg)
        })
    });

var childLayer = new ol.layer.Tile({

name: item.id,

source: new ol.source.XYZ({

url: "Wms/GetMap2?layerId=" + item.id + "&z={z}&x={x}&y={y}",

projection: "EPSG:" + item.epsg,

tileGrid: this.createTileGrid(item.epsg)

})

});

Y座標の方向が逆向きに進行しているため、正しく表示させれなかった。

タイルレイヤの設定2

OpenLayersのデモソースを見てみると、{-y}と定義された記述があり、もしかと思い、
試したところ、Y座標の方向が意図する方向に進行し、正しく表示させれた。

    var childLayer = new ol.layer.Tile({
        name: item.id,
        source: new ol.source.XYZ({
            url: "Wms/GetMap2?layerId=" + item.id + "&z={z}&x={x}&y={-y}",
            projection: "EPSG:" + item.epsg,
            tileGrid: this.createTileGrid(item.epsg)
        })
    });