Question

我在vue组件中有一个基本的openlayers映射：

<template>
  <div id="map" style="width: 300px; height: 200px;"></div>
</template>

<script>
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
export default {
  mounted() {
     var map = new Map({
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 2,
        }),
      });
  },
};
</script>

现在，我想在SPA的多个页面上重用此组件，因为我想避免重新加载图块并维护地图上的要素。正常情况下（如果不是地图，而是普通数据）我可以将数据状态保留在vuex存储区中，但是由于此openlayers对象绑定到此特定的“ map” div，因此我看不到有可能。我尝试过vue元素，但是没有运气。那么如何解决呢？

vue.js中组件的Singleton实例

0 个答案: