【JS】 OpenLayers ～ 入門編 ～

Webグラフ / 地図作成ツール

■ OpenLayers

 * 地図表示するJavaScriptライブラリ

ライセンス

 * 2-Clause BSD
https://openlayers.org/en/latest/doc/

■ 公式サイト

https://openlayers.org/

例

https://openlayers.org/en/latest/examples/
デモ（アニメーション）
https://openlayers.org/en/latest/examples/animation.html

■ その他サイト

http://blog.godo-tys.jp/openlayer-tutorial/

■ サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css" type="text/css">
<script src="">https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js">
<title>OpenLayers Hello World</title>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
window.onload = function(){
    var map = createMap();    
}

function createMap() {
    return new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false
            }
        }),
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
}
</script>
</body>
</html>

参考文献

https://qiita.com/maitake9116/items/4f1d7b3b6748dc42f09c