个人中心
gpt4 book ai didi

javascript - Google map 上的 Openseamap - 默认添加海洋剖面图层

转载 作者：数据小太阳 更新时间：2023-10-29 05:24:46 26 4
gpt4 key购买 nike

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

我想在 seamark 上添加 marine profile 和 ais 图层作为默认图层。到目前为止，谷歌地图上的 semarks layer osm 是可以的。

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

提前致谢!

My fiddle

和片段:

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>

最佳答案

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

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>

希望对您有所帮助。

关于javascript - Google map 上的 Openseamap - 默认添加海洋剖面图层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46227738/

26 4 0
文章推荐： javascript - 在 npm 脚本中匹配多个文件扩展名
文章推荐： ios - 具有单击和长按事件的 UIButton swift
文章推荐： ios - swift Appdelegate中的全局变量
文章推荐： javascript - 在 IE11 中下载文件出现错误 "' Uint8Array' is undefined”
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com