playwrightを利用して、OSMや地理院のタイルを平面直角座標系でタイリングする

はじめに

庁内などで OpenStreetMap（OSM）や国土地理院のタイル画像を背景として利用したい場合があります。しかし、これらのタイルは座標系が Web Mercator（EPSG:3857）であるため、平面直角座標系に変換しないと正しく表示されません。
※そのまま利用すると、最大700mのズレがありました。

そこで、QGIS の QMetaTiles プラグインを利用しましたが、Web Mercator（EPSG:3857）専用のプラグインであるため、平面直角座標系でエクスポートできないことが分かりました。さらに、「Generate XYZ Tiles」も期待どおりに動作しなかったため、自作することにしました。

以前、OpenLayers を利用して、平面直角座標系のマップ上にOSMや国土地理院の背景を表示した実績があり、正しく表示されることを確認していました。そのため、ブラウザを利用してタイル画像を生成する方法を採用することにしました。

処理概要は以下の通り

IISを用意し、OpenLayersが稼働する環境を準備する
事前に座標系、タイリング対象の矩形範囲、ズームレベルを設定
ズームレベルおよびX・Y座標を順に変更しながらブラウザにアクセスし、表示結果を画像として保存
ブラウザ操作には Playwright を利用。Playwright は、ブラウザを自動操作するための C# ライブラリ

Program.cs

Playwright では、NetworkIdle = ネットワーク通信が落ち着くまで待ってくれます。画面で確認しましたが、タイリング画像がロードされるまで、保存処理が走らないので、画像の取りこぼしがありませんでした。

static async Task Main()
{
    using var playwright = await Playwright.CreateAsync();
    await using var browser = await playwright.Chromium.LaunchAsync(
    new BrowserTypeLaunchOptions
    {
        Headless = false   // 画面表示したいなら false
    });

    var context = await browser.NewContextAsync(new BrowserNewContextOptions
    {
        ViewportSize = new() { Width = 512, Height = 512 }
    });

    int delaySeconds = int.Parse(ConfigurationManager.AppSettings["delaySeconds"]);
    var extent = ConfigurationManager.AppSettings["extent"].Split(',').Select(x => double.Parse(x.Trim())).ToArray();
    var tillingPath = ConfigurationManager.AppSettings["tillingPath"];
    var tillingUrl = ConfigurationManager.AppSettings["tillingUrl"];
    int minZoom = int.Parse(ConfigurationManager.AppSettings["minZoom"]);
    int maxZoom = int.Parse(ConfigurationManager.AppSettings["maxZoom"]);
    var type = ConfigurationManager.AppSettings["type"];

    double baseMinX = extent[0];
    double baseMinY = extent[1];
    double baseMaxX = extent[2];
    double baseMaxY = extent[3];

    var page = await context.NewPageAsync();

    for (int z = minZoom; z <= maxZoom; z++)
    {
        int tilesPerSide = (int)Math.Pow(2, z);
        double totalWidth = baseMaxX - baseMinX;
        double totalHeight = baseMaxY - baseMinY;
        double tileWidth = totalWidth / tilesPerSide;
        double tileHeight = totalHeight / tilesPerSide;
        for (int x = 0; x < tilesPerSide; x++)
        {
            for (int y = 0; y < tilesPerSide; y++)
            {
                double tileMinX = baseMinX + x * tileWidth;
                double tileMaxX = tileMinX + tileWidth;
                double tileMaxY = baseMaxY - y * tileHeight;
                double tileMinY = tileMaxY - tileHeight;
                var dir = $"{tillingPath}/{type}/{z}/{x}";
                int flippedY = (tilesPerSide - 1) - y;
                var filePath = $"{dir}/{flippedY}.png";
                if (File.Exists(filePath))
                {
                    continue;
                }
                string url = $"{tillingUrl}?bbox={tileMinX},{tileMinY},{tileMaxX},{tileMaxY}&type={type}";
                Console.WriteLine($"Z:{z} X:{x} Y:{y}");
                await page.GotoAsync(url);
                await page.WaitForLoadStateAsync(LoadState.NetworkIdle);
                Directory.CreateDirectory(dir);
                await page.ScreenshotAsync(new PageScreenshotOptions
                {
                    Path = filePath,
                    FullPage = false
                });            
            }
        }
    }
}

static async Task Main()

{

using var playwright = await Playwright.CreateAsync();

await using var browser = await playwright.Chromium.LaunchAsync(

new BrowserTypeLaunchOptions

{

Headless = false // 画面表示したいなら false

});

var context = await browser.NewContextAsync(new BrowserNewContextOptions

{

ViewportSize = new() { Width = 512, Height = 512 }

});

int delaySeconds = int.Parse(ConfigurationManager.AppSettings["delaySeconds"]);

var extent = ConfigurationManager.AppSettings["extent"].Split(',').Select(x => double.Parse(x.Trim())).ToArray();

var tillingPath = ConfigurationManager.AppSettings["tillingPath"];

var tillingUrl = ConfigurationManager.AppSettings["tillingUrl"];

int minZoom = int.Parse(ConfigurationManager.AppSettings["minZoom"]);

int maxZoom = int.Parse(ConfigurationManager.AppSettings["maxZoom"]);

var type = ConfigurationManager.AppSettings["type"];

double baseMinX = extent[0];

double baseMinY = extent[1];

double baseMaxX = extent[2];

double baseMaxY = extent[3];

var page = await context.NewPageAsync();

for (int z = minZoom; z <= maxZoom; z++)

{

int tilesPerSide = (int)Math.Pow(2, z);

double totalWidth = baseMaxX - baseMinX;

double totalHeight = baseMaxY - baseMinY;

double tileWidth = totalWidth / tilesPerSide;

double tileHeight = totalHeight / tilesPerSide;

for (int x = 0; x < tilesPerSide; x++)

{

for (int y = 0; y < tilesPerSide; y++)

{

double tileMinX = baseMinX + x * tileWidth;

double tileMaxX = tileMinX + tileWidth;

double tileMaxY = baseMaxY - y * tileHeight;

double tileMinY = tileMaxY - tileHeight;

var dir = $"{tillingPath}/{type}/{z}/{x}";

int flippedY = (tilesPerSide - 1) - y;

var filePath = $"{dir}/{flippedY}.png";

if (File.Exists(filePath))

{

continue;

}

string url = $"{tillingUrl}?bbox={tileMinX},{tileMinY},{tileMaxX},{tileMaxY}&type={type}";

Console.WriteLine($"Z:{z} X:{x} Y:{y}");

await page.GotoAsync(url);

await page.WaitForLoadStateAsync(LoadState.NetworkIdle);

Directory.CreateDirectory(dir);

await page.ScreenshotAsync(new PageScreenshotOptions

{

Path = filePath,

FullPage = false

});

}

Tilling.js

引数の矩形に地図を移動させます。

initMap() {
    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);
    const proj2448 = ol.proj.get('EPSG:2448');
    proj2448.setExtent([-106045.51424833966, -288400.06136639323, 219571.6304062860, 37217.083288232236]);

    const params = new URLSearchParams(location.search);
    var std = 'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png';
    var osm = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
    const type = params.get("type");
    var url = osm;
    if(type === "std"){
        url = std;
    }
    this.map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                name: "OSM",
                type: 'base',
                source: new ol.source.XYZ({
                    url: std,
                    crossOrigin: 'anonymous',
                    projection: "EPSG:3857"
                })
            })
        ],
        view: new ol.View({
            projection: 'EPSG:2448',
            enableRotation: false,
        }),
        controls: [],
    });

    var extent = [
      0, -200000,100000, -100000
    ];

    const bbox = params.get("bbox");
    if (bbox) {
      extent = bbox.split(',').map(Number);
    }

    this.map.getView().fit(extent);
}