OL3:选择图像/标记以拖放到另一个坐标(视觉问题OpenLayers 3)

Question

我正在用图像测试地图上的标记。不幸的是，我还不了解选择和拖放的概念。下面是我的例子：http://codepen.io/kaepten/pen/wDhKt

    // Create the background layer
var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
// Create a map
var map = new ga.Map({
  target: 'map',
  layers: [layer],
  view: new ol.View2D({
    resolution: 1,
    center: [600000, 200000]
  })
});
// Create a local GeoJson
var myGeoJson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    600000.0000000001,
                    200000.00000000006
                ]
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    668900.0000000001,
                    162000.00000000003
                ]
            }
        }
    ]
};
// Define a geojson data source 
var source = new ol.source.GeoJSON();
// Read the local geojson 
var features = source.readFeatures(myGeoJson);
// Create a vector source and assign the GeoJson features to it
var vectorSource = new ol.source.Vector({
  features: features
});
// Create a vector layer using the vector source
var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});
// Create a point icon style
var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(({
    src: '//map.geo.admin.ch/1403704943/img/marker.png',
    offset: [1,1],
  }))
});
// Apply the style to the vector layer
vectorLayer.setStyle(iconStyle);
// Add the vector layer in the map
map.addLayer(vectorLayer);


var featureOverlay = new ol.FeatureOverlay({
  map: map,  
  image: new ol.style.Icon({src: '//map.geo.admin.ch/1403704943/img/marker.png'})
});

var highlight;
var displayFeatureInfo = function(pixel) {
  var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
    return feature;
  });

  if (feature !== highlight) {
    if (highlight) {
      featureOverlay.removeFeature(highlight);
    }
    if (feature) {
      featureOverlay.addFeature(feature);
    }
    highlight = feature;
  }
};

$(map.getViewport()).on('mousemove', function(evt) {
  var pixel = map.getEventPixel(evt.originalEvent);
  displayFeatureInfo(pixel);
});

var modify = new ol.interaction.Modify({
  features: featureOverlay.getFeatures(),
  // the SHIFT key must be pressed to delete vertices, so
  // that new vertices can be drawn at the same position
  // of existing vertices
  deleteCondition: function(event) {
    return ol.events.condition.shiftKeyOnly(event) &&
        ol.events.condition.singleClick(event);
  }
});
map.addInteraction(modify);

正如你所看到的。。。有一个标记（图像），它是可拖动的，但视觉效果不是我喜欢的：

问题：-为什么我会得到这个奇怪的蓝色圆圈来选择/拖动图像？如何更改此视觉效果？事实上，我喜欢把蓝色的选择圈完全隐藏起来，应该只有一个图像。-我可以选择在整个图像上拖动图像（而不仅仅是在图像的位置上）吗？如果我选择了显示的蓝色标记，则标记现在只能拖动，但我喜欢拖动整个图像区域。

欢迎任何提示！感谢

Answer 1

对于样式，您需要在覆盖级别和修改交互中设置样式。看看这个从你自己的分叉演示。

对于根据您的图标形状进行选择，我没有确切的答案：您可以使用pixelTolerance进行中间解决方案。

似乎有一项增加拖动能力的工作正在进行中，这可能会更好，特别是对于你的图标形状问题