canvas绘制缩放网格_了解地图图块网格和缩放级别

canvas绘制缩放网格

How do you take a round object and display it accurately on a flat surface? This is a question map makers and cartographers have been grappling with for centuries. And it remains an issue for mapping service makers as well.

如何拍摄圆形物体并将其准确显示在平面上？ 这是地图制作者和制图师几个世纪以来一直在努力解决的问题。 对于地图服务制造商来说，这仍然是一个问题。

To provide quality mapping information you can use in devices and applications, TomTom’s location services employ a Spherical Mercator projection of the earth’s surface to create the underlying map representation used by the services. The map data is further delineated by zoom levels and tile grids that provide the exact visual representation you need to display a map on a web site, mobile map or other devices.

为了提供可在设备和应用程序中使用的高质量地图信息，TomTom的定位服务使用地球表面的球形墨卡托投影来创建服务使用的基础地图表示形式。 缩放级别和图块网格进一步描绘了地图数据，它们提供了在网站，移动地图或其他设备上显示地图所需的确切视觉表示。

In this article, we’ll explain:

在本文中，我们将说明：

• How maps are designed
  地图的设计方式
• How map data is represented in the TomTom Map Display API in tiles
  如何在图块的TomTom Map Display API中表示地图数据
• How zoom levels affect what information appears on map tiles
  缩放级别如何影响在地图图块上显示的信息

墨卡托投影 (Mercator Projection)

With growing awareness of the Earth’s nature, early cartographers faced a problem. While most maps were rectangular, the Earth was approximately spherical. They required a way to project coordinates from a three-dimensional ellipsoid onto a two-dimensional rectangular plane. Technically, the Earth is an ellipsoid bulging slightly at the equator.

随着人们对地球自然的认识不断提高，早期的制图师面临着一个问题。 虽然大多数地图都是矩形的，但地球大约是球形的。 他们需要一种将坐标从三维椭球投影到二维矩形平面上的方法。 从技术上讲，地球是一个在赤道略微鼓起的椭圆形。

In 1569, the Flemish cartographer Gerardus Mercator proposed a mathematical basis for this projection. While many other projections also exist, this quickly became, and remains, the most popular.

1569年，佛兰德制图师Gerardus Mercator提出了这一预测的数学基础。 尽管还存在许多其他预测，但这种预测很快成为并且仍然是最受欢迎的。

With any such projection, some distortion is unavoidable. In the Mercator projection, geographical features further from the equator are exaggerated in size. For example, Greenland appears to be of a similar size to Africa. However, Africa is actually more than 14 times as large (by area).

对于任何这样的投影，不可避免地会出现一些失真。 在墨卡托投影中，距离赤道较远的地理特征被夸大了。 例如，格陵兰岛的面积似乎与非洲相似。 但是，非洲的面积实际上是其面积的14倍以上。

The map below shows the apparent relative sizes of Greenland (left) and Africa (right) on a map using the Mercator projection. The orange area in the center of Greenland is its relative size without the distortion caused by Mercator projection.

下面的地图使用墨卡托投影在地图上显示了格陵兰(左)和非洲(右)的相对大小。 格陵兰岛中心的橙色区域是其相对大小，没有墨卡托投影造成的失真。

The Mercator projection also has the disadvantage that it is not possible to represent the North and South poles since these would be nearly infinite in apparent size. For this reason, most Mercator maps omit approximately five degrees of latitude at each pole.

墨卡托投影的缺点还在于无法表示北极和南极，因为它们的视在尺寸几乎是无限的。 因此，大多数墨卡托地图在每个极点上都省略了大约五个纬度。

The Mercator projection has the advantage that it preserves rhumb lines. When drawn on the map, they are straight lines. Rhumb lines are commonly used for nautical navigation. They are lines of constant bearing with regard to magnetic North.

墨卡托投影的优点是保留了菱形线条。 在地图上绘制时，它们是直线。 横线通常用于航海导航。 它们是关于磁北的恒定轴承线。

WGS 84 /伪墨卡托 (WGS 84/Pseudo-Mercator)

Additional requirements arose with the wider availability of web-based mapping data. Since maps now allowed the ability to zoom and pan, the industry collaborated to establish a de facto standard for projection that better supported these features.

随着基于Web的地图数据的更广泛可用性，产生了其他要求。 由于地图现在允许缩放和平移，因此业界合作建立了事实上的投影标准，以更好地支持这些功能。

In 2005, they introduced a new projection that is based on the Mercator projection. It introduces the concept of zoom level. It also simplifies the equations to use a spherical approximation for faster calculations.

在2005年，他们引入了一个基于墨卡托投影的新投影。 它介绍了缩放级别的概念。 它还简化了方程式，以使用球面近似来加快计算速度。

This new projection presents similar distortions to the Mercator projection for geographical features further from the equator. It also has similar limitations with regard to representing latitudes near the Earth’s poles. Unlike the Mercator projection, it does not preserve the rhumb lines used for nautical navigation.

对于距赤道较远的地理特征，此新投影呈现与Mercator投影类似的变形。 在表示地球两极附近的纬度方面也有类似的限制。 与墨卡托投影不同，它不保留用于航海的菱形线。

This projection is officially designated by the European Petroleum Survey Group as EPSG 3857 and named “WGS 84 / Pseudo-Mercator”. It is also commonly referred to as “Web Mercator” and sometimes as “Spherical Mercator”.

该投影被欧洲石油调查组织正式指定为EPSG 3857，并被命名为“ WGS 84 / Pseudo-Mercator ”。 通常也称为“ Web Mercator ”，有时也称为“ Spherical Mercator ”。

缩放等级 (Zoom Levels)

The TomTom Map Display API utilizes the concept of a “zoom level” to support the display of increasingly more detailed maps. The zoom level is an integer that specifies the level of detail to display on the map, with larger integers resulting in greater levels of detail.

TomTom地图显示API利用“ 缩放级别 ”的概念来支持显示越来越详细的地图。 缩放级别是一个整数，用于指定要在地图上显示的详细程度，较大的整数会导致更大的详细程度。

Raster maps allow zoom levels that range from 0 through 20. Vector maps include two additional levels of zoom: 21 and 22.

栅格地图允许的缩放级别为0到20。矢量地图包括两个附加的缩放级别：21和22。

瓷砖 (Tiles)

To implement zooming, TomTom divides the map into equal-sized square tiles. At a zoom level of zero, the map of the entire Earth fits onto a single tile.

为了实现缩放，TomTom将地图分为相等大小的正方形图块。 缩放级别为零时，整个地球的地图都适合单个图块。

With each increment of zoom level, every tile is divided into four equally sized tiles. The result is a map that is four times as large with a similar increase in detail.

随着缩放级别的每次增加，每个图块都将分为四个大小相等的图块。 结果是地图的大小是原来的四倍，详细信息也有所增加。

The number of tiles on each side of the map (horizontal or vertical) doubles with each increase in zoom level. For this reason, the number of tiles on a side is easily calculated as 2zoom-level. To calculate the total number of tiles on the map, simply square that value: 2zoom-level x 2zoom-level.

随着缩放级别的增加，地图每侧(水平或垂直)上的图块数量都会加倍。 因此，可以轻松将一侧的瓦片数计算为2缩放级别。 要计算地图上的瓷砖总数，只需将该值平方：2zoom-level x 2zoom-level。

Until this point, we’ve focused on understanding how the size of the map and the number of tiles increases with zoom level. Next, we’ll consider how the level of detail also increases with zoom level.

到目前为止，我们一直专注于理解地图的大小和图块数量如何随缩放级别而增加。 接下来，我们将考虑细节级别如何随缩放级别而增加。

The Empire State Building is located at 350 Fifth Avenue, New York, New York, USA at latitude 40.74816° N and longitude 73.985° W. The diagram below helps to understand how detail increases with zoom level. In this diagram, we show the single tile, from each zoom level, that contains this building.

帝国大厦位于美国纽约州纽约第五大道350号，北纬40.74816°，西经73.985°。下图有助于了解细节如何随缩放级别增加。 在此图中，我们显示了每个缩放级别中包含该建筑物的单个图块。

By the time we reach zoom level 17, the Empire State Building occupies a considerable portion of a single tile. With further zooming, to level 18, multiple tiles are required to represent the building.

当我们达到缩放级别17时，帝国大厦占据了单个图块的相当一部分。 进一步缩放到18级时，需要使用多个图块来代表建筑物。

Fortunately, the TomTom Maps SDK for Web is not quite so limited. It is entirely capable of displaying portions of a tile, such that the building appears centered on the map.

幸运的是，用于Web的TomTom Maps SDK并不仅限于此。 它完全能够显示图块的各个部分，从而使建筑物显示在地图中心。

For example, using the TomTom Maps SDK for Web, we can find the position of the Empire State Building by writing code for a simple search like the following.

例如，使用TomTom Maps SDK for Web，我们可以通过编写如下所示的简单搜索代码来找到Empire State Building的位置。

tomtom.setProductInfo('<your-product-name>', '<your-product-version>');
tomtom.key('<your-tomtom-API-key>');
tomtom.fuzzySearch()
  .query('Empire State Building')
  .limit(1)
  .go(function(response) { showMap(response[0].position); });
This code searches for the term “Empire State Building” and limits the response to a single result. It then calls the function “showMap”, passing the latitude and longitude of that single result as a parameter.
function showMap(center) {
  var map = tomtom.L.map('map', {
    center: center,
    zoom: 18
  });
}

The code for the “showMap” function is very simple. It creates a map that is placed in the HTML element with the identity “map”. It centers the map on the position returned from the earlier search and sets the zoom level to 18.

“ showMap”功能的代码非常简单。 它创建一个映射，该映射以标识“ map”放置在HTML元素中。 它将地图以先前搜索返回的位置为中心，并将缩放级别设置为18。

In a web browser, the resulting map appears similar to the following.

在Web浏览器中，生成的地图看起来类似于以下内容。

While it may not appear so, this map is still tile-based. In this case, the TomTom Maps SDK for Web greatly simplifies our interaction with the underlying Map Display API. The Maps SDK for Web requests each of the individual map tiles and selectively hides portions of them to center the search result. It also overlays copyright information and a user interface to allow the user to change the zoom level.

虽然它可能不会出现，但此地图仍基于图块。 在这种情况下，适用于Web的TomTom Maps SDK大大简化了我们与基础Map Display API的交互。 用于Web的Maps SDK会请求每个单独的地图图块，并有选择地隐藏它们的一部分以使搜索结果居中。 它还叠加了版权信息和用户界面，以允许用户更改缩放级别。

If we were to show the tile boundaries and the hidden portions of each tile, the map would appear approximately as follows.

如果我们要显示图块边界和每个图块的隐藏部分，则地图将大致如下所示。

The complete source code for the HTML file used in this example appears below.

下面显示此示例中使用HTML文件的完整源代码。

This example assumes that the TomTom Maps SDK for Web has been downloaded from https://developer.tomtom.com/maps-sdk/maps-sdk-downloads and that the HTML below has been edited to provide a valid TomTom API key.

本示例假定已从https://developer.tomtom.com/maps-sdk/maps-sdk-downloads下载了TomTom Maps SDK for Web，并已编辑了以下HTML以提供有效的TomTom API密钥。

<!DOCTYPE html>
<html>
  <head>
    <title>Empire State Building</title>
    <link rel='stylesheet' type='text/css' href='sdk/map.css'/>
    <script src='sdk/tomtom.min.js'></script>
    <style>
      #map { height: 512px;  width: 512px;  }
    </style>
  </head>
 
  <body>
    <div id='map'></div>
    <script>
      tomtom.setProductInfo('<your-product-name>', '<your-product-version>');
      tomtom.key('<your-tomtom-API-key>');
         
      tomtom.fuzzySearch()
        .query('Empire State Building')
        .limit(1)
        .go(function(response) { showMap(response[0].position); });
      function showMap(center) {
        var map = tomtom.L.map('map', {
          center: center,
          zoom: 18
        });
      }
    </script>
  </body>
</html>

To learn more, check out the TomTom Maps SDK for Web functional examples on the TomTom developer web site. You’ll find examples of not just returning basic raster and vector map images, but much more detailed use cases including manipulating map layers, adding markers and more.

要了解更多信息，请在TomTom开发人员网站上查看针对Web功能的TomTom Maps SDK 。 您不仅可以找到返回基本栅格和矢量地图图像的示例，还可以找到更详细的用例，包括操纵地图图层，添加标记等。

This article originally appeared on https://developer.tomtom.com/blog. The original author is Shannon Stroud.

本文最初出现在 https://developer.tomtom.com/blog上。 原始作者是Shannon Stroud。

翻译自: https://medium.com/tomtom-developers/understanding-map-tile-grids-and-zoom-levels-262b3cf644e2

canvas绘制缩放网格