polilínea agm obtener punto de nueva arista

3 minutos de lectura

Avatar de usuario de KLTR
KLTR

Tengo una agm-polyline con 2 agm-polyline-points. Al mover el borde de la línea (el punto medio), quiero guardar la nueva línea con 3 puntos. El problema es que, al mover el borde a una nueva ubicación, el evento devuelve las coordenadas incorrectas o solo las coordenadas de otra cosa.

    <agm-map [zoom]="zoom" [latitude]="lat" [longitude]="lng" style="height: 500px">
      <agm-polyline [editable]="true" (lineMouseUp)="addEdge($event)">
        <agm-polyline-point 
        *ngFor="let point of points" [latitude]="point.lat" [longitude]="point.lng"></agm-polyline-point>
      </agm-polyline>
    </agm-map>
  lat: number = 32.0795723;
  lng: number = 34.7757089;
  zoom: number = 16;
  @ViewChild('line') polyLine : AgmPolyline;
  points = [
    {lat: 32.0795723, lng: 34.7757089},
    {lat: 32.0780565, lng: 34.7798036}
  ]
  addEdge(event){
    let point = {lat: event.latLng.lat(), lng: event.latLng.lng()};
    if (event.vertex !== undefined) {
      this.points[event.vertex] = point;
    } else if (event.edge !== undefined) {
      this.points.splice(event.edge + 1, 0, point);
    }
    console.log(this.points)
  }

echa un vistazo a la apilar.

avatar de usuario de rhavelka
ravelka

Nueva respuesta

Mi respuesta anterior necesitaba cálculos de proyección de Mercator, lo cual no es divertido. Mirándolo más a fondo, hay una polyPathChange evento que se activa cuando alguien actualiza la línea. Deberá actualizar su agm y rxjs para usar este evento. Tengo un ejemplo de trabajo en este apilar. Tenga en cuenta que oculto / muestro la línea porque el polyPathChange solo se activa una vez, por lo que ocultar/mostrar reinicializa la línea. por lo que el evento se dispara de nuevo. ¿Hay alguna solución que no requiera ocultar/mostrar la línea? Tal vez, pero no sé cómo hacerlo.

Respuesta antigua

Sé que esto es un poco tarde, pero no se dio una respuesta formal a esta pregunta.

Después de jugar con esto durante mucho tiempo, finalmente descubrí lo que estaba pasando. La latitud/longitud del evento que regresa del (lineMouseUp) no es el nodo de la línea, pero es el nuevo punto medio. Así que no es un número aleatorio, es (pointA.lat + pointB.lat)/2. La forma de evitar esto es con las siguientes ecuaciones antes de empalmarlo en la matriz:

point.lat = (point.lat - this.points[event.edge].lat) * 2 + this.points[event.edge].lat;
point.lng = (point.lng - this.points[event.edge].lng) * 2 + this.points[event.edge].lng;

Tenga en cuenta que es posible que esto no funcione en todos los hemisferios (no lo sé, no probé tanto), por lo que es posible que deba verificar si lat/lng son positivos/negativos y ajustar la ecuación. Aquí hay un trabajo apilar

  • Después de probar más mi código, es bueno para polilíneas de pequeña escala, pero tiene muchos errores en polilíneas de gran escala. entonces algo no esta bien

    – ravelka

    14 de julio de 2020 a las 13:38


  • @KLTR Creo que sé por qué tiene errores a gran escala. está escalando para que el punto medio sea lineal para el mapa 2D actual, pero la latitud no es lineal en el mapa, no está linealmente agrupada cerca del ecuador y espaciada cerca de los polos. Ej: si dibuja una línea de 0 grados a 80 grados, el punto medio de latitud real es 40 pero obtendrá algo así como 65 porque eso es lo que es en la escala lineal del mapa.

    – ravelka

    14 de julio de 2020 a las 13:48


  • wiki aquí hay una referencia de lo que está pasando. Traté de encontrar una forma diferente de capturar los puntos que desea para la línea donde no requiere matemática aterradora, pero no he tenido suerte. esto puede ser algo que necesites preguntarle al github

    – ravelka

    14 de julio de 2020 a las 14:16


  • Señor, tengo el mismo problema que usted, pero (polyPathChange) no reacciona en absoluto, ¿sigue funcionando para usted?

    – Masajeador

    10 de agosto de 2020 a las 11:31

  • @Massaget por lo que puedo decir, el stackblitz en mi respuesta todavía funciona

    – ravelka

    10 de agosto de 2020 a las 13:21

¿Ha sido útil esta solución?