OpenLayers を使って、特定のポリゴンを対象に、位置とズームレベルを変更し、対象範囲のタイル画像を生成（表示）する

はじめに

現在、WebGISにおいて、タイルレイヤーでタイル画像がなければ、タイル画像を生成するプログラムを作っているのですが、
生成処理が遅いため、自動で対象範囲のタイル画像を表示するjavascriptを作りました。

特定のエリアの図形を読み込んで、その図形に合致するタイリングの中心位置を、3秒ごとに座標移動（調整可）させる処理です。

tile_scan.html

    // 地図初期化
    const map = new ol.Map({
        target: 'map',
        layers: [new ol.layer.Tile({
            name: 'osm',
            source: new ol.source.XYZ({
                url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                crossOrigin: 'anonymous',
                projection: "EPSG:3857"
            })
        })],
        view: new ol.View({
            projection: 'EPSG:2447',
            zoom: minZoom,
            center: [55785, -146886]
        })
    });
    // 巡回するエリアのjson
    const vectorSource = new ol.source.Vector({
        url: 'data/area.json',
        format: new ol.format.GeoJSON(),
    });
    const vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'blue',
                width: 2
            }),
            fill: new ol.style.Fill({
                color: 'rgba(0, 0, 255, 0.1)'
            })
        })
    });
    map.addLayer(vectorLayer);

    // 巡回するエリアの読み込み完了
    vectorSource.on('featuresloadend', function() {
        const polygon = vectorSource.getFeatures()[0].getGeometry();
        const extent = polygon.getExtent();
        map.getView().fit(extent, {
            padding: [20, 20, 20, 20]
        });
        var projection = ol.proj.get('EPSG:2447');
        var tileGrid = ol.tilegrid.createXYZ({
            extent: projection.getExtent(),
　　　　     tileSize: 512
        });
        let allTileCenters = [];
        for (let zoom = minZoom; zoom <= maxZoom; zoom++) {
            const tileRange = tileGrid.getTileRangeForExtentAndZ(extent, zoom);
            for (let x = tileRange.minX; x <= tileRange.maxX; x++) {
                for (let y = tileRange.minY; y <= tileRange.maxY; y++) {
                    const tileCoord = [zoom, x, y];
                    const tileExtent = tileGrid.getTileCoordExtent(tileCoord);
                    const center = ol.extent.getCenter(tileExtent);
                    if (polygon.intersectsCoordinate(center)) {
                        allTileCenters.push({
                            zoom, center
                        });
                    }
                }
            }
        }

        let i = 0;
        const view = map.getView();
        const interval = setInterval(() => {
            if (i >= allTileCenters.length) {
                clearInterval(interval);
                console.log("すべてのタイル画像の生成が完了しました");
                return;
            }
            const { zoom, center } = allTileCenters[i++];
            view.setZoom(zoom);
            view.setCenter(center);
            console.log("zoom=" + zoom + " x=" + center[0] + " y=" + center[1]);
        }, 3000); // タイル間の移動時間（調整可能）
    });

// 地図初期化

const map = new ol.Map({

target: 'map',

layers: [new ol.layer.Tile({

name: 'osm',

source: new ol.source.XYZ({

url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',

crossOrigin: 'anonymous',

projection: "EPSG:3857"

})

})],

view: new ol.View({

projection: 'EPSG:2447',

zoom: minZoom,

center: [55785, -146886]

})

});

// 巡回するエリアのjson

const vectorSource = new ol.source.Vector({

url: 'data/area.json',

format: new ol.format.GeoJSON(),

});

const vectorLayer = new ol.layer.Vector({

source: vectorSource,

style: new ol.style.Style({

stroke: new ol.style.Stroke({

color: 'blue',

width: 2

}),

fill: new ol.style.Fill({

color: 'rgba(0, 0, 255, 0.1)'

})

});

map.addLayer(vectorLayer);

// 巡回するエリアの読み込み完了

vectorSource.on('featuresloadend', function() {

const polygon = vectorSource.getFeatures()[0].getGeometry();

const extent = polygon.getExtent();

map.getView().fit(extent, {

padding: [20, 20, 20, 20]

});

var projection = ol.proj.get('EPSG:2447');

var tileGrid = ol.tilegrid.createXYZ({

extent: projection.getExtent(),

　　　　 tileSize: 512

});

let allTileCenters = [];

for (let zoom = minZoom; zoom <= maxZoom; zoom++) {

const tileRange = tileGrid.getTileRangeForExtentAndZ(extent, zoom);

for (let x = tileRange.minX; x <= tileRange.maxX; x++) {

for (let y = tileRange.minY; y <= tileRange.maxY; y++) {

const tileCoord = [zoom, x, y];

const tileExtent = tileGrid.getTileCoordExtent(tileCoord);

const center = ol.extent.getCenter(tileExtent);

if (polygon.intersectsCoordinate(center)) {

allTileCenters.push({

zoom, center

});

}

let i = 0;

const view = map.getView();

const interval = setInterval(() => {

if (i >= allTileCenters.length) {

clearInterval(interval);

console.log("すべてのタイル画像の生成が完了しました");

return;

}

const { zoom, center } = allTileCenters[i++];

view.setZoom(zoom);

view.setCenter(center);

console.log("zoom=" + zoom + " x=" + center[0] + " y=" + center[1]);

}, 3000); // タイル間の移動時間（調整可能）

});

ログを確認すると、3秒毎に座標が移動しているのがわかります。

夜間に仕込んでおけば、朝方にはタイル画像が生成されている…はずです。

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

はじめに

tile_scan.html

共有:

関連