1

我正在尝试一个简单的测试，其中我有一个顶部带有可拖动功能的基本图像。这些点要素具有关联的外部图形（我更喜欢使用带有关联图形的多边形，但这是另一个问题）。

我有一个完美的悬停控件。我还有一个几乎可以工作的选择控件。但是，一旦单击一次，我就无法重新选择功能。同样，如果在尝试选择功能之前单击功能之外的任何位置，我将无法选择功能。

我希望这很清楚 - 但如果不是，那么这个例子应该是（你也可以看到整个代码）http://sigfrid.co.uk/oltest/simple.html

我将把我认为的关键代码位放在下面......

创建地图

var map = new OpenLayers.Map({
    div:'map',
});

添加基础层

    var base = new OpenLayers.Layer.Image(
    'Base level',
    'img/base.png',
    new OpenLayers.Bounds(-1000, -1000, 1000, 1000),
    new OpenLayers.Size(864,864),
    options
);
map.addLayer(base);

添加样式

var markerStyleMap = new OpenLayers.StyleMap 
({
    "default": new OpenLayers.Style(template, {context: context}),
    "hover": new OpenLayers.Style ({graphicOpacity:0.5}),
    "select": new OpenLayers.Style ({graphicOpacity:0.1})});

加分

pt1 = new OpenLayers.Geometry.Point(0,0);
pt1Feature = new OpenLayers.Feature.Vector(pt1);
...
markerLayer.addFeatures([pt1Feature,pt2Feature,pt3Feature]);

为不同的标记图像添加独特的查找

var lookup = {
    "f1": {externalGraphic:"img/f1.png"},
    "f2": {externalGraphic:"img/f2.png"},
    "f3": {externalGraphic:"img/f3.png"},
}

markerStyleMap.addUniqueValueRules("default", "type", lookup);
markerLayer.styleMap = markerStyleMap;
markerLayer.features[0].attributes.type = "f1";
    ...

添加控件

var dragControl = new OpenLayers.Control.DragFeature(markerLayer) 
map.addControl(dragControl);
dragControl.activate();

var highlightCtrl = new OpenLayers.Control.SelectFeature(markerLayer, {
    hover: true,
    highlightOnly: true,
    renderIntent: "hover",
});
map.addControl(highlightCtrl);
highlightCtrl.activate();


var selectCtrl = new OpenLayers.Control.SelectFeature(markerLayer, {
    clickout: true,        
    renderIntent: "select",
});
map.addControl(selectCtrl);
selectCtrl.activate();

谢谢你的帮助，

缺口

4

1 回答 1

2

原来拖动和选择不兼容。但是，有一些解决方法，例如

http://fastr.wordpress.com/2012/04/17/openlayers-selectfeature-where-did-i-clicked-2/

虽然这确实增加了一些事件问​​题......

于 2013-04-11T20:53:03.750 回答