vue 使用openlayers加载图片且只允许图片水平方向滚动

vue 使用openlayers加载图片且只允许图片水平方向滚动

import Map from 'ol/Map';
import View from 'ol/View';
import ImageLayer from 'ol/layer/Image';
import Static from 'ol/source/ImageStatic';
import Interaction from 'ol/interaction/Interaction';

// 只允许水平方向滚动类
class HorizontalDragOnly extends Interaction {
  constructor(options) {
    super(options);
    this.coordinate_ = null;
  }

  handleEvent(mapBrowserEvent) {
    if (mapBrowserEvent.type === 'pointerdown') {
      this.coordinate_ = mapBrowserEvent.coordinate;
      return true;
    } else if (mapBrowserEvent.type === 'pointerdrag') {
      const map = mapBrowserEvent.map;
      const view = map.getView();
      const deltaX = mapBrowserEvent.coordinate[0] - this.coordinate_[0];
      
      // 只移动水平方向
      const center = view.getCenter();
      view.setCenter([center[0] + deltaX, center[1]]);
      
      this.coordinate_ = mapBrowserEvent.coordinate;
      return false; // 阻止其他拖动行为
    } else if (mapBrowserEvent.type === 'pointerup') {
      this.coordinate_ = null;
      return true;
    }
    return true;
  }
}

const map = new Map({
  target: 'map',
  layers: [
    new ImageLayer({
      source: new Static({
        url: 'your-image.jpg',
        imageExtent: [0, 0, 1000, 1000]
      })
    })
  ],
  view: new View({
    center: [500, 500],
    zoom: 1
  }),
  interactions: [new HorizontalDragOnly()] // 使用自定义交互
});