将Google Maps JS API ImageMapType剪切为多边形

Question

如何将Google地图中的MapType剪裁为任意多边形.例如,如果我有一个覆盖大区域(即全世界)的自定义ImageMapType,但我想仅在给定多边形(即一个国家/地区)内显示它.

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

地图的其余部分应保持不变,并且MapType仅覆盖特定区域.因此,不可能简单地覆盖多边形以覆盖多边形外部的区域以显示所需的内容.

像这样:

服务器端裁剪不是一个选项.

Answer 1

我已经编写了覆盖地图类型的代码,可以执行您想要的操作.请务必在目标浏览器中进行测试.小提琴

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>

这个怎么运作

基本上ClipMapTypeclass是MapType接口.getTile使用图块坐标和缩放级别调用此接口的方法以获取每个图块的图块.ClipMapType创建一个canvas元素作为tile,并绘制剪裁到多边形内部的tile图像.如果性能很重要,可以优化它以更快地工作.

放弃

通过黑客攻击URL来使用Google磁贴服务器可能违反了Google地图服务条款.我用它进行演示,不建议在生产中使用它.我的回答是试图让您深入了解如何创建自己的解决方案.