Hızlı başlangıç: flutter_map (raster)
Flutter uygulamasında en kısa yol: Updraft'ın pilot gözü stilinden çizilmiş PNG karoları flutter_map ile göstermek. Uygulamanız bugün OpenStreetMap ya da başka bir sağlayıcının raster karolarını kullanıyorsa geçiş adres ve atıf değişikliğidir.
1. Bağımlılıklar
flutter pub add updraft_maps flutter_map:8.3.2 latlong2:0.10.1 url_launcher:6.3.3
updraft_maps Updraft'ın istemci paketidir: karo adresi, anahtar başlığı, zoom sınırları, önbellek ve atıf satırı tek çağrıda (updraftTileLayer, UpdraftAttribution). url_launcher yalnız atıf satırına dokununca kurallar sayfasını açmak için.
2. Harita
// Updraft quick start 2: flutter_map 8 with Updraft raster tiles (PNG, 256 px; @2x on dense
// screens), through the updraft_maps package.
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:updraft_maps/flutter_map.dart';
import 'package:url_launcher/url_launcher.dart';
/// Updraft tile server root (another one, e.g. staging: --dart-define=UPDRAFT_TILES=https://...).
const updraftTiles = String.fromEnvironment(
'UPDRAFT_TILES',
defaultValue: defaultTilesUrl,
);
/// Key with the `tiles` scope, given at build time:
/// flutter run --dart-define=UPDRAFT_TILES_KEY=upd_...
/// Empty: the public tile path (limited per client address, not counted for you).
const updraftTilesKey = String.fromEnvironment('UPDRAFT_TILES_KEY');
/// Opens the attribution rules page.
void openAttributionRules() => launchUrl(Uri.parse(attributionRulesUrl));
class RasterMapScreen extends StatelessWidget {
const RasterMapScreen({super.key, this.dark = false});
/// `pilot-dark` instead of `pilot-light`.
final bool dark;
@override
Widget build(BuildContext context) => FlutterMap(
options: const MapOptions(
initialCenter: LatLng(36.56, 29.17), // Babadağ, Fethiye
initialZoom: 12,
maxZoom: 17,
),
children: [
// Raster template with {r} (@2x on dense screens), zoom 5–16 drawn and scaled beyond, the
// key as the X-Api-Key header, tiles kept 30 days without asking the network.
updraftTileLayer(
context,
theme: dark ? UpdraftTheme.dark : UpdraftTheme.light,
apiKey: updraftTilesKey,
tilesUrl: updraftTiles,
userAgentPackageName: 'com.example.updraft_quickstart',
),
// Visible attribution line (wraps on narrow screens), not folded into a menu.
const UpdraftAttribution(onTap: openAttributionRules),
],
);
}
Çalıştırma (anahtar isteğe bağlı):
flutter run --dart-define=UPDRAFT_TILES_KEY=upd_…
Örnek uygulamanın tamamı (pubspec.yaml, main.dart; raster ve vektör haritası iki sekmede) depoda devdocs/examples/flutter/ altındadır. Platform klasörleri depoda yoktur, bir kez flutter create . çalıştırın.
3. updraftTileLayer ne ayarlar
| Ayar | Neden |
|---|---|
minNativeZoom: 5, maxNativeZoom: 16 |
Updraft z5–16 çizer; bunun dışında karo yoktur (404). flutter_map z17'de z16 karosunu büyütür, z5'in altında z5'i küçültür. Bu iki satır yoksa yakınlaşınca harita boş kalır |
{r} + retinaMode |
Yüksek yoğunluklu ekranda @2x (512 px, aynı alan) ister; karo 3–4 kat büyüktür. Veri tasarrufu için kaldırabilirsiniz |
headers: {'X-Api-Key': …} |
Anahtar başlıkta gider, adreste değil. Uygulamaya giren anahtar çıkarılabilir: yalnız tiles kapsamlı anahtar kullanın |
cacheFor: 30 gün (overrideFreshAge) |
Updraft karoları bir saat taze sayılır (Cache-Control: max-age=3600); flutter_map ağ yokken bayat karoyu siler. Dağda çekim yokken harita boş kalmasın diye tazelik istemcide uzatılır. Taban harita ayda bir yenilenir |
userAgentPackageName |
Uygulamanızın paket adı; sunucu yükü istemciye göre izlenir |
Koyu tema: theme: UpdraftTheme.dark (adreste pilot-dark). Paketi kullanmadan aynı katman için tablodaki değerleri TileLayer'a kendiniz verin; adres https://maps.updraftmaps.com/raster/pilot-light/{z}/{x}/{y}{r}.png.
4. Raster karoda neler var
Taban harita: arazi örtüsü, su, yollar, teleferik, eş yükselti, tepe gölgesi, elektrik hatları ve etiketler. Termik ızgarası, skyway, kalkış ve iniş raster karoya girmez: bu katmanlar eşiğe, moderasyona ve rıza geri çekmeye bağlıdır, saatlerce önbellekte kalan PNG'ye gömülmez. Bunlar için vektör karo (maplibre_gl) ya da API (GET /v1/sites) kullanın.
5. Atıf
Satır haritanın üstünde görünür kalmalı, katlanan bir menüye konmamalıdır. flutter_map'in RichAttributionWidget'ı metni bir düğmenin arkasına katladığı için paketin UpdraftAttribution'ı kendi küçük satırını çizer (dar ekranda alt satıra kayar). Kurallar: Atıf.