javascript - 将 Google Maps JS API ImageMapType 剪辑为多边形

Question

如何将 Google map 中的 MapType 裁剪为任意多边形。例如，如果我有一个自定义 ImageMapType覆盖了很大的区域(即全世界)，但我只想在给定的多边形(即一个国家)内显示它。

有没有办法将 ImageMapType 裁剪到给定的多边形，或者实现自定义 MapType 来实现此行为？它应该允许正常缩放和平移。

map 的其余部分应该保持不变，并且会有一个只覆盖特定区域的 MapType。因此，不可能简单地叠加一个多边形来覆盖多边形之外的区域来显示所需的内容。

像这样:

服务器端剪辑不是一个选项。

Answer 1

我已经编写了可以满足您要求的叠加 map 类型的代码。请务必在您的目标浏览器中进行测试。 Fiddle

function ClipMapType(polygon, map) {
  this.tileSize = new google.maps.Size(256, 256);
  this.polygon = polygon;
  this.map = map;
}

ClipMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var map = this.map;
  var scale = Math.pow(2, zoom);
  if (coord.y < 0 || coord.y >= scale) return ownerDocument.createElement('div');
  var tileX = ((coord.x % scale) + scale) % scale;
  var tileY = coord.y;
  // Your url pattern below
  var url = "https://khms0.google.com/kh/v=694&x=" + tileX + "&y=" + tileY + "&z=" + zoom;
  var image = new Image();
  image.src = url;

  var canvas = ownerDocument.createElement('canvas');
  canvas.width = this.tileSize.width;
  canvas.height = this.tileSize.height;
  var context = canvas.getContext('2d');

  var xdif = coord.x * this.tileSize.width;
  var ydif = coord.y * this.tileSize.height;

  var ring = this.polygon.getArray()[0];
  var points = ring.getArray().map(function(x) {
    var worldPoint = map.getProjection().fromLatLngToPoint(x);
    return new google.maps.Point((worldPoint.x) * scale - xdif, (worldPoint.y) * scale - ydif);
  });

  image.onload = function() {
    context.beginPath();
    context.moveTo(points[0].x, points[0].y);
    var count = points.length;
    for (var i = 0; i < count; i++) {
      context.lineTo(points[i].x, points[i].y);
    }
    context.lineTo(points[count - 1].x, points[count - 1].y);

    context.clip();
    context.drawImage(image, 0, 0);
    context.closePath();
  };

  return canvas;
};

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: 15,
      lng: 15
    }
  });
  var polygon = new google.maps.Data.Polygon([
    [{
      lat: 0,
      lng: 0
    }, {
      lat: 30,
      lng: 30
    }, {
      lat: 0,
      lng: 30
    }]
  ]);
  var mapType = new ClipMapType(polygon, map);
  map.overlayMapTypes.insertAt(0, mapType);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

工作原理

基本上 ClipMapType 类是一个 MapType 接口(interface)。 getTile 调用此接口(interface)的方法，使用瓦片坐标和缩放级别来获取每个瓦片的瓦片。 ClipMapType 创建一个 canvas 元素作为图 block ，并绘制裁剪到多边形内部的图 block 图像。如果性能很重要，可以对其进行优化以更快地工作。

免责声明

通过破解 URL 使用 Google 切片服务器可能违反了 Google map 服务条款。我用它来演示，不建议在生产中使用它。我的回答是试图让您了解如何创建自己的解决方案。