[OpenLayers] Feature Drag and Drop

이전 글에서 추가된 Icon Feature를 Drag and Drop 하는 예제입니다.

[OpenLayers] Custom Icon Feature 추가

Script

ol.interaction.Modify 을 이용해서 Drag and Drop 기능을 구현합니다.

modifystart, modifyend 이벤트를 등록하여 Icon을 선택하거나 이동 시 커서가 변경되도록 하였습니다.

const styles = {
  icon: new ol.style.Style({
    image: new ol.style.Icon({
      opacity: 1,
      src: 'images/icon.png',
    }),
  }),
};

// 지도 정보
const mapInfo = {
  map: null,
  extent: null,
  projection: null,
  setProjection: function (w, h) {
    this.extent = [0, 0, w, h];
    this.projection = new ol.proj.Projection({
      code: 'pixel',
      units: 'pixels',
      extent: this.extent,
    });
  },
  init: function (imageName) {
    const view = new ol.View({
      projection: this.projection,
      center: ol.extent.getCenter(this.extent),
      zoom: 2,
      maxZoom: 8,
    });

    const imageLayer = new ol.layer.Image({
      source: new ol.source.ImageStatic({
        url: 'images/' + imageName,
        imageSize: [this.extent[2], this.extent[3]],
        projection: this.projection,
        imageExtent: this.extent,
      }),
    });

    this.map = new ol.Map({
      target: 'map',
      layers: [imageLayer],
      view: view,
    });

    this.zoomFit();
  },
  zoomFit: function () {
    this.map.getView().fit(this.extent, { duration: 200 });
  },
  addVectorLayer: function (x, y) {
    const iconFeature = new ol.Feature({
      geometry: new ol.geom.Point([x, y]),
      type: 'icon',
      name: 'icon',
    });

    const vectorLayer = new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [iconFeature],
        wrapX: false,
      }),
      style: function (feature) {
        return styles[feature.get('type')];
      },
    });

    this.map.addLayer(vectorLayer);

    ///////////////////////////////////////////////////////
    // 추가된 부분
    ///////////////////////////////////////////////////////
    var dragInteraction = new ol.interaction.Modify({
      features: new ol.Collection([iconFeature]),
    });

    const target = document.getElementById('map');

    dragInteraction.on('modifystart', function (event) {
      target.style.cursor = 'grabbing';
    });

    dragInteraction.on('modifyend', function (event) {
      target.style.cursor = 'pointer';
      event.features.forEach(function (feature) {
        const name = feature.get('name');
        console.log(name);
        // Drop 완료 시 프로세스 진행
      });
    }, iconFeature);

    const overlaySource = dragInteraction.getOverlay().getSource();
    overlaySource.on(['addfeature', 'removefeature'], function (evt) {
      target.style.cursor = evt.type === 'addfeature' ? 'pointer' : '';
    });

    this.addInteraction(dragInteraction);
    ///////////////////////////////////////////////////////
  },
};

// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function () {
  const width = 500;
  const height = 500;
  const imageName = 'image.png';

  mapInfo.setProjection(width, height);
  mapInfo.init(imageName);

  mapInfo.addVectorLayer(100, 100);
});

Drop 이 되었을 때 feature.get() 함수를 이용해서 설정한 값을 가져와 다음 프로세스를 처리합니다.

참고

• https://openlayers.org/en/latest/examples/