MapConductorGroundImage ― Bild auf der Karte platzieren
Bestimmen Sie einen Bereich mit zwei Punkten (Südwesten und Nordosten) und legen Sie dort ein einzelnes Bild aus. Etagenpläne von Einrichtungen, historische Karten, Luftbilder, selbst erstellte farbkodierte Karten usw. können unverkachelte Bilder direkt auf der Karte überlagert werden. Bereich und Transparenz können später geändert werden; das Bild bleibt bei Kamerabewegungen am Boden haften und wird entsprechend angezeigt.
01 · Status von GroundImage
GroundImageState stellt ein einzelnes Bild dar. Es enthält einen Bereich, ein Bild, eine Transparenz und einen Tap-Handler. Sie können das Bild auf jede plattformspezifisch natürliche Weise übergeben (Android: Drawable, iOS: UIImage, Web: URL).
val groundImageState =
GroundImageState(
id = "groundImage",
bounds =
GeoRectBounds(
southWest = southWestPosition,
northEast = northEastPosition,
),
image = drawable, // Das Drawable direkt übergeben
opacity = 0.5f,
onClick = this::onGroundImageClick,
)
GroundImage(groundImageState)let groundImageState = GroundImageState(
bounds: GeoRectBounds(southWest: southWest, northEast: northEast),
image: resources.image, // Das UIImage direkt übergeben
opacity: 0.5,
id: "groundImage"
)
content.groundImages = [GroundImage(state: groundImageState)]const image = createGroundImageState({
id: 'ground-image',
bounds: createGeoRectBounds({ southWest, northEast }),
imageUrl: GROUND_IMAGE_URL, // Als URL übergeben
opacity,
onClick: () => showToast('Ground image clicked.'),
});
<GroundImage state={image} />02 · Bereich und Transparenz
Der Bereich ist ein Rechteck. Wenn das Seitenverhältnis des Bildes und das des Bereichs unterschiedlich sind, wird das Bild an den Bereich angepasst gestreckt. Geben Sie daher einen Bereich an, der zum Seitenverhältnis der Zeichnung passt, die Sie platzieren möchten. Bereich, Transparenz und Bild können alle später geändert werden; die Änderungen werden sofort im Rendering übernommen.
Bereich durch Ziehen neu erstellen
Wenn bounds durch Ziehen von zwei Markierungen ausgetauscht wird, folgt das Bild. Die Fähigkeit zur kontinuierlichen Aktualisierung variiert jedoch je nach Anbieter.
Mit der Basiskarte überlagern
Wenn die Transparenz verringert wird, werden Straßen und Ortsnamen der zugrunde liegenden Karte sichtbar. Je nach Engine gibt es Einschränkungen hinsichtlich des Zeitpunkts und der Wirkung der Änderung.
// Die Eck-Marker ziehen, um die Grenzen neu zu bilden
override fun onMarkerDrag(dragged: MarkerState) {
when (dragged.id) {
"south_west" -> southWestPosition = GeoPoint.from(dragged.position)
"north_east" -> northEastPosition = GeoPoint.from(dragged.position)
}
bounds = GeoRectBounds(southWest = southWestPosition, northEast = northEastPosition)
}
// Die Deckkraft wird einfach zugewiesen
groundImageState.opacity = sliderOpacityfunc setOpacity(_ value: Double) {
opacity = value
groundImageState.opacity = value
}
// Die Grenzen beim Ziehen des Markers neu bilden
groundImageState.bounds = GeoRectBounds(southWest: sw, northEast: ne)// Während des Ziehens direkt in das Statusobjekt schreiben, statt auf ein Re-Render zu warten
const applyGeometry = (sw: GeoPoint, ne: GeoPoint) => {
image.bounds = createGeoRectBounds({ southWest: sw, northEast: ne });
polylineState.points = framePoints(sw, ne);
};
image.opacity = opacity;03 · Bei jedem Anbieter gleich aussehen
GroundImage ist die Funktion mit den größten Implementierungsunterschieden zwischen den verschiedenen KartensDK-Treibern. Der Mechanismus der Bildüberlagerung variiert je nach Engine stark; einige verfügen überhaupt nicht über eine vergleichbare Funktion. MapConductor gleicht diese Unterschiede nach Möglichkeit aus, aber bei manchen Anbietern verbleiben Einschränkungen bei dynamischen Änderungen.
Gleicher Bereich, gleiche Streckung
Das Bild wird entsprechend dem angegebenen Bereich platziert. Unabhängig von Unterschieden im Koordinatensystem für Bildüberlagerungen der Engine wird es an derselben Position und in derselben Größe angezeigt.
Zuerst mit nativen Funktionen zeichnen
Jeder Treiber zeichnet, wann immer möglich, optimal unter Verwendung der bildüberlagerrungsspezifischen Funktionen des jeweiligen Karten-SDK (z.B. MediaLayer + ImageElement für ArcGIS, Bildmaterial für Rectangle bei Cesium). Nur für Engines, die keine gleichwertigen Funktionen haben, werden Bildausschnitte als Tiles bereitgestellt und als Raster-Layer überlagert. Der Anwendungscode bleibt bei beiden Pfaden unverändert.
Einschränkungen je nach Anbieter
Das Neu erstellen des Bereichs (kontinuierliche Aktualisierung während des Ziehens) oder das Ändern der Transparenz kann aufgrund von Einschränkungen der Engine eingeschränkt sein. Die statische Platzierung ist bei allen Anbietern gleich, aber für dynamische Änderungen wird empfohlen, dies beim entsprechenden Anbieter zu überprüfen.
Tap-Erkennung ebenfalls gemeinsam
Da die Tap-Erkennung mit einer gemeinsamen Logik durchgeführt wird, wird onClick aufgerufen, unabhängig davon, ob die Engine das Tippen auf Bildüberlagerungen unterstützt.
04 · Antippen
onClick empfängt den Status des Bildes und die angetippten Koordinaten. Im Beispiel wird das Bild selbst durch Antippen ausgetauscht, um die Anzeige umzuschalten.
// Beim Antippen das Bild austauschen
override fun onGroundImageClick(clicked: GroundImageEvent) {
val isBase = clicked.state.image == imageResources.image
image = if (isBase) imageResources.clickedImage else imageResources.image
}private func onGroundImageClick(_ event: GroundImageEvent) {
let isBase = groundImageState.image === resources.image
groundImageState.image = isBase ? resources.clickedImage : resources.image
}createGroundImageState({
bounds,
imageUrl,
onClick: event => showToast(event.clicked),
});Der Status des getippten Bildes. Auf das aktuelle Bild und extra kann verwiesen werden.
Die geografischen Koordinaten des getippten Punkts. Es ist erkennbar, wo innerhalb des Bereichs getippt wurde.
Auch transparente Bereiche des Bildes gehören zum Tippbereich. Wenn transparente Bereiche nicht reagieren sollen, passen Sie den Bereich an die tatsächliche Bildfläche an oder verwenden Sie zusätzlich ein Polygon.