Question

我正在使用OpenLayers在我的网站上显示自定义OSM地图。

我有一些要点需要尊重：地图必须修复（意味着我们无法拖动或缩放地图）。

我有缩放问题，无法用鼠标禁用缩放。有人有提示吗？

map = new OpenLayers.Map('map');
map.events.remove("move");
map.events.remove("movestart");
map.events.remove("moveend");
map.events.remove("zoomend");
map.events.remove("mouseover");
map.events.remove("mouseout");
map.events.remove("mousemove");
map.events.remove("zoomstart");
var nav = new OpenLayers.Control.Navigation({
  defaultDblClick: function(event) { return ; }
});
map[index].addControl(nav);

此外，如果有人提示删除所有导航事件比这更容易，我们将不胜感激。

Answer 1

通过传递一个空数组来禁用地图上的默认控件：

var map = new OpenLayers.Map('map', { controls: [] });

Answer 2

对于OpenLayers3，交互数组也需要为空。

var map = new ol.Map({
  controls: [],
  interactions: []
});

Answer 3

简化Mahdi的方法导致

var i, l, c = map.getControlsBy( "zoomWheelEnabled", true );
for ( i = 0, l = c.length; i < l; i++ ) {
    c[i].disableZoomWheel();
}

这样，禁用鼠标滚轮上的缩放不需要自定义构建地图的选项，例如通过创建没有任何控制的地图（虽然这是Lght有点要求）。此外，重新启用缩放功能也相同。

此外，通过搜索匹配启用属性zoomWheelEnabled而非类名称的控件，它支持从OpenLayers.Control.Navigation派生的自定义控件。

Answer 4

您还可以执行以下操作：

map = new OpenLayers.Map({
    // options here ...
}

var Navigation = new OpenLayers.Control.Navigation({
    'zoomWheelEnabled': false,
    'defaultDblClick': function ( event ) { 
        return; 
     }
});

map.addControl(Navigation);

var NavigationControls = map.getControlsByClass('OpenLayers.Control.Navigation')
  , i;

for ( i = 0; i < NavigationControls.length; i++ ) {
    NavigationControls[i].disableZoomWheel();
}

找到here。

对于其他选项，例如禁用拖动，您可以查看documentation并自定义上述代码。

Answer 5

这是基于某些逻辑限制缩放事件的另一种简单方法。因为OpenLayers不提供'beforezoom'

map.zoomToProxy = map.zoomTo;
map.zoomTo =  function (zoom,xy){
// if you want zoom to go through call
map.zoomToProxy(zoom,xy); 
//else do nothing and map wont zoom
};

这是如何运作的：

对于任何类型的缩放活动，OpenLayers API最终会调用名为zoomTo的函数。因此，在覆盖它之前，我们将该函数复制到一个名为“zoomToProxy”的新函数中。我们覆盖它并添加条件缩放逻辑。如果我们想要进行缩放，我们只需调用新的代理函数：）

Answer 6

您可以重置控件数组，然后向其中添加Zoom和TouchNavigation。

var map_controls = [];
map_controls.push( new OpenLayers.Control.Zoom() );
map_controls.push( new OpenLayers.Control.TouchNavigation() );
var map = new OpenLayers.Map({
  div: "map",
  controls: map_controls
});

希望有帮助！：）

使用Openlayers禁用缩放

6 个答案: