6

我正在尝试做一些个人项目，我正在尝试在谷歌地图上添加海洋图层。所以决定使用免费的 osm 选项。

我想在 seamark 上添加海洋剖面和 ais 图层作为默认图层。到目前为止，谷歌地图上的标记层 osm 还可以。

如何将其他图层添加为带有 seamark 图层的默认图层。我不知道如何在地图上添加其他图层作为默认图层。

提前致谢！

我的小提琴

和片段： 

var map;

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    center: {
      lat: 44.5,
      lng: 13.1
    },
    mapTypeControlOptions: {
      mapTypeIds: ['roadmap']
    }
  });


  var osmMapTypeOptions = {
    getTileUrl: function(coord, zoom) {
      console.log("getTileUrl("+coord.x+","+coord.y+","+zoom+")");
      var z = zoom;
      var limit = Math.pow(2, z);
      if (coord.y < 0 || coord.y >= limit) {
        return null;
      } else {
        coord.x = ((coord.x % limit) + limit) % limit;
        url = "http://t1.openseamap.org/seamark/";
        path = zoom + "/" + coord.x + "/" + coord.y + "." + "png";
        console.log("getTileUrl:" + url + path);
        return url + path;
      
      }
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
    maxZoom: 19,
    minZoom: 0,
    name: "OSM"
  };

  function getTileURL(bounds) {
    var res = this.map.getResolution();
    var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
    var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
    var z = this.map.getZoom();
    var limit = Math.pow(2, z);
    if (y < 0 || y >= limit) {
      return null;
    } else {
      x = ((x % limit) + limit) % limit;
      url = this.url;
      path = z + "/" + x + "/" + y + "." + this.type;
      if (url instanceof Array) {
        url = this.selectUrl(path, url);
      }
      return url + path;
    }
  }

  var osmMapType = new google.maps.ImageMapType(osmMapTypeOptions);

  map.overlayMapTypes.insertAt(0,osmMapType);
  map.overlayMapTypes.insertAt(1,osmMapType);

}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?language=en&libraries=drawing,geometry"></script>
<div id="map"></div>

4

2 回答 2

4

我找到了一个在地图上使用多个图层的示例：

https://developers.google.com/fusiontables/docs/samples/multiple_layers_per_map

<!DOCTYPE html>
<!--
  Copyright 2011 Google Inc. All Rights Reserved.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">

    <title>Fusion Tables Layer Example: Multiple Layers per Map</title>

    <link href="/apis/fusiontables/docs/samples/style/default.css"
        rel="stylesheet" type="text/css">
    <script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
      function initialize() {
        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: new google.maps.LatLng(37.4, -122.1),
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infoWindow = new google.maps.InfoWindow();

        // Initialize the first layer
        var firstLayer = new google.maps.FusionTablesLayer({
          query: {
            select: 'geometry',
            from: '196LqydLhOq1Wl9612hNhcGoh4vUmRjTaiFvDhA'
          },
          map: map,
          suppressInfoWindows: true
        });
        google.maps.event.addListener(firstLayer, 'click', function(e) {
          windowControl(e, infoWindow, map);
        });

        // Initialize the second layer
        var secondLayer = new google.maps.FusionTablesLayer({
          query: {
            select: "'Full Address'",
            from: '1tL67aacGcCyMfAg9PUo_-gp4qm74GDtFiCMtFg'
          },
          map: map,
          suppressInfoWindows: true
        });
        google.maps.event.addListener(secondLayer, 'click', function(e) {
          windowControl(e, infoWindow, map);
        });
      }

      // Open the info window at the clicked location
      function windowControl(e, infoWindow, map) {
        infoWindow.setOptions({
          content: e.infoWindowHtml,
          position: e.latLng,
          pixelOffset: e.pixelOffset
        });
        infoWindow.open(map);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

希望有帮助。

于 2017-10-02T18:19:18.463 回答
0

尝试创建：

var osmMapTypeOptions2 = {...}
...
var osmMapType2 = new google.maps.ImageMapType(osmMapTypeOptions2);
...

接着：

 map.overlayMapTypes.insertAt(0,osmMapType);
 map.overlayMapTypes.insertAt(1,osmMapType);
 map.overlayMapTypes.insertAt(2,osmMapType2);
 map.overlayMapTypes.insertAt(3,osmMapType2);
于 2018-11-20T21:57:54.023 回答