Закрепите API-интерфейс Google Maps JS ImageMapType на многоугольник

Ответ 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>

Ответ 2

Вам нужен Google Maps perse? Я знаю, что Openlayers 3 обеспечивает лучшую поддержку такого рода вещей. Например, посмотрите this.

Если вы действительно должны использовать Карты Google, я предлагаю реализовать свой собственный MapType и генерировать плитки, необходимые для покрытия вашей области полигона самостоятельно, используя MapTiler. (MapTiler также создает пример реализации Google Maps для вас, поэтому это не должно быть слишком сложно.)

Ответ 3

Вы можете разместить DIV над своей картой с абсолютным позиционированием и высоким индексом z. затем примените маску многоугольника к этому DIV следующим образом: -webkit-clip-path: polygon(0 0, 0 100%, 100% 0);

Ответ 4

Я вижу, что вы не можете использовать обычные маскирующие стратегии, потому что вам нужно видеть нижний уровень. Могу ли я предложить SVG более полный набор отсеков? Смотрите здесь.

Совместимость браузера хороша, но не велика, но вы можете абсолютно выполнить то, что вы здесь пытаетесь (если вам не нужно панорамировать/масштабировать карту, тогда вы ввернуты до тех пор, пока Карты не реализуют такую ​​вещь).

Ответ 5

Вы можете использовать параметр canvas.toDataURI() в HTML5 для получения URL-адреса, который требуется для 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() Пример кода для отсечения холста.

Ответ 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>

Ответ 7

Кто-нибудь решил эту проблему?