Google Map API 3 + WMS

后端未结

关注

 2  1018

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

相关标签:

2条回答

佛祖请我去吃肉

2021-01-31 01:28

<!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

0 讨论(0)

轮回少年

2021-01-31 01:34
There is a great example on this here: http://www.sumbera.com/lab/GoogleV3/tiledWMSoverlayGoogleV3.htm

Here you have 2 kinds of layers:
1. base layer which is in the bottom
2. 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)

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!
0 讨论(0)
发布评论:

提交评论
- 加载中...