如何访问vue3中openlayers地图的方法

Question

我使用vue3-openlyers创建如下地图：

<ol-map ref="map">
...
</ol-map>

在Vue的composition api中，我尝试访问getSize()map的方法：

import { ref, defineComponent, onMounted } from "vue";

export default defineComponent({
    setup() {
        //works with views
        const map = ref<any>(null);

        const getSize = () => {
            // does not work
            console.log(map.value.getSize());
            console.log(map.getSize());
        };

        onMounted(getSize());
    
        return { map, getSize }
});

我收到以下错误： TypeError: map.value is null

我怀疑地图变量没有更新。我该如何解决这个错误？

Answer 1

您可以使用 调用引用地图的方法this.$refs.map.map.<method>。（this无法在组合API内部访问！！在eg中使用它mounted()）。

例如，您可以获得地图的大小： this.$refs.map.map.getSize()