mapbox / mapbox/mapbox-maps-flutter

Overlapping Polygons Affect Opacity of Fill Color

Offen
#456 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
Dart
Sterne
380
Forks
204
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

Problem:
Currently, our system generates polygons comprising 360 vertices to display a red circle with a fill color set to red and an opacity of 10%. However, when these polygons overlap, the resulting opacity is not consistent. Overlapping polygons cause areas of the circle to become darker than the intended 10% opacity due to the additive effect of overlapping colors.

image

Expected Behavior:
We expect the fill color opacity to remain consistent at 10% throughout the entire circle, regardless of overlapping polygons.

This is the current situation:
image

What we need is:
image

nonSmokingAreas[result[i].id] =
    (await nonSmokingAreaManager?.create(
  PolygonAnnotationOptions(
      fillColor: Colors.red.withOpacity(0.1).value,
      fillSortKey: 1,
      geometry: Polygon(
        coordinates: [
          List.generate(
            points.length,
            (index) => Position(
              points[index].lng,
              points[index].lat,
            ),
          ),
        ],
      ).toJson()),
))!;
import 'dart:math';

/// Generates a list of points representing a regular polygon around a given geographic coordinate (latitude and longitude) with a specified radius.
///
/// Parameters:
/// - `lat` (double): The latitude of the central position of the polygon.
/// - `lng` (double): The longitude of the central position of the polygon.
/// - `radius` (double): The radius of the polygon in meters.
///
/// Returns:
/// - `List<({double lat, double lng})>`: A list of tuples, where each tuple represents a point on the generated polygon. Each point is represented by latitude and longitude.
///
/// Algorithm:
/// The function uses an iterative method to generate the points of the polygon. It calculates the position of each point using the distance (`radius`) and the angle relative to the central position. It uses the `_translateCoordinate` function to compute the geographic coordinates of each point.
///
/// 1. Initialize an empty list `points` to store the generated points.
/// 2. Iterate from 0 to 11 (total of 36 iterations) for creating a regular polygon.
/// 3. Calculate the angle (`angle`) for each point using the index of the iteration.
/// 4. Calculate the displacement (`dx` and `dy`) relative to the radius and angle.
/// 5. Use the `_translateCoordinate` function to compute the geographic coordinates of each point and add them to the `points` list.
/// 6. Return the `points` list containing all the generated points of the polygon.
///
/// Notes:
/// - The algorithm assumes the Earth is a perfect sphere and uses a simple approximation for computing the coordinates.
/// - The function generates a regular polygon with 36 vertices, which corresponds to a regular pentagon. The number of vertices can be changed by adjusting the loop condition.
List<({double lat, double lng})> listgeneratePolygonPoints(
    double lat, double lng, double radius) {
  List<({double lat, double lng})> points = [];

  for (int i = 0; i < 360; i++) {
    double angle = (2 * pi * i) / 360;
    double dx = radius * cos(angle);
    double dy = radius * sin(angle);
    final point = _translateCoordinate((lat: lat, lng: lng), dx, dy);
    points.add(point);
  }

  return points;
}

/// Translates the geographic coordinates of a point based on a given origin position, displacement in latitude and longitude, and Earth radius.
///
/// Parameters:
/// - `coordinate` ({double lat, double lng}): The initial coordinates tuple containing latitude and longitude.
/// - `dx` (double): The displacement in longitude.
/// - `dy` (double): The displacement in latitude.
///
/// Returns:
/// - `({double lat, double lng})`: A tuple containing the computed geographic coordinates of the point resulting from the displacement from the origin position.
///
/// Algorithm:
/// 1. Calculate the new latitude component (`lat`) based on the displacement in latitude and the Earth radius.
/// 2. Calculate the new longitude component (`lon`) based on the displacement in longitude, Earth radius, and the cosine of the latitude of the origin position.
/// 3. Return a tuple containing the calculated latitude and longitude of the new point.
///
/// Notes:
/// - The function considers the curvature of the Earth and uses a simple formula to compute the new coordinates.
/// - It is assumed that the displacement (`dx` and `dy`) is relatively small, so the curvature of the Earth can be neglected.
({double lat, double lng}) _translateCoordinate(
    ({double lat, double lng}) coordinate, double dx, double dy) {
  const double earthRadius = 6378137; // Earth radius in meters
  double lat = coordinate.lat + (dy / earthRadius) * (180 / pi);
  double lon = coordinate.lng +
      (dx / earthRadius) * (180 / pi) / cos(coordinate.lat * pi / 180);
  return (lat: lat, lng: lon);
}

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Der Bericht nennt keine Repository-Datei und keinen Test; beginne mit der PolygonAnnotationOptions/create-Verwendung und dem im Issue gezeigten Generator für Polygone mit 360 Vertices. Reproduziere den roten Kreis mit 10 % Opazität und überlappenden Polygonen und überprüfe anschließend, dass der gerenderte Kreis gleichmäßig opak bleibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
dart, flutter
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.