在Google MAP上顯示geoserver WMS圖層，其中Geoserver的數據源是PostGreSQL

我正在使用以下API /工具Google Map，GeoServer，PostGreSQL（使用POSTGIS）處理ASP.NET的Web應用程序。我有要求在谷歌地圖V3.26上顯示GeoServer的WMS圖層。GeoServer的數據源是POSTGIS。我已經使用下面給出的腳本在PostGreSQL（使用POSTGIS）中插入了數百個MULTILINESTRING。在Google MAP上顯示geoserver WMS圖層，其中Geoserver的數據源是PostGreSQL

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

然後發佈在利用Geoserver從「LineData」表中使用的數據，並保持原生SRC EPSG一層：4326。要在Google地圖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

來源

2017-05-26 M.Sharma

你問的GeoServer返回你的瓷磚epsg:4326，而你的地圖是在epsg:3857，因此它們看起來是錯誤的。

所以，你需要更改線路：

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

到

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

你還需要在你的地圖座標指定邊界框。

來源

2017-05-26 15:15:18

我在getTileUrl函數中指定了邊界框。此外，我將EPSG更改爲3875.但仍存在問題。 Geoserver，postgis和Google地圖中是否有任何示例。或任何其他建議 –

請更新您的問題代碼並顯示結果的屏幕截圖 –

將嘗試儘快添加屏幕截圖。請檢查我的邊界框計算也。謝謝。 –

在Google MAP上顯示geoserver WMS圖層，其中Geoserver的數據源是PostGreSQL

回答

相關問題