OpenLayers地图未在CordovaActivity中加载

Question

I'm trying to integrate an OpenLayers Map inside PhoneGap application but the map isn't showing at all. 我正在尝试将OpenLayers Map集成到PhoneGap应用程序中，但是该地图根本没有显示。 The map is fetched from GeoServer inside my LAN. 该地图是从我局域网内的GeoServer中获取的。 The Zoom controls are visible but the map isn't loading even when when i zoom-in/out. 可以看到“缩放”控件，但是即使放大/缩小也不会加载地图。 The map consists of one layer (which is a combination of two layers in GeoServer). 地图由一层组成（这是GeoServer中两层的组合）。 Here is my index.js file : 这是我的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!");
        });
    }
};

My index.html file : 我的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>

I added the <access origin="http://192.168.1.3/*" /> rule to PhoneGap's config.xml file but no luck. 我将<access origin="http://192.168.1.3/*" />规则添加到PhoneGap的config.xml文件中，但是没有运气。

Many thanks. 非常感谢。

Answer 1

Check your bounds. 检查界限。 Looks like you are wanting to display a slice at -100 long. 看起来您想要显示-100长的切片。

Try something like: 尝试类似：

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

OpenLayers地图未在CordovaActivity中加载

问题描述

1 个解决方案

解决方案1
1 2014-07-23 23:07:15

OpenLayers地图未在CordovaActivity中加载

问题描述

1 个解决方案

解决方案1 1 2014-07-23 23:07:15

解决方案1
1 2014-07-23 23:07:15