openlayers拖拽feature

功能说明:

矢量图层，选择要素，拖拽feature到指定位置

应用:

1. 地图选位置
2. 要素编辑

初始化图层

 var raster = new ol.layer.Tile({//底图
        source: new ol.source.OSM()
      });

      var vector = new ol.layer.Vector({//矢量图层，数据源可随意设置，本例使用geojson文件
        source: new ol.source.Vector({
          url: 'https://openlayers.org/en/v4.6.5/examples/data/geojson/countries.geojson',
          format: new ol.format.GeoJSON()
        })
      });

创建interaction

    var select = new ol.interaction.Select();//选择图形interaction

      var translate = new ol.interaction.Translate({//拖拽移动interaction
        features: select.getFeatures()//拖拽的为选择的要素
      });
   translate.on('translateend',function(f){
       console.log(f);//拖拽完成事件，可以获取拖拽后的要素 
   });

初始化地图

 var map = new ol.Map({
        interactions: ol.interaction.defaults().extend([select, translate]),//interactions
        layers: [raster, vector],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

效果展示