OpenLayersを利用して、任意の縮尺を表示する

2022/2/9 GIS, JavaScript, OpenLayers, プログラミング

はじめに

OpenLayersのデモでは、一般的なGISの機能にある任意の縮尺の例がないため、印刷処理を参考に実装してみた。

実装例

リボンメニューに縮尺のコンボボックスを生成し、クリックイベントで、縮尺に応じたresolution値を算出し、地図に設定する。

Resolution.js

OpenLayersでは、縮尺の設定メソッドは用意されていないので、resolution値を算出し地図に設定する。
OnViewRibbonButtonClick()から呼ばれるはリボンメニューのクリックイベント。
また、縮尺変更後は、OSMなどのタイルレイヤは、画像が変わらなかったため、全レイヤのリフレッシュを行う。

var map = new ol.Map({
    target: 'MapPanel',
    view: new ol.View({
        center: [14897735, 4070125],
        zoom: 15,
        minZoom: 10,
        maxZoom: 18
    })
});

var scaleLine = new ol.control.ScaleLine({
    units: 'metric'
});
map.addControl(scaleLine);

function OnViewRibbonButtonClick(s, e) {
    var text = e.item.text;
    if (text === '縮尺') {
        var scale = Number(e.parameter);
        var resolution = getResolutionFromScale(scale);
        map.getView().setResolution(resolution);
        map.getLayers().forEach(function (layer) {
            let source = layer.getSource();
            source.refresh();
        });
    }
}
function getResolutionFromScale(scale) {
    var INCHES_PER_UNIT = 39.37;
    var DOTS_PER_INCH = 25.4 / 0.28;
    var resolution = scale / (INCHES_PER_UNIT * DOTS_PER_INCH);
    return resolution;
}