Странная ошибка с OpenLayers + CloudMade

StackOverflow https://stackoverflow.com/questions/2128144

Вопрос

Я пытаюсь сделать что-то довольно простое, вы можете посмотреть демо-версию здесь:http://www.jsfiddle.net/VVe8x/19/

Эта ошибка появляется только в Firefox, поэтому, чтобы увидеть ее, нажмите на одну из ссылок один раз (она приведет вас либо в Нью-Йорк, либо в Израиль), затем нажмите на другую ссылку.Ошибка заключается в том, что он не покажет мне плитки в этом месте, вместо этого он покажет мне фон div.

P.S В 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>
Это было полезно?

Решение

myMap_OpenLayers_Container имеет следующий CSS, когда плитки невидимы:

положение:абсолютный;z-индекс:749;слева:-2.02815e+7 пикселей;Наверх:-2007340 пикселей;

Если вы измените их, вы увидите, что были загружены правильные фрагменты, так что, скорее всего, jsFiddle перепутал их.CSS-файлы tiles, когда они не отображаются, также имеют странные значения.

Обновить:

Локальное тестирование также приводит к проблеме, так что это исключает 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";
    }

Другие советы

Я тоже сталкивался с этой проблемой, и оказалось, что я не устанавливал центр карты, как я думал. Проблема исчезает, если вы впервые вызовите map.setCenter (). Например:

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

this.map.setCenter(newCenter);

Надеюсь, это поможет у кого -то, у кого есть проблема.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top