国土地理院地図 × OpenLayers v5.3.0 のサンプル

Google MAP を使うと料金が発生する可能性があるとかないとか。

所在地案内など、簡単な機能だけなら無料枠で問題なさそうですが、
ルート探索など、システマチックな使用だと料金が発生するらしい。

代替として地理院地図を使用する前に、知識として確認しておきます。

料金表 | Google Maps Platform | Google Cloud

国土地理院地図 × OpenLayers のメリット

ルート探索など、Google が提供している機能については損なわれますが、
白地図や等高線など Google MAP では提供されていない地図があったりします。

また、オフライン版の提供もされています。
GIS系のシステムを作るのであれば、ぜひ問い合わせてみましょう。

ピンを立てたり、吹き出しを作ったり、
それなりの機能は OpenLayers で実装できるようになっています。

今回は、WEBサイトに地図を表示するだけのサンプルを
備忘録がわりに投稿しておきたいと思います。

ドキュメント

OpenLayers ドキュメント

OpenLayers - Documentation
何ができるかは、右上の Examples からも確認できます。

国土地理院ドキュメント

地理院地図｜ヘルプ

サンプルコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>OpenLayers × 国土地理院 GIS</title>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <script
        src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
    <style>
        .map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>

<body>
    <h2>OpenLayers × 国土地理院 GIS</h2>
    <div id="map" class="map"></div>
    <script>
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        attribution: [
                            new ol.control.Attribution({
                                html: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>地理院タイル</a>"
                            })
                        ],
                        url: "https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png",
                        projection: "EPSG:3857"
                    })
                })
            ],
            target: 'map',
            controls: ol.control.defaults({
                attributionOptions: {
                    collapsible: false
                }
            }),
            view: new ol.View({
                center: ol.proj.fromLonLat([135.3777278, 33.7279982]),
                zoom: 14
            })
        });
    </script>
</body>

</html>

good-arrow’s blog

https://good-arrow.net/