简体   繁体   English

缩放事件监听器之前的Javascript OpenLayers

[英]Javascript OpenLayers before zoom event listener

I am trying to set up OpenLayers to not display the vector layer just before a zoom starts and make it reappear after a zoom ends. 我正在尝试将OpenLayers设置为在缩放开始之前不显示矢量图层,并在缩放结束后重新显示它。 I have the zoom ends part already established like this: 我有缩放结束部分已经建立如下:

map = new OpenLayers.Map('map_element', { eventListeners: { "zoomend": mapEvent}});

function mapEvent(event) {
    if(event.type == "zoomend") {
        hide_vector_layer();
        }
}

But I don't see any kind of event listener for the start of a zoom in the documentation. 但我没有看到任何类型的事件监听器开始放大文档。 There is a "movestart" which covers moving, panning, and zoom. 有一个“movestart”,涵盖了移动,平移和缩放。 Unfortunately, I can't use the "movestart" one, because I don't want the layer to disappear during a pan. 不幸的是,我不能使用“movestart”,因为我不希望图层在平移期间消失。 You would think there would be a "zoomstart", as there is a "zoomend". 你会认为会有一个“zoomstart”,因为有一个“zoomend”。

The reason I am trying to do this, is because I don't like how the vector layer zooms at a different rate when using Google Maps as a base layer. 我试图这样做的原因是因为我不喜欢当使用谷歌地图作为基础层时矢量图层以不同的速率缩放。 It looks wrong, looks like all the features are inaccurate, even though they land in the right place after the zoom is complete. 它看起来不对,看起来所有功能都不准确,即使它们在缩放完成后落在正确的位置。

Any suggestions? 有什么建议?

Here is a easy to add the 'BeforeZoom' event to the OpenLayers . 这是一个很容易将'BeforeZoom'事件添加到OpenLayers。 Just add the code below to where you created your map object. 只需将下面的代码添加到您创建地图对象的位置即可。

map.zoomToProxy = map.zoomTo;
map.zoomTo =  function (zoom,xy){
    //Your Before Zoom Actions

    //If you want zoom to go through call
    map.zoomToProxy(zoom,xy); 
    //else do nothing and map wont zoom
};

How this works: 这是如何工作的:

For any kind of zooming activity, OpenLayers API ultimately calls the function called zoomTo. 对于任何类型的缩放活动,OpenLayers API最终会调用名为zoomTo的函数。 So before overriding it, we copy that function to a new function called 'zoomToProxy'. 因此,在覆盖它之前,我们将该函数复制到一个名为“zoomToProxy”的新函数中。 The we override it and add our conditional zoom logic. 我们覆盖它并添加条件缩放逻辑。 If we want the zoom to happen we just call new proxy function :) 如果我们想要缩放,我们只需调用新的代理功能:)

为此,您应该覆盖OpenLayers.Map的moveTo和moveByPx方法,以消除除缩放之外的任何操作的movestart事件触发。

I had the same problem that OP had, and I tried to solve it with drnextgis's solution. 我遇到了与OP相同的问题,我试图用drnextgis的解决方案来解决它。 But unfortunately it didn't completely work:: the zoomChanged property in OpenLayers.Map.moveTo evaluates to true not only when the zoom level has changed, but also when the map has been resized. 但不幸的是它并没有完全发挥作用:: OpenLayers.Map.moveTo中的zoomChanged属性不仅在缩放级别发生变化时,而且在地图调整大小时评估为true

My map was 100% of the user's browser window, so if they resized the window, the event would be triggered. 我的地图是用户浏览器窗口的100%,因此如果他们调整窗口大小,则会触发事件。 This was undesirable for me, as I only wanted to trigger the event if the zoom level had actually changed. 这对我来说是不受欢迎的,因为我只想在缩放级别实际发生变化时触发事件。 My solution was to create an new event, called "zoomstart", which I inserted at the top of OpenLayers.Map.moveTo. 我的解决方案是创建一个名为“zoomstart”的新事件,我将其插入OpenLayers.Map.moveTo的顶部。 Here's the code: 这是代码:

var getZoom = this.getZoom();
if ( !!getZoom && !!zoom && this.isValidZoomLevel(zoom) && getZoom != zoom )
    this.events.triggerEvent("zoomstart", zoom);

This code will pass the new zoom level to an event listener that is registered to zoomstart , and in my case I determine the map's restrictedExtent and do other stuff based upon the new zoom level. 此代码将新的缩放级别传递给注册到zoomstart的事件侦听zoomstart ,在我的情况下,我确定地图的restrictedExtent并根据新的缩放级别执行其他操作。

Peace be with ye. 和平与你们同在。

"movestart" handles "zoomstart". “movestart”处理“zoomstart”。 To detect if the zoomstart, try: 要检测是否是zoomstart,请尝试:

 map.events.register("movestart",map, function(e) {
        if(e.zoomChanged)
        {
        //zoom start code here
        }

    });

Solution of "Shaunak" is worked very well for me. “Shaunak”的解决方案对我来说非常有效。 I want to restrict zooming below 11 so edited his code as 我想限制在11以下的缩放,所以编辑他的代码为

if (zoom > 11) {
    map.zoomToProxy(zoom, xy);
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM