Question

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

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

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

像这样：

Australia map with a clipped overlay on South Australia

服务器端裁剪不是一种选择。

Answer 1

我已经编写了覆盖地图类型的代码，可以执行您想要的操作。请务必在目标浏览器中进行测试。 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接口。使用切片坐标和缩放级别调用此接口的getTile方法以获取每个切片的切片。 ClipMapType创建一个canvas元素作为tile，并绘制剪裁到多边形内部的tile图像。如果性能很重要，可以对其进行优化以加快工作速度。

<强>声明

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

Answer 2

您是否需要谷歌地图？我知道Openlayers 3为这种东西提供了更好的支持。例如，请查看this。

如果您真的必须使用Google地图，我建议您使用MapTiler自己实现自己的MapType并生成覆盖多边形区域所需的切片。（MapTiler还为您生成了一个示例Google Maps实现，因此不应该太难。）

Answer 3

您可以将DIV放置在地图上方，具有绝对定位和高z-index。然后，将多边形蒙版应用于该DIV，如下所示：-webkit-clip-path: polygon(0 0, 0 100%, 100% 0);

Answer 4

我发现您无法使用常规屏蔽策略，因为您需要能够看到较低层。我可以建议SVG更完整的剪辑套件吗？ See here

浏览器的兼容性很好，但并不是很好，但是你绝对可以完成你在这里尝试的内容（除非你需要平移/缩放地图，然后你就搞错了，直到地图实现了这样的事情）

Answer 5

您可以使用HTML5中的canvas.toDataURI()选项获取getTileUrl() ImageMapType所需的网址。

getTileUrl: function(coord, zoom) {
    var normalizedCoord = getNormalizedCoord(coord, zoom);
    if (!normalizedCoord) {
      return null;
    }
    var bound = Math.pow(2, zoom);
    // reset and clip the preloaded image in a hidden canvas to your required height and width

    clippedImage = canvas.toDataURL();
    return clippedImage;
    }

要设置图片并将其调整为正确尺寸，请使用canvas.drawImage()
要将图片从画布剪切到任何非矩形尺寸，请使用canvas clip() Sample code for canvas clipping。

Answer 6

您可以使用svg clippath和foreignobject svg标签将html文档放入svg中，然后将其剪辑为所需的形状，如此代码取自codepen.io/yoksel/pen/oggRwR：

@import url(http://fonts.googleapis.com/css?family=Arvo:700);

.svg {
  display: block;
  width: 853px;
  height: 480px;
  margin: 2em auto;
	}

text {
  font: bold 5.3em/1 Arvo, Arial sans-serif;
	}

<svg class="svg">
    <clippath id="cp-circle">
      <circle r="180" cx="50%" cy="42%"></circle>
      <text
            text-anchor="middle"
            x="50%"
            y="98%"
            >Soldier Of Fortune</text>
    </clippath>
  
    <g clip-path="url(#cp-circle)">   
   	<foreignObject width="853" x="0"
                y="0" height="480">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <iframe width="853" height="480" src="//www.youtube.com/embed/RKrNdxiBW3Y" frameborder="0" allowfullscreen></iframe>
      </body>
    </foreignObject>
   </g>	
</svg>

http://codepen.io/yoksel/pen/oggRwR

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

6 个答案: