Vue.jsでOpenLayersを使ってマップを表示する

目次

概要

Vue.jsでOpenLayersを使おうと思ったら、はまってしまった部分があったので、そのはまってしまった部分を含めて、Vue.js内でOpenLayersを使って地図を表示させるところまでを紹介します。

環境

  • Vue.js 2.5
  • Openlayers 4.6

はまったところ

最初に、私がはまってしまったところについて説明をします。

私は当初、Vue.jsのコンポーネント内でマップを表示する際に、OpenLayersでマップを表示してからVue.jsのオブジェクトを作成しました。

しかし、この順番ではマップの表示が終わった後に、Vue.jsでDOMの処理が行われるため、うまく動作しません。

これに中々気づくことができず、問題のVue.jsの管理下でマップを表示させるのに、かなりの時間を使いました。

コード

実際に動作するコードはこのようになります。

HTMLファイルでVue.jsとOpenLayersの読み込み、さらにJavaScriptを直接記述しています。

<!DOCTYPE>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.css">
</head>
<body>
    <div id="vue-map">
        <div id="map">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.js"></script>
    <script type="text/javascript">
        window.onload = function() {
            var vue = new Vue({
                el: '#vue-map',
                data: {
                    map: null
                }
            });


            vue.map = 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: 4,
                }),
            });
        }
    </script>
</body>
</html>

コツとして、Vue.jsのオブジェクトを作ってから、マップを表示するように処理の順番を変えます。

オブジェクトのdataのmapにOpenLayersのオブジェクトを代入していますが、これをVue.jsのオブジェクトの作成時に即時関数で代入しようとすると、うまく表示できないということがあったので、このようにオブジェクトの外で代入するようにしています。

まとめ

これを実現するために、一日以上かけてしまいました。

分かってしまえば簡単なのですが、気づけるまでにはかなりハマってしまったので、Vue.jsとOpenLayersの連携で苦しんでいる人の参考になればと思います。