使用 Ordnance Survey/Openlayers api 拖动标记答案

【问题标题】：Dragging markers with Ordnance Survey/Openlayers api使用 Ordnance Survey/Openlayers api 拖动标记
【发布时间】：2010-10-27 10:45:37
【问题描述】：

我创建了一个站点link text 使用由 Ordnance Survey（我认为这称为 OpenSpace）生成的基于 OpenLayers 的 API。我已经有了它，因此您可以单击地图以添加标记，然后我希望能够单击标记并将其拖到地图上。有没有使用 OpenSpace 或 OpenLayers api 的简单方法。

【问题讨论】：

标签： javascript mapping openlayers

【解决方案1】：

OpenLayers api 允许您向地图添加标记和特征。如果您添加功能而不是标记，则可以通过添加以下代码使它们可拖动。

var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");
var osMap = new OpenSpace.Map('map');
osMap.addLayer(vectorLayer);

var modifyFeaturesControl = new OpenLayers.Control.ModifyFeature(vectorLayer);
modifyFeaturesControl.mode = OpenLayers.Control.ModifyFeature.RESHAPE;
osMap.addControl(modifyFeaturesControl);
modifyFeaturesControl.activate();

这将允许您在地图周围拖动要素。如果您想在拖动功能时添加自定义行为，您可以在 vectorLayer 上注册侦听器。例如，要在修改功能（即拖放和释放）时注册监听器，您需要使用以下代码。

vectorLayer.events.register('featuremodified', vectorLayer, function(feature) {
   //custom behavior
});

有关可监听事件的完整列表，请参阅 OpenLayers api 文档OpenLayers api doc

【讨论】：

我刚刚使用了上面的代码，除了一个问题之外它运行良好：当拖动/移动标记然后放大或缩小时，我的矢量特征消失了。有什么想法吗？

【解决方案2】：

更简单的方法是使用 openlayer 拖动控件，它将矢量图层作为目标。

假设一个向量层包含图标（这比标记更受欢迎，OL 的开发人员不鼓励使用），称为向量，您可以简单地这样做：

var drag=new OpenLayers.Control.DragFeature(vectors);

map.addControl(drag);
drag.activate();

使用拖动控件的另一个优点是您可以挂钩各种回调，这些回调返回特征和像素位置，例如 onStart 和 onDrag。例如，

var drag=new OpenLayers.Control.DragFeature(vectors,{    
     'onDrag':function(feature, pixel){
           console.log(pixel.x);//this can be used to do something else, such as move another feature
     }
});

【讨论】：