OpenLayers 的奇怪错误 +云造

发布于 2024-08-18 14:37:24 字数 2231 浏览 1 评论 0原文

我正在尝试一些相当简单的事情，你可以在这里看到一个演示： http://www.jsfiddle.net/VVe8x/19/

此错误仅出现在Firefox，因此要查看它，请按其中一个链接一次（它将带您到纽约或以色列），然后按另一个链接。错误是它不会向我显示该位置的图块，而是向我显示 div 的背景。

PS 在 Chrome 中，这可以完美地工作。

我不知道这是否是一个线索，或者它可能会让您感到困惑，如果在按纽约或以色列链接之间您按“查看世界”链接，它将允许您看到其他位置。

完整源代码供参考

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <body>

    <a href="#" onclick="javascript:show1()">show me NY</a>
    <a href="#" onclick="javascript:show2()">show me TLV</a>
    <a href="#" onclick="javascript:map.zoomToExtent(map.getMaxExtent());">show world map(a "workaround"</a>


    <div id='myMap' style="height: 600px; width: 600px; position: relative"></div>

    <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
    <script src="http://developers.cloudmade.com/attachments/download/58/cloudmade.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
        map = new OpenLayers.Map("myMap", {
            controls: [
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar()
            ]
        });

        var cloudmade = new OpenLayers.Layer.CloudMade("CloudMade", {
            key: 'd5da652e33e6486ba62fca3d18ba70c9'
        });
        map.addLayer(cloudmade);

        var epsg4326 = new OpenLayers.Projection("EPSG:4326");

        map.setCenter(new OpenLayers.LonLat(40, 32), 2);

        show1 = function(){
        var bound1 = new OpenLayers.Bounds(-8236567.917898,4972686.066032,-8236148.409989,4972889.624407);
            map.zoomToExtent(bound1); // to NY
        };

        show2 = function(e){
            var bound2 = new OpenLayers.Bounds(3874818.203389,3773932.267033,3875217.305962,3774226.370443);   
            map.zoomToExtent(bound2); // to Israel
            return false;
        };

    </script>
    </body>
</html>

原文

I am trying something fairly simple, you can see a demo here:
http://www.jsfiddle.net/VVe8x/19/

This bug only appears in Firefox, so to see it press either one of the links once (it will take you to either NY or Israel) then press the other link.
The bug is that it will not show me the tiles in that location, instead it will show me the background of the div.

P.S In Chrome this works flawlessly.

I dont know if this is a clue or it might confuse you, if in between pressing either NY or Israel links you press the "view the world" link it will allow you then to see the other location..

Full Source for reference

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <body>

    <a href="#" onclick="javascript:show1()">show me NY</a>
    <a href="#" onclick="javascript:show2()">show me TLV</a>
    <a href="#" onclick="javascript:map.zoomToExtent(map.getMaxExtent());">show world map(a "workaround"</a>


    <div id='myMap' style="height: 600px; width: 600px; position: relative"></div>

    <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
    <script src="http://developers.cloudmade.com/attachments/download/58/cloudmade.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
        map = new OpenLayers.Map("myMap", {
            controls: [
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar()
            ]
        });

        var cloudmade = new OpenLayers.Layer.CloudMade("CloudMade", {
            key: 'd5da652e33e6486ba62fca3d18ba70c9'
        });
        map.addLayer(cloudmade);

        var epsg4326 = new OpenLayers.Projection("EPSG:4326");

        map.setCenter(new OpenLayers.LonLat(40, 32), 2);

        show1 = function(){
        var bound1 = new OpenLayers.Bounds(-8236567.917898,4972686.066032,-8236148.409989,4972889.624407);
            map.zoomToExtent(bound1); // to NY
        };

        show2 = function(e){
            var bound2 = new OpenLayers.Bounds(3874818.203389,3773932.267033,3875217.305962,3774226.370443);   
            map.zoomToExtent(bound2); // to Israel
            return false;
        };

    </script>
    </body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雪花飘飘的天空 2024-08-25 14:37:24

当图块不可见时，myMap_OpenLayers_Container 具有以下 CSS：

position:absolute; z 指数：749；左：-2.02815e+7px；顶部：-2007340px；

如果你改变这些，你可以看到加载了正确的图块，所以很可能是 jsFiddle 把它们弄乱了。不显示的图块 CSS 也有奇怪的值。

更新：

本地测试也会产生问题，因此排除了 jsFiddle。

解决方法是在缩放后通过调用如下函数来设置此值：

        updateCSS = function(){
            OpenLayers_Container = document.getElementById("myMap_OpenLayers_Container").style.left = "0px";
        }

这看起来像一个错误，尽管它是在 OpenLayers 中还是在 CloudMade 图层属性中很难判断 - 我想是后者，或者它会是一个被广泛报道的错误。 OpenLayers.js 中的相关代码似乎是：

centerLayerContainer: function(lonlat){
    var originPx = this.getViewPortPxFromLonLat(this.layerContainerOrigin);
    var newPx = this.getViewPortPxFromLonLat(lonlat);
    if ((originPx != null) && (newPx != null)) {
        this.layerContainerDiv.style.left = Math.round(originPx.x - newPx.x) + "px";
        this.layerContainerDiv.style.top = Math.round(originPx.y - newPx.y) + "px";
    }

The myMap_OpenLayers_Container has the following CSS when the tiles are invisible:

position: absolute; z-index: 749; left: -2.02815e+7px; top: -2007340px;

If you change these around you can see that the correct tiles were loaded, so its likely to be jsFiddle messing them up. The tiles CSS when they don't show also have strange values.

Update:

Testing locally also produces the issue, so that rules out jsFiddle.

A fix would be to set this value after the zoom by calling a function such as:

        updateCSS = function(){
            OpenLayers_Container = document.getElementById("myMap_OpenLayers_Container").style.left = "0px";
        }

This looks like a bug, although if it is in OpenLayers or the CloudMade layer properties is hard to tell - I'd imagine the latter, or it would be a widely reported bug. The relevant code in OpenLayers.js appears to be:

centerLayerContainer: function(lonlat){
    var originPx = this.getViewPortPxFromLonLat(this.layerContainerOrigin);
    var newPx = this.getViewPortPxFromLonLat(lonlat);
    if ((originPx != null) && (newPx != null)) {
        this.layerContainerDiv.style.left = Math.round(originPx.x - newPx.x) + "px";
        this.layerContainerDiv.style.top = Math.round(originPx.y - newPx.y) + "px";
    }

回复收藏 0 原文

心房敞 2024-08-25 14:37:24

我也遇到了这个问题，结果发现我没有像我想象的那样设置地图的中心。如果您首先调用map.setCenter()，问题就会消失。例如：

var newCenter = new OpenLayers.Lonlat(longitude, latitude)
    .transform(new OpenLayers.Projection('ESPG:4326'),
               this.map.getProjectionObject());

this.map.setCenter(newCenter);

希望这对接下来遇到问题的人有所帮助。

I was running into this problem too, and it turned out I was not setting the map's center as I thought I was. The problem goes away if you first call map.setCenter(). For example:

var newCenter = new OpenLayers.Lonlat(longitude, latitude)
    .transform(new OpenLayers.Projection('ESPG:4326'),
               this.map.getProjectionObject());

this.map.setCenter(newCenter);

Hope this helps whoever next has the problem.

回复收藏 0 原文

~没有更多了~