Question

我正在使用以下API /工具Google Map，GeoServer，PostGreSQL（使用POSTGIS）开发ASP.NET的Web应用程序。我要求在谷歌地图V3.26上显示GeoServer的WMS层.GeoServer的数据源是POSTGIS。我使用下面给出的脚本在PostGreSQL（使用POSTGIS）中插入了数百个MULTILINESTRING。

INSERT INTO public."LineData"("ID", "LineCoordinates")    values('11195625',ST_GEOMFROMTEXT('MULTILINESTRING ((<Latitude Longitude>))',4326));

然后在Geoserver中发布一个使用“LineData”表中数据的图层，并保留Native SRC EPSG：4326。要在Google Map V3.26上显示此图层，我使用了以下给定的代码。问题是图块无法正确渲染。它们被打破并显示在错误的地方。谁能说出我在做什么错？

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Google Map with Geoserver WMS Overlay</title>

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.26&language=en-US"></script>

        <style type="text/css">
            html {
                height: 100%;
            }

            body {
                height: 100%;
                margin: 0px;
                padding: 0px;
            }

            #map_canvas {
                height: 100%;
            }
        </style>
    </head>
    <body onload="initialize()">
        <h1>Google Map with Geoserver WMS and KML Overlay</h1>
        <div id="map_canvas"></div>
    </body>
    </html>

    <script type="text/javascript">
        var TILE_SIZE = 256;

        var wmsparams = [
           "SERVICE=WMS",
           "VERSION=1.1.1",
          "REQUEST=GetMap",
          "FORMAT=image/png",
          "TRANSPARENT=TRUE",
          "BGCOLOR=0xFFFFFF",
          "SRS=EPSG:4326",
          "WIDTH=256",
          "HEIGHT=256"
        ];
    </script>

    <script type="text/javascript">
        function initialize() {
            // Create a MapOptions object with the required properties for base map
            var mapOptions = {
                zoom: 9,
                center: new google.maps.LatLng(36.04450, -80.34747),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            // Create the base map
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

            //Define custom WMS layer for census output areas in WGS84
            var censusLayer =
             new google.maps.ImageMapType(
             {

                 getTileUrl: function (coord, zoom) {
                     // Compose URL for overlay tile
                     var s = Math.pow(2, zoom);
                     var twidth = 256;
                     var theight = 256;

                     //latlng bounds of the 4 corners of the google tile
                     //Note the coord passed in represents the top left hand (NW) corner of the tile.
                     var gBl = map.getProjection().fromPointToLatLng(new google.maps.Point(coord.x * twidth / s, (coord.y + 1) * theight / s)); // bottom left / SW
                     var gTr = map.getProjection().fromPointToLatLng(new google.maps.Point((coord.x + 1) * twidth / s, coord.y * theight / s)); // top right / NE

                     // Bounding box coords for tile in WMS pre-1.3 format (x,y)

                     var bbox = parseFloat(gBl.lat()) + "," + parseFloat(gBl.lng()) + "," + parseFloat(gTr.lat()) + "," + parseFloat(gTr.lng());

                     //base WMS URL
                     var url = "http://localhost:8080/geoserver/TestWorkSpace/wms?";

                     url += "&service=WMS";           //WMS service
                     url += "&version=1.1.0";         //WMS version
                     url += "&request=GetMap";        //WMS operation
                     url += "&layers=TestLayer"; //WMS layers to draw
                     url += "&styles=";               //use default style
                     url += "&format=image/png";      //image format
                     url += "&TRANSPARENT=TRUE";      //only draw areas where we have data
                     url += "&srs=EPSG:4326";         //projection WGS84
                     url += "&bbox=" + bbox;          //set bounding box for tile
                     url += "&width=256";             //tile size used by google
                     url += "&height=256";
                     //url += "&tiled=true";
                     return url;                 //return WMS URL for the tile
                 },
                 tileSize: new google.maps.Size(256, 256),
                 opacity: 0.85,
                 isPng: true
             });

            // add WMS layer to map
            map.overlayMapTypes.push(censusLayer);
        }
    </script>


Thanks

Answer 1

当您的地图位于epsg:4326时，您要求GeoServer在epsg:3857中返回您的图块，因此它们看起来不对。

所以你需要更改一行：

         url += "&srs=EPSG:4326";

到

          url += "&srs=EPSG:3875";

您还需要在地图坐标中指定边界框。

在Google MAP上显示地理服务器WMS图层，其中Geoserver的数据源是PostGreSQL

1 个答案: