Question

我试图在PhoneGap应用程序中集成OpenLayers Map，但地图根本没有显示。该映射是从LAN内的GeoServer获取的。 “缩放”控件可见，但即使在放大/缩小时，地图也不会加载。地图由一个图层组成（这是GeoServer中两个图层的组合）。这是我的index.js文件：

var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        $(document).ready(function() {
            // pink tile avoidance
            OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
            // make OL compute scale according to WMS spec
            OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

            //OpenLayers.ProxyHost = "proxy.cgi?url=";

            var map, format = 'image/png';
            var bounds = new OpenLayers.Bounds(
                -100, -100,
                5000, 2500
            );
            var options = {
                controls: [
                        new OpenLayers.Control.Attribution(),
                        new OpenLayers.Control.TouchNavigation({
                        dragPanOptions: {
                            enableKinetic: true
                        }
                    }),
                    new OpenLayers.Control.Zoom()
                ],
                maxExtent: bounds,
                projection: "EPSG:2001",
                units: 'm'
            };

            map = new OpenLayers.Map('map', options);

            var wms = new OpenLayers.Layer.WMS(
                "IW Map",
                "http://192.168.1.3:80/geoserver/myWorkspace/wms",
                { 
                    LAYERS: 'iwlayer',
                    STYLES: '',
                    format: format
                }, {
                        buffer: 0,
                        isBaseLayer: true,
                        yx : {'EPSG:2001' : false}
                    }
            );
            map.addLayer( wms );
            map.zoomToMaxExtent(bounds);

            alert("Map loaded!");
        });
    }
};

我的index.html文件：

<!DOCTYPE html>
<html>
    <head>
        <title>HelloWorld</title>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1"/>

        <link rel="stylesheet" type="text/css" href="js/theme/default/style.css" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />

        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> -->
        <script type="text/javascript" src="js/OpenLayers.mobile.js"></script>
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

我将<access origin="http://192.168.1.3/*" />规则添加到PhoneGap的config.xml文件中，但没有运气。

非常感谢。

Answer 1

检查你的界限。看起来你想要显示-100长的切片。

尝试类似：

var NA = new OpenLayers.Bounds(-128, 48.25, -114, 60)
         .transform(geographic, spherical_mercator);

OpenLayers Map未在CordovaActivity中加载

1 个答案: