在 Google MAP 上显示 Geoserver WMS 层，其中 Geoserver 的数据源是 PostGreSQL

Question

我正在使用以下 API/tools Google 地图、GeoServer、PostGreSQL（使用 POSTGIS）开发 ASP.NET 的 Web 应用程序。我需要在 google 地图 V3 上显示 GeoServer 的 WMS 图层。26.Data GeoServer 的来源是 POSTGIS。我使用下面给定的脚本在 PostGreSQL（使用 POSTGIS）中插入了数百个 MULTILINESTRING。

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

然后在 Geoserver 中发布一个层，该层使用来自 "LineData" table 的数据并保留 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

您要求 GeoServer return 您 epsg:4326 while your map is in epsg:3857 中的图块，因此它们看起来是错误的。

因此您需要更改行：

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

到

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

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

在 Google MAP 上显示 Geoserver WMS 层，其中 Geoserver 的数据源是 PostGreSQL

Display geoserver WMS layer on Google MAP where datasource for Geoserver is PostGreSQL

postgis

wms

geoserver

google-maps-api-3