OpenLayers #002 – OpenStreetMap表示

OpenStreetMapを表示するメモ。

script.js

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
// OSMタイル読み込み
import OSMTile from 'ol/source/OSM';

// マップ読み込み
const map = new Map ({
    target: 'map',
    layers: [
        new TileLayer({
            // OSMタイルを指定
            source: new OSMTile()
        })
    ],
    view: new View ({
        center: fromLonLat([139.767, 35.681]),
        zoom: 11
    })
});

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

• 参考文献
  OpenLayers