javascript - tutorial - google maps marker title

Clip de Google Maps JS API ImageMapType a un polígono

Question

¿Cómo puedo recortar un MapType en Google Maps a un polígono arbitrario? Por ejemplo, si tengo un ImageMapType personalizado que cubre un área grande (es decir, todo el mundo), pero quiero mostrarlo solo dentro de un polígono determinado (es decir, un país).

¿Hay alguna manera de recortar el ImageMapType en un polígono determinado o implementar un MapType personalizado para lograr este comportamiento? Debería permitir el zoom y la panorámica normalmente.

El resto del mapa debe permanecer igual, y debería haber un MapType que cubra solo un área específica. Por lo tanto, no es posible simplemente superponer un polígono para cubrir las áreas fuera del polígono para mostrar solo lo que se necesita.

Al igual que:

El recorte del lado del servidor no es una opción.

Answer 1

¿Necesitas Google Maps en forma automática? Sé que Openlayers 3 brinda un mejor soporte para este tipo de cosas. Por ejemplo, mira this .

Si realmente debe usar Google Maps, le sugiero que implemente su propio MapType y genere los mosaicos necesarios para cubrir su área de polígono usando MapTiler . (MapTiler también genera un ejemplo de implementación de Google Maps para usted, por lo que no debería ser demasiado difícil).

Answer 2

He escrito el código para un tipo de mapa de superposición que hace lo que desea. Asegúrese de probar en sus navegadores de destino. 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>

Cómo funciona

Básicamente, la clase ClipMapType es una interfaz MapType. getTile método getTile de esta interfaz se llama con coordenadas de mosaico y nivel de zoom para obtener mosaicos para cada mosaico. ClipMapType crea un elemento canvas para actuar como un mosaico y dibuja la imagen del mosaico recortada dentro del polígono. Si el rendimiento es importante, se puede optimizar para que funcione más rápido.

Renuncia

El uso de servidores de mosaico de Google pirateando la URL probablemente viole las Condiciones del servicio de Google Maps. Lo usé para demostración y no recomiendo usarlo en producción. Mi respuesta es un intento de darle una idea para que pueda crear su propia solución.

Answer 3

Podría colocar un DIV sobre su mapa, con un posicionamiento absoluto y un alto índice z. luego, aplique una máscara poligonal a ese DIV de la siguiente manera: -webkit-clip-path: polygon(0 0, 0 100%, 100% 0);

Answer 4

Puede usar la opción canvas.toDataURI() en HTML5 para obtener la url que se requiere para getTileUrl() de 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;
    }

• Para establecer y cambiar el tamaño de la imagen para corregir la dimensión, use canvas.drawImage()
• Para recortar la imagen desde el lienzo a cualquier dimensión no rectangular, use el canvas clip() Código de muestra para el recorte de lienzo .

Answer 5

Puedes usar un clippath svg, junto con la etiqueta svg de foreignobject para poner un documento html dentro del svg y luego recortarlo a la forma deseada como este código tomado de 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

Answer 6

Veo que no puede usar estrategias de enmascaramiento normales porque necesita poder ver la capa inferior. ¿Puedo sugerir la suite de clipping más completa de SVG? Mira aquí .

La compatibilidad del navegador es buena pero no excelente, pero puedes lograr lo que estás intentando aquí (a menos que necesites desplazarte / hacer zoom en el mapa, entonces estás jodido hasta que Maps implemente tal cosa).