dayjournal memo

Total 974 articles!!

OpenLayers #003 – 地理院タイル表示

Yasunori Kirimoto's avatar


画像



地理院タイルを表示するメモ。



画像



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 map = new Map ({
    target: 'map',
    layers: [
        new TileLayer({
            // 地理院タイルを指定
            source: new XYZ({
                url: 'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
                attributions: '<a href="http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html" target="_blank">地理院タイル</a>',
                attributionsCollapsible: false,
                tileSize: [256, 256],
                minZoom: 0,
                maxZoom: 18
            })
        })
    ],
    view: new View ({
        center: fromLonLat([139.767, 35.681]),
        zoom: 11
    })
});



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



book

Q&A