显示tiff图像在谷歌地图



我正在使用Google地图,我想根据条件在地图上显示图像的某些部分(tiff图像)。图像应该覆盖在地图上。

在显示日本某些地区的温度时,当我选择年份时,根据该年份图像的特定区域应覆盖在地图上。

我如何在地图上上传tiff图像,上传的图像必须覆盖在正确的地方。

救援地面叠加

您可以使用地面覆盖在地图中覆盖图像。地面覆盖是与纬度/经度坐标绑定的对象,因此当您拖动或缩放地图时,它们会移动。

有关地面覆盖的更多信息,您可以查看以下文档:

  • https://developers.google.com/maps/documentation/javascript/groundoverlays

我也有一个代码示例,从文档中,你可以在你的地图上覆盖一个jpeg图像:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Ground Overlays</title>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #map {
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    // This example uses a GroundOverlay to place an image on the map
     // showing an antique map of Newark, NJ.
    var historicalOverlay;
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 13,
        center: {
          lat: 40.740,
          lng: -74.18
        }
      });
      var imageBounds = {
        north: 40.773941,
        south: 40.712216,
        east: -74.12544,
        west: -74.22655
      };
      historicalOverlay = new google.maps.GroundOverlay(
        'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
        imageBounds);
      historicalOverlay.setMap(map);
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
  </script>
</body>
</html>

注意:在这个例子中,我没有使用一个键,所以它在StackOverflow上工作。但作为一个用户,你应该始终使用API密钥或您的网站可能会被谷歌屏蔽。只需替换

https://maps.googleapis.com/maps/api/js?callback=initMap

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap

tiff呢?

在这一点上,我不完全确定我们支持tiff格式。关于grounoverlay的文档只提到您需要添加一个URL,但它没有指定任何关于图像类型的内容。在这种情况下,您将不得不尝试,但我有根据的猜测是它应该工作

不支持tiff怎么办?

如果不支持tiff格式,您始终可以将该格式的图像转换为pngjpeg。下面是两个链接,可以帮你加入进来:

  • http://image.online-convert.com/convert-to-png
  • http://image.online-convert.com/convert-to-jpg

但是外面还有很多很多。

我希望这个答案对你有所帮助。如果由于某些原因tiff不支持,请告诉我,以便我可以提出功能请求!

最新更新