Question

我知道我可以轻松地允许用户在OpenLayers中选择多个功能/几何，但我希望让用户能够轻松地同时拖动/移动所有选定的功能。

使用ModifyFeature控件，它一次只能移动一个特征...有没有办法轻松扩展此控件（或其他任何工作）以移动该图层上的所有选定要素？

Answer 1

好的，跳过ModifyFeature控件，只需挂钩SelectFeature控件即可跟踪所选功能，然后使用DragControl同时操作选定的点。

控件实例化的示例：

var drag = new OpenLayers.Control.DragFeature(vectors, {
  onStart: startDrag,
  onDrag: doDrag,
  onComplete: endDrag
});
var select = new OpenLayers.Control.SelectFeature(vectors, {
  box: true,
  multiple: true,
  onSelect: addSelected,
  onUnselect: clearSelected
});

事件处理函数示例：

/* Keep track of the selected features */
function addSelected(feature) {
    selectedFeatures.push(feature);
}

/* Clear the list of selected features */
function clearSelected(feature) {
    selectedFeatures = [];
}

/* Feature starting to move */
function startDrag(feature, pixel) {
    lastPixel = pixel;
}

/* Feature moving */
function doDrag(feature, pixel) {
    for (f in selectedFeatures) {
        if (feature != selectedFeatures[f]) {
            var res = map.getResolution();
            selectedFeatures[f].geometry.move(res * (pixel.x - lastPixel.x), res * (lastPixel.y - pixel.y));
            vectors.drawFeature(selectedFeatures[f]);
        }
    }
    lastPixel = pixel;
}

/* Featrue stopped moving */
function endDrag(feature, pixel) {
    for (f in selectedFeatures) {
        f.state = OpenLayers.State.UPDATE;
    }
}

Answer 2

嗯...

我尝试了上面的代码，但无法使其正常工作。两个问题： 1）要移动每个特征，您需要使用该特征的原始位置，并从DragControl自身移动的任何特征（即doDrag的特征参数）添加“拖动矢量”。 2）由于DragFeatures在调用onDrag之前拥有代码集lastPixel = pixel，因此调用move（）的行会将该功能移动到（0,0）。

我的代码看起来像这样：

var lastPixels;
function startDrag(feature, pixel) {
    // save hash with selected features start position
    lastPixels = [];
    for( var f=0; f<wfs.selectedFeatures.length; f++){
         lastPixels.push({ fid: layer.selectedFeatures[f].fid, 
                           lastPixel: map.getPixelFromLonLat( layer.selectedFeatures[f].geometry.getBounds().getCenterLonLat() )
                         });
    }
}

function doDrag(feature, pixel) {
    /* because DragFeatures own handler overwrites dragSelected.lastPixel with pixel before this is called, calculate drag vector from movement of "feature" */
    var g = 0;
    while( lastPixels[g].fid != feature.fid ){ g++; }
    var lastPixel = lastPixels[g].lastPixel;

    var currentCenter =  map.getPixelFromLonLat( feature.geometry.getBounds().getCenterLonLat() );
    var dragVector = { dx: currentCenter.x - lastPixel.x, dy: lastPixel.y - currentCenter.y };

    for( var f=0; f<layer.selectedFeatures.length; f++){
         if (feature != layer.selectedFeatures[f]) {
             // get lastpixel of this feature
             lastPixel = null;
             var h = 0;
             while( lastPixels[h].fid != layer.selectedFeatures[f].fid ){ h++; }
             lastPixel = lastPixels[h].lastPixel;

             var newPixel = new OpenLayers.Pixel( lastPixel.x + dragVector.dx, lastPixel.y - dragVector.dy );
             // move() moves polygon feature so that centre is at location given as parameter
             layer.selectedFeatures[f].move(newPixel);
         }
    }
}

Answer 3

我有一个类似的问题并通过重写DragFeature的moveFeature函数并将this.lastPixel =像素放在for循环中来解决它，该循环将移动应用于我的图层向量中的所有要素。直到我在循环中移动this.lastPixel =像素，除了被拖动的所有功能都被疯狂地扭曲了。

 `OpenLayers.Control.DragFeature.prototype.moveFeature = function (pixel) {

        var res = this.map.getResolution();         
        for (var i = 0; i < vector.features.length; i++) {
            var feature = vector.features[i];
            feature .geometry.move(res * (pixel.x - this.lastPixel.x),
                res * (this.lastPixel.y - pixel.y));
            this.layer.drawFeature(feature );
            this.lastPixel = pixel;
        }
        this.onDrag(this.feature, pixel);
    };

`

拖动/移动多个选定的功能 - OpenLayers

3 个答案: