javascript 谷歌地图 API 3 + WMS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8354163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Map API 3 + WMS
提问by Hari Dahal
Can somebody give me best idea, how to put WMS layer over Google map I have so many layers and so many styles. I research on so many Q and A at StackOverflow, but I didn't get the point about how to manage multiple styles and layers. I would like to put into my JQuery code.
有人可以给我最好的主意，如何将 WMS 图层放在 Google 地图上，我有很多图层和样式。我在 StackOverflow 上研究了很多 Q 和 A，但我没有明白如何管理多个样式和层。我想放入我的 JQuery 代码中。
回答by TMS
There is a great example on this here: http://www.sumbera.com/lab/GoogleV3/tiledWMSoverlayGoogleV3.htm
这里有一个很好的例子：http: //www.sumbera.com/lab/GoogleV3/tiledWMSoverlayGoogleV3.htm
Here you have 2 kinds of layers:
这里有两种层：
- base layer which is in the bottom
- overlayed semi-transparent layer which is above all other layers
- 位于底部的基层
- 覆盖在所有其他层之上的半透明层
(note: in the above example they use WMS just for case 2, but you can of course use it also for 1, as the interface (object google.maps.ImageMapType) is the same for both)
（注意：在上面的示例中，他们仅将 WMS 用于案例 2，但您当然也可以将其用于案例 1，因为两者的接口（对象google.maps.ImageMapType）是相同的）
Basically, to add "base layers" you use:
基本上，要添加“基础层”，您可以使用：
map.mapTypes.set('OSM', new google.maps.ImageMapType({ ... }));
To add overlayed layer you use:
要添加您使用的叠加层：
map.overlayMapTypes.push(new google.maps.ImageMapType({ ... }));
To add layers to map type control you use option when creating the map:
要将图层添加到地图类型控件，请在创建地图时使用选项：
mapTypeControlOptions: {
mapTypeIds: [
'OSM',
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.TERRAIN
],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
The above example illustrates this greatly. As for the styling of the WMS layers, this is pretty complex, I also put a question about this here. Good luck!
回答by Justin Poehnelt
<!DOCTYPE html>
<html>
<head>
<title>WMS and Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var EXTENT = [-Math.PI * 6378137, Math.PI * 6378137];
function xyzToBounds(x, y, z) {
var tileSize = (EXTENT[1] * 2) / Math.pow(2, z);
var minx = EXTENT[0] + x * tileSize;
var maxx = EXTENT[0] + (x + 1) * tileSize;
// remember y origin starts at top
var miny = EXTENT[1] - (y + 1) * tileSize;
var maxy = EXTENT[1] - y * tileSize;
return [minx, miny, maxx, maxy];
}
var getTileUrl = function(coordinates, zoom) {
return (
"https://www.mrlc.gov/geoserver/NLCD_Land_Cover/wms?" +
"&REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.1" +
"&LAYERS=mrlc_display%3ANLCD_2016_Land_Cover_L48" +
"&FORMAT=image%2Fpng" +
"&SRS=EPSG:3857&WIDTH=256&HEIGHT=256" +
"&BBOX=" +
xyzToBounds(coordinates.x, coordinates.y, zoom).join(",")
);
};
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: { lat: 37.783, lng: -122.403 }
});
var landcover = new google.maps.ImageMapType({
getTileUrl: getTileUrl,
name: "Landcover",
alt: "National Land Cover Database 2016",
minZoom: 0,
maxZoom: 19,
opacity: 0.75,
});
map.overlayMapTypes.push(landcover);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
</script>
</body>
</html>You can read the details here: https://medium.com/@justinwp/wms-layer-on-google-maps-1087a43d7556
您可以在此处阅读详细信息：https: //medium.com/@justinwp/wms-layer-on-google-maps-1087a43d7556
