1

我有以下代码。它在 IE 中完美运行（已加载 GML 和 GeoJSON 矢量图层），但在 Firefox 和 Chrome 中无法正常运行，没有发现任何错误。请帮我解决这个问题。

这是带有GML矢量图层的代码（我只是在Geoserver中使用了内置层，因此您无需任何修改即可下载并测试它）：

<!DOCTYPE html>
<html>
<head>
<title>Creating a simple map</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Include OpenLayers library -->
<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<style>
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>
<!-- The magic comes here -->
<script type="text/javascript">
    var map;
    function init() {
        var bounds = new OpenLayers.Bounds(
            -124.73142200000001, 24.955967,
            -66.969849, 49.371735
        );
        var options = {
            controls: [],
            maxExtent: bounds,
            maxResolution: 0.22563114453125,
            projection: "EPSG:4326",
            units: 'degrees'
        };

        map = new OpenLayers.Map("ch3_wfs",options);

        var baseLayer = new OpenLayers.Layer.WMS("Basic","http://localhost:8080/geoserver/wms",
        {
            layers: "topp:states",
        });    
        map.addLayer(baseLayer);

        var statesLayer = new OpenLayers.Layer.Vector("States", {
            protocol: new OpenLayers.Protocol.HTTP({
                url: "http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50",
                format: new OpenLayers.Format.GML()
            }),
            strategies: [new OpenLayers.Strategy.Fixed()],
        });

        map.addLayer(statesLayer);

        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.setCenter(new OpenLayers.LonLat(0,0), 2);
        map.zoomToMaxExtent();

    }

</script>
</head>
<body onload="init()">
    <div id="ch3_wfs" style="width: 100%; height: 100%;"></div><br>
</body>
</html>

这是带有 GeoJSON 矢量图层的代码（我只是在 Geoserver 中使用了内置层，因此您无需任何修改即可下载并测试它）：

<!DOCTYPE html>
<html>
<head>
<title>Creating a simple map</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Include OpenLayers library -->
<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<style>
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>
<!-- The magic comes here -->
<script type="text/javascript">
    var map;
    function init() {
        var bounds = new OpenLayers.Bounds(
            -124.73142200000001, 24.955967,
            -66.969849, 49.371735
        );
        var options = {
            controls: [],
            maxExtent: bounds,
            maxResolution: 0.22563114453125,
            projection: "EPSG:4326",
            units: 'degrees'
        };

        map = new OpenLayers.Map("ch3_wfs",options);

        var baseLayer = new OpenLayers.Layer.WMS("Basic","http://localhost:8080/geoserver/wms",
        {
            layers: "topp:states",

        });    
        map.addLayer(baseLayer);

        var statesLayer = new OpenLayers.Layer.Vector("States", {
            protocol: new OpenLayers.Protocol.HTTP({
                url: "http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50&outputFormat=json",
                format: new OpenLayers.Format.GeoJSON()
            }),
            strategies: [new OpenLayers.Strategy.Fixed()],
        });
        map.addLayer(statesLayer);

        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.setCenter(new OpenLayers.LonLat(0,0), 2);
        map.zoomToMaxExtent();
    }

</script>
</head>
<body onload="init()">
    <div id="ch3_wfs" style="width: 100%; height: 100%;"></div><br>
</body>
</html>
4

0 回答 0