1
私は次のAPI /ツールを使用してASP.NETのWebアプリケーションを開発中です.Google Map、GeoServer、PostGreSQL（POSTGISを使用） GeoServerのWMSレイヤーをGoogleマップV3.26に表示するという要件があります。GeoServerのデータソースはPOSTGISです。私はPostGreSQLに数多くのMULTILINESTRINGを（POSTGISで）以下のスクリプトを使って挿入しました。その後GeoserverのデータソースがPostGreSQLであるGoogleマップ上にgeoserver WMSレイヤを表示
INSERT INTO public."LineData"("ID", "LineCoordinates") values('11195625',ST_GEOMFROMTEXT('MULTILINESTRING ((<Latitude Longitude>))',4326));
「線データ」テーブルのデータを使用Geoserverでレイヤーを公開し、ネイティブ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
私はgetTileUrl関数にバウンディングボックスを指定しました。また、私はEPSGを3875に変更しました。でも問題は残っています。 Geoserver、postgis、Googleマップにサンプルがありますか？またはその他の提案 –
質問コードを更新し、結果のスクリーンショットを表示してください –
できるだけ早くスクリーンショットを追加しようとします。私のバウンディングボックス計算もチェックしてください。ありがとう。 –