javascript - Google Map API 3 + WMS

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.

Share Improve this question asked Dec 2, 2011 at 9:21 Hari Dahal 1131 gold badge3 silver badges11 bronze badges

Add a comment |

2 Answers 2

Sorted by: Reset to default 13

There is a great example on this here: 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)

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!

<!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://justin.poehnelt.com/posts/google-maps-wms-layer/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Google Map API 3 + WMS - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)