OpenLayers #010 – 指定位置にズーム

指定位置にズームするメモ。

script.js

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { fromLonLat } from 'ol/proj';

// 初期位置設定
const view = new View({
    center: fromLonLat([139.767, 35.681]),
    zoom: 11
});

// MIERUNE MONO読み込み
const map = new Map ({
    target: 'map',
    layers: [
        new TileLayer({
            source: new XYZ({
                url: 'https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png',
                attributions: 'Maptiles by <a href="http://mierune.co.jp" target="_blank">MIERUNE</a>, under CC BY. Data by <a href="http://osm.org/copyright" target="_blank">OpenStreetMap</a> contributors, under ODbL.',
                attributionsCollapsible: false,
                tileSize: [256, 256],
                minZoom: 0,
                maxZoom: 18
            })
        })
    ],
    // 表示設定
    view: view
});


// 指定位置にズーム
flyTo(fromLonLat([140.9, 36.9]), function() {});

// 指定位置にズーム用のカスタム関数
function flyTo(location, done) {
    const duration = 2000;
    const zoom = view.getZoom();
    let parts = 2;
    let called = false;
    function callback(complete) {
        --parts;
        if (called) {
            return;
        }
        if (parts === 0 || !complete) {
            called = true;
            done(complete);
        }
    }
    view.animate({
        center: location,
        duration: duration
    }, callback);
    view.animate({
        zoom: zoom - 1,
        duration: duration / 2
    }, {
        zoom: zoom,
        duration: duration / 2
    }, callback);
}

OpenLayersを手軽に始めるビルド環境公開しています。
openlayers-starter

• 参考文献
  OpenLayers