如何旋转 google.maps.LatLngBounds？

Question

我想验证 google.maps.LatLngBounds 是否包含特定点。 我使用自定义叠加层，例如：

export class RotateOverlay extends google.maps.OverlayView {
  private _bounds$ = new Subject<google.maps.LatLngBounds>();
  get bounds$(): Observable<google.maps.LatLngBounds> {
    return this._bounds$.asObservable();
  }

  private div: HTMLDivElement;

  constructor(
    private bounds: google.maps.LatLngBounds,
    private image: string,
    private rotation: number,
    private map: google.maps.Map,
    private dragEnabled: boolean = false
  ) {}

onAdd() {
    const div = document.createElement('div');
    div.style.borderStyle = 'none';
    div.style.borderWidth = '0px';
    div.style.position = 'absolute';

    // Create the img element and attach it to the div.
    const img = document.createElement('img');
    img.src = this.image;
    img.style.width = '100%';
    img.style.height = '100%';
    img.style.position = 'absolute';

    div.appendChild(img);
    this.div = div;

    // Add the element to the "overlayLayer" pane.
    const panes = this.getPanes();

   
      const sw = this.getProjection().fromLatLngToDivPixel(
        this.bounds.getSouthWest()
      );
      const ne = this.getProjection().fromLatLngToDivPixel(
        this.bounds.getNorthEast()
      );

      const bounds = new google.maps.LatLngBounds(
        this.getProjection().fromDivPixelToLatLng(
          new google.maps.Point(sw.x, sw.y)
        ),
        this.getProjection().fromDivPixelToLatLng(
          new google.maps.Point(ne.x, ne.y)
        )
      );
      this._bounds$.next(bounds);
      panes.overlayLayer.appendChild(div);
}
draw() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
const overlayProjection = this.getProjection();

// Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
const sw = overlayProjection.fromLatLngToDivPixel(
  this.bounds.getSouthWest()
);
const ne = overlayProjection.fromLatLngToDivPixel(
  this.bounds.getNorthEast()
);

// Resize the image's div to fit the indicated dimensions.
const div = this.div;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = ne.x - sw.x + 'px';
div.style.height = sw.y - ne.y + 'px';
div.style.transform = 'rotate(' + this.rotation + 'deg)';


 }
  }

在“父级”中，我使用它来验证我的 position 是否在界限内：

this.rotateOverlay.bounds$.subscribe((bounds) => {
   bounds.contains(this.position);
});

图像正确显示。 但是 bounds$ 接收该点的 position 而不包括旋转。

我怎样才能得到正确的 LatLngBounds 包括里面的旋转？

谢谢

编辑1：

按照评论中的建议，我创建了一个多边形，它显示在我的自定义叠加层上。 但是没有应用旋转，这里是代码：

const sw = this.bounds.getSouthWest();
      const ne = this.bounds.getNorthEast();
      const coordinates = [
        ne,
        { lat: ne.lat(), lng: sw.lng() },
        sw,
        { lat: sw.lat(), lng: ne.lng() },
      ];

      //debugger;
      var polygon = new google.maps.Polygon({
        paths: coordinates,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
      });
      polygon.setMap(this.map);

      const rotatePolygon = (polygon, angle) => {
        var map = polygon.getMap();
        var prj = map.getProjection();
        var origin = this.bounds.getCenter(); //rotate around first point

        var coords = polygon.getPath().getArray().map((latLng) => {
          var point = prj.fromLatLngToPoint(latLng);
          var rotatedLatLng = prj.fromPointToLatLng(rotatePoint(point, origin, angle));
          return { lat: rotatedLatLng.lat(), lng: rotatedLatLng.lng() };
        });
        polygon.setPath(coords);
        return coords;
      }

      const rotatePoint = (point, origin, angle) => {
        var angleRad = angle * Math.PI / 180.0;
        return {
          x: Math.cos(angleRad) * (point.x - origin.x) - Math.sin(angleRad) * (point.y - origin.y) + origin.x,
          y: Math.sin(angleRad) * (point.x - origin.x) + Math.cos(angleRad) * (point.y - origin.y) + origin.y
        };
      }
      debugger;
      const coords = rotatePolygon(polygon, this.rotation);
      //polygon.setPath(coords);
      //polygon.setMap(this.map);
      this._polygon$.next(polygon);

      panes.overlayLayer.appendChild(div);

在父母中：

this.rotateOverlay.polygon$.subscribe(polygon => {

          this.map.googleMap.addListener("click", (data) => {
            const isInsidePolygon = google.maps.geometry.poly.containsLocation(
              data.latLng,
              polygon
            );
            [..]

Answer 1

我在编辑 1 中非常接近，这是可行的解决方案：

在构造函数之前：

private _polygon$ = new Subject<google.maps.Polygon>();
  get polygon$(): Observable<google.maps.Polygon> {
    return this._polygon$.asObservable();
  }

在上添加 function：

const sw = this.bounds.getSouthWest();
      const ne = this.bounds.getNorthEast();
      const coordinates = [
        ne,
        { lat: ne.lat(), lng: sw.lng() },
        sw,
        { lat: sw.lat(), lng: ne.lng() },
      ];

      //debugger;
      var polygon = new google.maps.Polygon({
        paths: coordinates,
        strokeColor: 'transparent', // because I dont want to see it
        fillColor: 'transparent', // because I dont want to see it
      });
      polygon.setMap(this.map);

      const rotatePolygon = (polygon, angle) => {
        var map = polygon.getMap();
        var prj = map.getProjection();
        var origin = prj.fromLatLngToPoint(this.bounds.getCenter()); // here was the error in the Edit 1

        var coords = polygon.getPath().getArray().map((latLng) => {
          var point = prj.fromLatLngToPoint(latLng);
          var rotatedLatLng = prj.fromPointToLatLng(rotatePoint(point, origin, angle));
          return { lat: rotatedLatLng.lat(), lng: rotatedLatLng.lng() };
        });
        polygon.setPath(coords);
      }

      const rotatePoint = (point, origin, angle) => {
        var angleRad = angle * Math.PI / 180.0;
        return {
          x: Math.cos(angleRad) * (point.x - origin.x) - Math.sin(angleRad) * (point.y - origin.y) + origin.x,
          y: Math.sin(angleRad) * (point.x - origin.x) + Math.cos(angleRad) * (point.y - origin.y) + origin.y
        };
      }
      rotatePolygon(polygon, this.rotation);
      this._polygon$.next(polygon); 

在父级中，处理 map 和多边形中的点击：

this.rotateOverlay.polygon$.subscribe(polygon => {
        if (this.positionDevice) {
          polygon.addListener("click", (data) => {
           // inside
          });          

          this.map.googleMap.addListener("click", (data) => {
            // outside
          });
        }
      });