vue3 监听openlayer放大缩小倍数

在Vue3中，你可以通过监听OpenLayers的`zoomend`事件来跟踪地图缩放级别的变化。OpenLayers本身并没有直接提供Vue组件绑定的API，但你可以结合Vuex或者自定义事件来管理这个状态。这里有一个简单的示例：

首先，在Vuex store里定义一个mapZoom的状态：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    mapZoom: 0,
  },
  mutations: {
    setMapZoom(state, zoom) {
      state.mapZoom = zoom;
    },
  },
});

然后在OpenLayers的实例中，添加`zoomend`事件处理器，并在其中更新store：

export default new OL.Map({
  // ...其他配置
  on('zoomend', (event) => {
    const zoom = event.target.getZoom();
    store.commit('setMapZoom', zoom);
  }),
});

最后，在Vue组件中通过`mapZoom`属性来监听这个值的变化：

<template>
  <div :style="{ transform: `scale(${store.state.mapZoom})` }"></div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['mapZoom']),
  },
};
</script>

这样，当地图放大或缩小时，`mapZoom`就会实时更新。