【Google Maps JavaScript API】深入了解自定义地图投影（Custom Map Projections）

最新推荐文章于 2024-10-02 05:39:15 发布

Peter-Lu

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量870

点赞数 12

本文链接：https://blog.csdn.net/lph159/article/details/141637314

版权

Google Maps JavaScript API 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

Google Maps JavaScript API 是前端开发中最强大的地图工具之一，允许开发者将交互式地图嵌入到他们的网站中。它默认使用 Mercator 投影来显示地图，这种投影可以保持方向和形状的准确性，但有时会产生视觉上的失真。为了应对不同的需求，Google Maps 提供了自定义地图投影功能，使开发者能够以不同的方式展示地理信息。本文将深入探讨如何使用 Maps JavaScript API 的自定义地图投影功能，以 Gall-Peters 投影为例，带你一步步实现定制化的地图显示。

一、为什么选择自定义地图投影？

1. 地图投影的背景

在地理信息系统（GIS）中，地图投影是将地球表面的三维曲面转化为二维平面的一种方法。常见的投影类型包括 Mercator、Gall-Peters、Robinson 等。其中，Google Maps 默认使用的是 Mercator 投影，这种投影在方向和形状上具有较高的精确度，但在面积上会出现失真，特别是在靠近两极的区域。

2. Gall-Peters 投影的优势

Gall-Peters 投影是一种等面积投影，这意味着它能够保持地理区域的相对面积不变。这对于一些需要展示全球数据的应用场景非常有用，例如气候变化、人口分布等方面的可视化。通过 Gall-Peters 投影，可以更准确地反映不同区域的实际面积，从而避免误导性的地图展示。

3. 何时使用自定义投影？

当需要展示特定的地理特征或需要对地图的面积和形状进行特定处理时，自定义地图投影就显得非常重要。它可以帮助你更好地传达数据的真实含义，而不仅仅依赖于默认的 Mercator 投影。

二、实现自定义地图投影：Gall-Peters 投影示例

在这一部分，我们将通过具体代码示例展示如何在 Google Maps JavaScript API 中实现 Gall-Peters 投影。我们会逐步讲解如何设置地图、定义自定义投影，并展示地图上的点。

1. 初始化地图

首先，我们需要创建一个基础地图，并将其中心设置在赤道与本初子午线的交点（纬度为 0，经度为 0）。

<!DOCTYPE html>
<html>
  <head>
    <title>自定义地图投影示例</title>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <div id="coords"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

在上面的代码中，我们定义了一个 HTML 页面，页面中包含一个地图容器和一个用于显示鼠标坐标的 div。script 标签引入了 Google Maps API，并在 initMap 函数中初始化地图。

2. 定义 Gall-Peters 投影

为了使用 Gall-Peters 投影，我们需要定义一个自定义的 ImageMapType，并在其中指定如何将地图瓦片（tiles）与地理坐标相对应。

function initGallPeters() {
  const GALL_PETERS_RANGE_X = 800;
  const GALL_PETERS_RANGE_Y = 512;

  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const scale = 1 << zoom;
      const x = ((coord.x % scale) + scale) % scale;
      const y = coord.y;

      if (y < 0 || y >= scale) return "";
      return (
        "https://developers.google.com/maps/documentation/" +
        "javascript/examples/full/images/gall-peters_" +
        zoom +
        "_" +
        x +
        "_" +
        y +
        ".png"
      );
    },
    tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
    minZoom: 0,
    maxZoom: 1,
    name: "Gall-Peters",
  });

  gallPetersMapType.projection = {
    fromLatLngToPoint: function (latLng) {
      const latRadians = (latLng.lat() * Math.PI) / 180;
      return new google.maps.Point(
        GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
        GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians))
      );
    },
    fromPointToLatLng: function (point, noWrap) {
      const x = point.x / GALL_PETERS_RANGE_X;
      const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));
      return new google.maps.LatLng(
        (Math.asin(1 - 2 * y) * 180) / Math.PI,
        -180 + 360 * x,
        noWrap
      );
    },
  };
}

在这里，我们使用 fromLatLngToPoint 和 fromPointToLatLng 函数定义了如何将经纬度转换为瓦片坐标，反之亦然。fromLatLngToPoint 将地理坐标转换为二维平面上的点，而 fromPointToLatLng 则是执行相反的操作。

3. 将自定义投影应用于地图

现在，我们可以将定义好的 Gall-Peters 投影应用到地图中。

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 0,
    center: { lat: 0, lng: 0 },
    mapTypeControl: false,
  });

  initGallPeters();
  map.mapTypes.set("gallPeters", gallPetersMapType);
  map.setMapTypeId("gallPeters");

  const coordsDiv = document.getElementById("coords");
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
  map.addListener("mousemove", (event) => {
    coordsDiv.textContent =
      "lat: " +
      Math.round(event.latLng.lat()) +
      ", " +
      "lng: " +
      Math.round(event.latLng.lng());
  });

  map.data.setStyle((feature) => {
    return {
      title: feature.getProperty("name"),
      optimized: false,
    };
  });
  map.data.addGeoJson(cities);
}

在 initMap 函数中，我们创建了一个地图实例，并将 gallPetersMapType 作为地图的默认投影类型。coordsDiv 用于显示鼠标悬停位置的经纬度，map.data.addGeoJson 用于在地图上添加一些城市的标记。

4. 定义地图上的标记

为了展示地图的实际效果，我们可以在地图上添加一些城市的标记点，使用 GeoJSON 格式定义城市的位置和名称。

const cities = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-87.65, 41.85] },
      properties: { name: "Chicago" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-149.9, 61.218] },
      properties: { name: "Anchorage" },
    },
    // 其他城市...
  ],
};

通过 map.data.addGeoJson(cities)，这些城市标记将会显示在地图上。每个标记点的位置会根据自定义的 Gall-Peters 投影进行计算和展示。

三、深入理解与应用

1. 调整瓦片分辨率

在实际应用中，我们可能需要根据具体的应用场景调整瓦片的分辨率和缩放级别，以达到更好的显示效果。通过 tileSize 和 minZoom、maxZoom 属性，我们可以控制瓦片的显示方式，并优化地图的加载速度。

2. 应用场景示例

自定义地图投影可以应用在多个场景中，例如：

教育领域：在地理课堂上，使用不同的投影展示不同地区的面积差异，帮助学生更好地理解地理信息。
数据可视化：在展示全球范围内的数据时，使用等面积投影确保数据的准确性，不会因为投影的失真而产生误导。

3. 扩展阅读与工具

为了更好地掌握自定义地图投影的使用，建议阅读更多关于地图投影的理论知识，并结合 Google Maps API 文档中的其他示例进行学习。你还可以使用 Google Cloud Shell 直接在线尝试这些示例，快速理解并应用到实际项目中。

四、总结

通过本文的学习，你应该已经掌握了如何使用 Google Maps JavaScript API 实现自定义地图投影。我们以 Gall-Peters 投影为例，详细讲解了从初始化地图到定义自定义投影，再到应用投影和添加标记的完整流程。自定义地图投影不仅可以为你的应用增添独特的视觉效果，还能在展示数据时提供更准确的地理信息。希望这些知识能为你在地理信息系统开发中带来新的思路和灵感。