4

OpenLayers を使用してコードを書いています。このコードでは、さまざまなズーム レベルでさまざまなレイヤーを表示したいと考えています。ここまで、すべてが機能します。私の問題は、Google マップをベースレイヤーとして追加しようとしたときに始まりました。レイヤーの投影システムが Google レイヤーと一致していないため、再投影する必要があります。Proj4js.transform メソッドを使用しようとしましたが、機能しませんでした。私のレイヤーは EPSG:3006(スウェーデン) にあり、Google レイヤーは EPSG:900913 にあります。次のコードでは、投影されたレイヤーが右にシフトされます。再投影がうまくいかなかったということです。私のコードの何が問題なのか教えてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>OpenLayers map preview</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!-- Import OL CSS, auto import does not work with our minified OL.js build -->
    <link rel="stylesheet" type="text/css" href="http://gisl.nateko.lu.se:8088/geoserver/openlayers/theme/default/style.css">
    <!-- add here more css definition libraries-->

         <!-- Basic CSS definitions -->
    <style type="text/css">
        body {
            font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
            font-size: small;
        }
        /* Toolbar styles */
        #toolbar {
            position: relative;
            padding-bottom: 0.5em;
            display: none;
        }
        /* The map and the location bar */
        #map {
            clear: both;
            position: relative;
            width: 337px;
            height: 512px;
            border: 2px solid black;
        }            
        #wrapper {
            width: 337px;
            height: 50px;                           
        }            
        #location {
            float: right;
            font-family: Arial, Verdana, sans-serif; 
            font-size: 12px; 
            color: #483D8B;
            background-color: white;
        }            
        #scale {
            float:left;
            font-family: Arial, Verdana, sans-serif; 
            font-size: 12px; 
            color: #483D8B;
            background-color: white;
        }
        #nodelist{
            font-family: Arial, Verdana, sans-serif; 
            font-size: 14px; 
            color: #000000;
            font-style: normal;
            background-color: white;
        }
    </style>
    <!-- Import OpenLayers, reduced, wms read only version -->
    <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>      
    <!-- add here more js libraries -->




    <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
    <script src ='proj4js/lib/proj4js-combined.js'></script>
    <script src ='proj4js/lib/deprecated.js'></script>

    <script defer="defer" type="text/javascript">
        var map;
        var untiled;
        var tiled;
        var pureCoverage = false;
        // pink tile avoidance
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;


        // make OL compute scale according to WMS spec
        OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;



        function init(){



            format = 'image/png';


            var options = {
                controls: [],
                projection: new OpenLayers.Projection('EPSG:900916'),
                displayProjection: new OpenLayers.Projection('EPSG:4326'),
                maxExtent: new OpenLayers.Bounds(           
                -20037508, -20037508,20037508, 20037508.34),
                //modify parameter
                maxResolution: 5000,
                //modify parameter
                //setting zoom levels
                numZoomLevels:15,
                units: 'm',

            };
            map = new OpenLayers.Map('map', options);
            // setup tiled layer

                var gphy = new OpenLayers.Layer.Google(
                "Google Physical",
                {type: google.maps.MapTypeId.TERRAIN, numZoomLevels: 15, sphericalMercator:true}
                // used to be {type: G_PHYSICAL_MAP}
                );
                var gmap = new OpenLayers.Layer.Google(
                    "Google Streets", // the default
                    {numZoomLevels: 15, sphericalMercator:true}
                    // default type, no change needed here
                );
                var ghyb = new OpenLayers.Layer.Google(
                    "Google Hybrid",
                    {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 15, sphericalMercator:true}
                    // used to be {type: G_HYBRID_MAP, numZoomLevels: 20}
                );
                var gsat = new OpenLayers.Layer.Google(
                    "Google Satellite",
                    {type: google.maps.MapTypeId.SATELLITE, 
                    numZoomLevels: 15, 
                    sphericalMercator:true

                    }
                    // used to be {type: G_SATELLITE_MAP, numZoomLevels: 22}
                );

            //add controls here
                map.addControl(new OpenLayers.Control.LayerSwitcher());
                map.addControl(new OpenLayers.Control.LayerSwitcher());
                map.addControl(new OpenLayers.Control.PanZoomBar());
                zf= new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to max extent"});
                // create a panel to locate the zoom extent button & add the panel to the map
                // use the code to create the button from ZoomToMaxExtent.js
                var panel= new OpenLayers.Control.Panel({defaultControl:zf});       
                panel.addControls([zf]);
                map.addControl(panel);
                map.addControl(new OpenLayers.Control.Navigation());
                map.addControl(new OpenLayers.Control.Scale($('scale')));
            //end add controls


            layer2 = new OpenLayers.Layer.WMS( 
                "Gr2LundKom:districts","http://gisl.nateko.lu.se:8080/geoserver/wms", 
                {
                    projection: map.displayProjection,
                    height: '600',
                    width: '800',
                    layers: 'Gr2LundKom:districts',
                    styles: '',
                    srs:'EPSG:3006',
                    format: format,
                    tiled: 'true',
                    transparent: 'true',

                }, 
                {
                    buffer: 0,
                    displayOutsideMaxExtent: true,
                    isBaseLayer: false,
                    reproject: true
                });
                Proj4js.defs["EPSG:3006"] = "+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs";
                Proj4js.defs["EPSG:4326"] = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
                var src = new OpenLayers.Projection('EPSG:3006');
                var dst =  new OpenLayers.Projection('EPSG:4326');
                Proj4js.transform(src, dst, layer2); 
                layer2.projection=dst;                  

            layer3 = new OpenLayers.Layer.WMS( 
                "Gr2LundKom:public_buildings,other_buildings,roads_all,Public_Libraries",
                "http://gisl.nateko.lu.se:8080/geoserver/wms",
                {
                    projection: map.displayProjection,
                    height: '600',
                    width: '800',
                    layers: "Gr2LundKom:public_buildings,other_buildings,roads_all,Public_Libraries",
                    transparent: "true", 
                    styles: '',
                    srs:'EPSG:3006',
                    format: format,
                    tiled: 'true',
                    transparent: 'true'
                }, 
                {
                    buffer: 0,
                    displayOutsideMaxExtent: true,
                    isBaseLayer: false,
                    reproject: true                     
                });
                Proj4js.transform(src, dst, layer3);
                layer3.projection=dst;                  

            map.addLayers([gsat,gphy,gmap,ghyb,layer2]);
            //map.setCenter(new OpenLayers.LonLat(1335967.698, 6179172.362), 22);
            map.zoomToExtent(new OpenLayers.Bounds(         
                -20037508, -20037508,20037508, 20037508.34));

            // change the dislapy layers with the chandge of scale
            map.events.register('zoomend', this, function (event) {
            var zLevel = map.getZoom();     
                if( zLevel == 1 || zLevel == 2 || zLevel == 3  )
                {
                    layer3.setVisibility(false);
                    layer2.setVisibility(true);
                }
                if( zLevel == 4 || zLevel == 5 || zLevel == 6)
                {
                    layer2.setVisibility(false);
                    layer3.setVisibility(true);
                    map.addLayers([gsat,gphy,gmap,ghyb,layer3]);
                }

                });

        }









    </script>
    </head>     
<body onload="init()">
    Map viewer using Geoserver and MapLayers
    <br><br>


        <div id="map">
        </div>
        <br>
        <div id="wrapper">
            <div id="location">location</div>
            <br>
            <div id="scale">
            </div>
        </div>

        <br>
        <div id="nodelist" >
            --> Click on the map to get feature info
        </div>
 </body>

4

2 に答える 2

2

まあ、それは回避策だと思いますが、geoserverを使用しているので、geoserverのレイヤーをGoogleメルカトル図法に変換できます（EPSG：900916が機能しなかったことを思い出すので、コードEPSG：3857を使用する必要があります） 。私もこの問題に苦しんでいました、そしてそれが私を助けた唯一のことでした。ただし、この問題は、簡単に変換できるwms、wfsレイヤーを使用する場合にのみ発生します。

また、EPSG：4326ですべてを視覚化するのではなく、代わりにgoogleメルカトル図法で視覚化する必要があると思います。

これがお役に立てば幸いです。

于 2013-01-18T08:19:35.343 に答える
0

ここにタイプミスがあると思います。これは EPSG:900916 ではなく EPSG:900913 にする必要があります。これは Google を数字で表現したものだからです (900913)

于 2013-04-29T18:01:40.530 に答える