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

如何将Google Maps中的MapType裁剪到任意多边形。 例如,如果我有一个自定义的ImageMapType可以覆盖大面积(即整个世界),但是我只想在给定的多边形(即一个国家)内显示它。

有没有一种方法可以将ImageMapType裁剪为给定的多边形,或者实现自定义MapType来实现此行为? 它应该允许正常缩放和平移。

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

像这样:

Australia map with a clipped overlay on South Australia

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

Nicolas asked 2019-11-08T18:03:01Z
6个解决方案
12 votes

我已经编写了您想要的覆盖图类型的代码。 确保在目标浏览器中进行测试。 小提琴

ClipMapType
ClipMapType
ClipMapType

这个怎么运作

基本上ClipMapType类是MapType接口。 使用图块坐标和缩放级别调用此接口的getTile方法,以获取每个图块的图块。 ClipMapType创建画布元素以充当图块,并绘制剪切到多边形内部的图块图像。 如果性能很重要,则可以对其进行优化以更快地工作。

放弃

通过黑客入侵网址使用Google Tile Server可能违反了Google Maps服务条款。 我将其用于演示,不建议在生产中使用它。 我的答案是尝试为您提供洞察力,以创建自己的解决方案。

Gökhan Kurt answered 2019-11-08T18:03:44Z
2 votes

您需要Google Maps本身吗? 我知道Openlayers 3为这类东西提供了更好的支持。 例如,看看这个。

如果您确实必须使用Google Maps,建议您实现自己的MapType并使用MapTiler生成覆盖多边形区域所需的图块。 (MapTiler还会为您生成一个示例Google Maps实现,因此应该不会太难。)

Danny Hoek answered 2019-11-08T18:04:15Z
1 votes

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

Manuel Alejandro answered 2019-11-08T18:04:39Z
1 votes

您可以在HTML5中使用canvas clip()选项来获取ImageMapType中的canvas clip()所需的URL。

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 clip()
  • 要将图像从画布剪切到任何非矩形尺寸,请使用canvas clip()画布剪辑的示例代码。
cnvzmxcvmcx answered 2019-11-08T18:05:17Z
1 votes

我看到您不能使用常规的遮罩策略,因为您需要能够看到较低的图层。 我可以建议SVG提供更完整的剪辑套件吗? 看这里。

浏览器的兼容性很好,但不是很好,但是您可以完全完成此处要尝试的操作(除非您需要平移/缩放地图,否则您将为之困惑,直到Maps实现这样的事情为止)。

Reed Spool answered 2019-11-08T18:05:49Z
1 votes

您可以使用svg剪切路径,以及外来对象svg标记,将html文档放入svg中,然后将其剪切为所需的形状,例如从codepen.io/yoksel/pen/oggRwR中获取的代码:

<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>
<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]

Paul Humphreys answered 2019-11-08T18:06:29Z
translate from https://stackoverflow.com:/questions/24311350/clip-google-maps-js-api-imagemaptype-to-a-polygon