Vue3使用vue3-openlayers时如何访问ol-map实例的getSize等原生方法

问题原因 #

• 你在onMounted中错误地直接执行了getSize()，而非传入函数引用，导致函数在组件挂载完成、ref完成绑定前就提前触发，此时map.value还未完成赋值，自然为空。
• ol-map是vue3-openlayers封装的组件，组件实例本身不直接提供OpenLayers原生的getSize方法，你需要先获取组件暴露的原始OpenLayers地图实例再调用对应方法。

解决代码 #

模板部分无需修改

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

逻辑部分修正后代码

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

export default defineComponent({
    setup() {
        // 用于绑定组件ref
        const map = ref<any>(null);

        const getSize = () => {
            // 先判断ref绑定成功，再取组件暴露的原始地图实例调用方法
            // 可选链操作符避免空值报错
            console.log(map.value?.map?.getSize());
        };

        // 传入函数引用，不要加括号立即执行
        onMounted(getSize);
    
        return { map, getSize }
});

内容的提问来源于stack exchange，提问作者Philip F.