vue3加载tiff房屋设计图，可以鼠标滚动放大缩小，抓取移动，选点测距

在 Vue3 中加载 TIFF 房屋设计图并实现滚动、缩放、拖动以及点击测量距离的功能，通常会结合一些前端库如 Vue-Image-Gallery、vue-zoom 图片查看组件以及测绘相关的 JavaScript 库。以下是一个概述步骤：

1. **安装依赖**:
- 使用 `vue-image-zoom` 或者自定义的图片查看组件库（如果有的话）来处理图片的交互效果。
- 如果需要测距功能，可能需要引入尺码测量库，例如 `vue-measure-sketch`。

2. **导入组件**:

   import ImageZoom from 'vue-image-zoom';
   import MeasureSketch from 'vue-measure-sketch';

3. **组件配置**:
- 将 `ImageZoom` 组件应用到包含 TIFF 图片的元素上，并设置允许用户缩放和拖动属性。
- 同时，将 `MeasureSketch` 添加到画布区域，以便于选点测距。

<template>
  <div>
    <ImageZoom :src="designImagePath" @zoomed="onZoomed" @moved="onMoved"></ImageZoom>
    <MeasureSketch ref="measureSketch" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      designImagePath: 'your-tiff-file-url',
    };
  },
  methods: {
    onZoomed(e) {
      // 缩放事件处理
    },
    onMoved(e) {
      // 移动事件处理，比如获取鼠标位置和测量距离
      const distance = this.$refs.measureSketch.getDistance();
      console.log('Distance:', distance);
    },
  },
};
</script>

4. **处理事件**:
- 对于缩放，你可以监听 `zoomed` 事件，获取新的视图大小。
- 对于移动，通过测量库计算两点之间的距离，可能需要用户在指定点触发标记然后获取距离。

5. **样式调整**:
确保对滚动、缩放区域及画布区域进行适当的 CSS 样式设置，提供良好的用户体验。